visualwip Wiki Rss Feed

New Comment on "Column types"

Gnemesis — Wed, 31 Oct 2012 20:49:05 GMT

I've had the same issue. I'd love to use the videos as a starting point in setting up Visual WIP, it is difficult to do so when the videos have no audio track.

New Comment on "Column types"

chuck6478 — Mon, 14 May 2012 21:44:22 GMT

I've tried the documentation videos but there appears to be no audio. I've tried from different machines, browsers, and networks all with the same result.

Updated Wiki: Documentation

HakanForss — Thu, 05 Jan 2012 04:02:15 GMT

How to get started with Visual WIP.

Downloading and extracting Visual WIP from http://visualwip.codeplex.com
Starting the application
Creating a query folder and a team query for our board
Adding a Single Column to the board

Launch in another window

Setting up a board

Adding 2*2 Dual columns that share the work-in-progress limit
Adding new window for second monitor
Adding 2 Single columns with different work item sizes
Activate Design Mode, resizing andreposition columns
Adding Rich text column

Launch in another window

Edit work item

You can edit a work item on the board by double clicking the sticky on the board. This will open the standard TFS work item editor. Any changes made to the work item will be reflected on the board when the board is refreshed.

Visualization customization

Visual WIP is designed to give you as much visualization customization as possible. Today this customization has to be done by making changes to the runtime loaded xaml files found in the installation folder for Visual WIP. Here is a short description of the files:

MainResources.xaml – contains design elements related to shell and common design elements
WorkItemResources.xaml – contains design elements related to work items
Tfs2010WorkItemWorkProvider.xaml – contains TFS specific design elements

See an example

Updated Wiki: Home

HakanForss — Mon, 19 Sep 2011 21:34:02 GMT

Example 1. Main window and Window 1 on two monitors

Beta 2 is now out! New improved UI and better custom visualization support

Visual WIP is a visualization tool to make your Work In Progress (WIP) visible. The standard visualization is a card-wall with stickies in different columns.

If work-in-progress limits are set for a column the same amount of kanban’s(slots/placeholders) are added to the column. If more work is added to the column than the set work-in-progress limit the column background will change color.

The main goals of Visual WIP is to:

Visualizer a process work-in-progress by using strong visual signals.
Utilize multi monitors to enable to both show an overview from more that 10 feet’s and show detailed information when closer.
Use a plug-in model to enable customization and support different electronic backing systems.
Not tied to a specific process as Kanban can be applied to any process.

Example 2. Main window on one monitor

Visualization

Visual WIP is designed to be highly customizable. Most of the visuals are defined in xaml files that are loaded at startup. You are free to make any changes to the xaml files to fit your visualization needs. You can easily change what sizes, colors,images, work item fields and so on to show or not show.

Multi Monitor support

Visual WIP is designed to be shown on as many monitor as possible. It is recommended to use high resolution monitors over use of monitors that are big in size. The default design uses quite a bit of screen real estate, this is by design. This enables to both to show an overview from more that 10 feet’s and show detailed information when closer. As previously described the design can be customized if this is not appropriate for your situation.

Supporting different electronic systems

Visual WIP is built to support many different electronic systems. Visual WIP is built using a plug-in model where the plug-in, or provider, is responsible to get the work items to visualize.

Currently there is one work item provider for Visual WIP. That provider is for Team Foundation Server 2010. All thou this provider has not been extensively tested with Team Foundation Server 2008 it should work.

There are plans to add support for SharePoint 2007 and SharePoint 2010 in the near future.

Example 3. Team Foundation Server Work Item Editor. Double click on the sticky on the board to edit.

Processes

Visual WIP is designed to be used as a virtual kanban board and is not tie to any specific process. Visual WIP can be used with Scrum and visualize a virtual Scrum board but there is no built in user story swim lane support.

Example 4 & 5. Two very different processes

Visual WIP is design to have a separate query for every column. When using Team Foundation Server this means that you select a Team Queries for every column. You can use the queries already defined by your process template or you can defines your own.

Example 6. Select the Team Query that will represent a column on the board.

The version is primary tested against MSF for Agile for Team Foundation Server 2010.

Help wanted!

Are you interested in contributing to the project? We appreciate any help we can get. We are especially looking for help with UX work and help with building an SharePoint provider.

Progress and information

Progress reports are posted at Håkan Forss blog under the Visual WIP tag

You can also follow Visual WIP at twitter @VisualWIP

Updated Wiki: Home

HakanForss — Mon, 19 Sep 2011 20:57:53 GMT

Example 1. Main window and Window 1 on two monitors

Beta 2 is now out! New improved UI and better custom visualization support

Visual WIP is a visualization tool to make your Work In Progress (WIP) visible. The standard visualization is a card-wall with stickies in different columns.

The main goals of Visual WIP is to:

Visualizer a process work-in-progress by using strong visual signals.
Utilize multi monitors to enable to both show an overview from more that 10 feet’s and show detailed information when closer.
Use a plug-in model to enable customization and support different electronic backing systems.
Not tied to a specific process as Kanban can be applied to any process.

Example 2. Main window on one monitor

Visualization

Multi Monitor support

Supporting different electronic systems

Visual WIP is built to support many different electronic systems. Visual WIP is built using a plug-in model where the plug-in, or provider, is responsible to get the work items to visualize.

There are plans to add support for SharePoint 2007 and SharePoint 2010 in the near future.

Processes

The version is primary tested against MSF for Agile for Team Foundation Server 2010.

Help wanted!

Are you interested in contributing to the project? We appreciate any help we can get. We are especially looking for help with UX work and help with building an SharePoint provider.

Progress and information

Progress reports are posted at Håkan Forss blog under the Visual WIP tag

You can also follow Visual WIP at twitter @VisualWIP

Updated Wiki: Home

HakanForss — Mon, 19 Sep 2011 20:52:40 GMT

Example 1. Main window and Window 1 on two monitors

Beta 2 is now out! New improved UI and better custome visualisation support

Visual WIP is a visualization tool to make your Work In Progress (WIP) visible. The standard visualization is a card-wall with stickies in different columns.

The main goals of Visual WIP is to:

Visualizer a process work-in-progress by using strong visual signals.
Utilize multi monitors to enable to both show an overview from more that 10 feet’s and show detailed information when closer.
Use a plug-in model to enable customization and support different electronic backing systems.
Not tied to a specific process as Kanban can be applied to any process.

Example 2. Main window on one monitor

Visualization

Multi Monitor support

Supporting different electronic systems

Visual WIP is built to support many different electronic systems. Visual WIP is built using a plug-in model where the plug-in, or provider, is responsible to get the work items to visualize.

There are plans to add support for SharePoint 2007 and SharePoint 2010 in the near future.

Processes

The version is primary tested against MSF for Agile for Team Foundation Server 2010.

Help wanted!

Are you interested in contributing to the project? We appreciate any help we can get. We are especially looking for help with UX work and help with building an SharePoint provider.

Progress and information

Progress reports are posted at Håkan Forss blog under the Visual WIP tag

You can also follow Visual WIP at twitter @VisualWIP

Updated Wiki: Home

HakanForss — Thu, 15 Sep 2011 22:08:02 GMT

Example 1. Main window and Window 1 on two monitors

Visual WIP is a visualization tool to make your Work In Progress (WIP) visible. The standard visualization is a card-wall with stickies in different columns.

The main goals of Visual WIP is to:

Visualizer a process work-in-progress by using strong visual signals.
Utilize multi monitors to enable to both show an overview from more that 10 feet’s and show detailed information when closer.
Use a plug-in model to enable customization and support different electronic backing systems.
Not tied to a specific process as Kanban can be applied to any process.

Example 2. Main window on one monitor

Visualization

Multi Monitor support

Supporting different electronic systems

Visual WIP is built to support many different electronic systems. Visual WIP is built using a plug-in model where the plug-in, or provider, is responsible to get the work items to visualize.

There are plans to add support for SharePoint 2007 and SharePoint 2010 in the near future.

Processes

The version is primary tested against MSF for Agile for Team Foundation Server 2010.

Help wanted!

Are you interested in contributing to the project? We appreciate any help we can get. We are especially looking for help with UX work and help with building an SharePoint provider.

Progress and information

Progress reports are posted at Håkan Forss blog under the Visual WIP tag

You can also follow Visual WIP at twitter @VisualWIP

Updated Wiki: Home

HakanForss — Thu, 15 Sep 2011 22:06:41 GMT

Example 1. Main window and Window 1 on two monitors

Visual WIP is a visualization tool to make your Work In Progress (WIP) visible. The standard visualization is a card-wall with stickies in different columns.

The main goals of Visual WIP is to:

Visualizer a process work-in-progress by using strong visual signals.
Utilize multi monitors to enable to both show an overview from more that 10 feet’s and show detailed information when closer.
Use a plug-in model to enable customization and support different electronic backing systems.
Not tied to a specific process as Kanban can be applied to any process.

Example 2. Main window on one monitor

Visualization

Multi Monitor support

Supporting different electronic systems

Visual WIP is built to support many different electronic systems. Visual WIP is built using a plug-in model where the plug-in, or provider, is responsible to get the work items to visualize.

There are plans to add support for SharePoint 2007 and SharePoint 2010 in the near future.

Processes

The version is primary tested against MSF for Agile for Team Foundation Server 2010.

Help wanted!

Are you interested in contributing to the project? We appreciate any help we can get. We are especially looking for help with UX work and help with building an SharePoint provider.

Progress and information

Progress reports are posted at Håkan Forss blog under the Visual WIP tag

You can also follow Visual WIP at twitter @VisualWIP

Updated Wiki: Visualization customization Examples

HakanForss — Thu, 15 Sep 2011 22:02:52 GMT

Custom Work Item design

As of Changeset 13259 you can add work item type and size specific designs. You do this by creating new DataTemplates in WorkItemResources.xaml with a resource key following this pattern
work item type namn_size_WorkItemView
Example: User Story_Medium_WorkItemView

You can make changes to the visualization based any work item field by modifying the WorkItemResources.xaml. The default work item templates are:

DefaultType_Large_WorkItemView
DefaultType_Medium_WorkItemView
DefaultType_Small_WorkItemView

Here is an example of the DefaultType_Small_WorkItemView

    <!-- This is the design for the small default type work item. This will be used if no data template for the requested work item is found. -->
    <DataTemplate x:Key="DefaultType_Small_WorkItemView">
        <Border BorderThickness="2" Width="100" Height="40" vm:MouseBehavior.DoubleClick="{Binding OpenCommand}" Style="{DynamicResource WorkItemChangedBorderStyle}">
            <Border.BitmapEffect>
                <DropShadowBitmapEffect Color="Black" Direction="320" ShadowDepth="5" Opacity=".5" Softness="9" />
            </Border.BitmapEffect>

            <Grid x:Name="WorkItem" Style="{DynamicResource WorkItemTypeStyle}">
                <Grid.RenderTransform>
                    <RotateTransform Angle="1" />
                </Grid.RenderTransform>
                <WrapPanel x:Name="contentPanel" HorizontalAlignment="Stretch" Margin="5,0,5,0" Grid.Row="3" VerticalAlignment="Stretch">
                    <TextBlock x:Name="heading" Text="{Binding Id}" FontSize="18" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
                </WrapPanel>
            </Grid>
        </Border>
    </DataTemplate>

And this is an example of the NoWorkItem_Large_WorkItemView that will be shown for every empty slot

    <!-- This is the design for the large no work item type. This will be shown in slots with no work item -->
    <DataTemplate x:Key="NoWorkItem_Large_WorkItemView">
        <Border Width="230" Height="150">
            <TextBlock Text="Empty" HorizontalAlignment="Center" VerticalAlignment="Center" TextAlignment="Center" FontSize="24" FontWeight="Bold" Foreground="#19ADD8E6" />
        </Border>
    </DataTemplate>

Change background based on field

Making changes to the color of the cards based on a fields different than TypeName is not that hard if you know xaml. Here is an example where I use the field Iteration Path to set the background color to pink when the value is MSFAgilePlayground\Urgent. See the last DataTrigger below.

<!-- This style sets the background color for work item based on the work item type -->
    <Style x:Key="WorkItemTypeStyle" TargetType="{x:Type Grid}">
        <Setter Property="Background" Value="Yellow" />

        <Style.Triggers>
            <DataTrigger Binding="{Binding TypeName}" Value="NoWorkItem">
                <Setter Property="Background" Value="Transparent" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="ErrorWorkItem">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>

            <DataTrigger Binding="{Binding TypeName}" Value="User Story">
                <Setter Property="Background" Value="Yellow" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Product Backlog Item">
                <Setter Property="Background" Value="Yellow" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Change Request">
                <Setter Property="Background" Value="Yellow" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Requirement">
                <Setter Property="Background" Value="LightGreen" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Issue">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Impediment">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Risk">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Bug">
                <Setter Property="Background" Value="Orange" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Task">
                <Setter Property="Background" Value="LightBlue" />
            </DataTrigger>

            <DataTrigger Binding="{Binding 'Iteration Path'}" Value="MSFAgilePlayground\Urgent">
                <Setter Property="Background" Value="Pink" />
            </DataTrigger>

        </Style.Triggers>
    </Style>

Updated Wiki: Visualization customization Examples

HakanForss — Thu, 15 Sep 2011 22:01:44 GMT

Custom Work Item design

DefaultType_Large_WorkItemView
DefaultType_Medium_WorkItemView
DefaultType_Small_WorkItemView

Here is an example of the DefaultTypeSmallWorkItemView

    <!-- This is the design for the small default type work item. This will be used if no data template for the requested work item is found. -->
    <DataTemplate x:Key="DefaultType_Small_WorkItemView">
        <Border BorderThickness="2" Width="100" Height="40" vm:MouseBehavior.DoubleClick="{Binding OpenCommand}" Style="{DynamicResource WorkItemChangedBorderStyle}">
            <Border.BitmapEffect>
                <DropShadowBitmapEffect Color="Black" Direction="320" ShadowDepth="5" Opacity=".5" Softness="9" />
            </Border.BitmapEffect>

            <Grid x:Name="WorkItem" Style="{DynamicResource WorkItemTypeStyle}">
                <Grid.RenderTransform>
                    <RotateTransform Angle="1" />
                </Grid.RenderTransform>
                <WrapPanel x:Name="contentPanel" HorizontalAlignment="Stretch" Margin="5,0,5,0" Grid.Row="3" VerticalAlignment="Stretch">
                    <TextBlock x:Name="heading" Text="{Binding Id}" FontSize="18" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
                </WrapPanel>
            </Grid>
        </Border>
    </DataTemplate>

And this is an example of the NoWorkItemLargeWorkItemView that will be shown for every empty slot

    <!-- This is the design for the large no work item type. This will be shown in slots with no work item -->
    <DataTemplate x:Key="NoWorkItem_Large_WorkItemView">
        <Border Width="230" Height="150">
            <TextBlock Text="Empty" HorizontalAlignment="Center" VerticalAlignment="Center" TextAlignment="Center" FontSize="24" FontWeight="Bold" Foreground="#19ADD8E6" />
        </Border>
    </DataTemplate>

Change background based on field

<!-- This style sets the background color for work item based on the work item type -->
    <Style x:Key="WorkItemTypeStyle" TargetType="{x:Type Grid}">
        <Setter Property="Background" Value="Yellow" />

        <Style.Triggers>
            <DataTrigger Binding="{Binding TypeName}" Value="NoWorkItem">
                <Setter Property="Background" Value="Transparent" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="ErrorWorkItem">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>

            <DataTrigger Binding="{Binding TypeName}" Value="User Story">
                <Setter Property="Background" Value="Yellow" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Product Backlog Item">
                <Setter Property="Background" Value="Yellow" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Change Request">
                <Setter Property="Background" Value="Yellow" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Requirement">
                <Setter Property="Background" Value="LightGreen" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Issue">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Impediment">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Risk">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Bug">
                <Setter Property="Background" Value="Orange" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Task">
                <Setter Property="Background" Value="LightBlue" />
            </DataTrigger>

            <DataTrigger Binding="{Binding 'Iteration Path'}" Value="MSFAgilePlayground\Urgent">
                <Setter Property="Background" Value="Pink" />
            </DataTrigger>

        </Style.Triggers>
    </Style>

Updated Wiki: Visualization customization Examples

HakanForss — Thu, 15 Sep 2011 22:00:23 GMT

Custom Work Item design

As of Changeset 13259 you can add work item type and size specific designs. You do this by creating new DataTemplates in WorkItemResources.xaml with a resource key following this pattern
work item type namn_size_WorkItemView
Example: User StoryMediumWorkItemView

You can make changes to the visualization based any work item field by modifying the WorkItemResources.xaml. The default work item templates are:

DefaultTypeLargeWorkItemView
DefaultTypeMediumWorkItemView
DefaultTypeSmallWorkItemView

Here is an example of the DefaultTypeSmallWorkItemView

    <!-- This is the design for the small default type work item. This will be used if no data template for the requested work item is found. -->
    <DataTemplate x:Key="DefaultType_Small_WorkItemView">
        <Border BorderThickness="2" Width="100" Height="40" vm:MouseBehavior.DoubleClick="{Binding OpenCommand}" Style="{DynamicResource WorkItemChangedBorderStyle}">
            <Border.BitmapEffect>
                <DropShadowBitmapEffect Color="Black" Direction="320" ShadowDepth="5" Opacity=".5" Softness="9" />
            </Border.BitmapEffect>

            <Grid x:Name="WorkItem" Style="{DynamicResource WorkItemTypeStyle}">
                <Grid.RenderTransform>
                    <RotateTransform Angle="1" />
                </Grid.RenderTransform>
                <WrapPanel x:Name="contentPanel" HorizontalAlignment="Stretch" Margin="5,0,5,0" Grid.Row="3" VerticalAlignment="Stretch">
                    <TextBlock x:Name="heading" Text="{Binding Id}" FontSize="18" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
                </WrapPanel>
            </Grid>
        </Border>
    </DataTemplate>

And this is an example of the NoWorkItemLargeWorkItemView that will be shown for every empty slot

    <!-- This is the design for the large no work item type. This will be shown in slots with no work item -->
    <DataTemplate x:Key="NoWorkItem_Large_WorkItemView">
        <Border Width="230" Height="150">
            <TextBlock Text="Empty" HorizontalAlignment="Center" VerticalAlignment="Center" TextAlignment="Center" FontSize="24" FontWeight="Bold" Foreground="#19ADD8E6" />
        </Border>
    </DataTemplate>

Change background based on field

<!-- This style sets the background color for work item based on the work item type -->
    <Style x:Key="WorkItemTypeStyle" TargetType="{x:Type Grid}">
        <Setter Property="Background" Value="Yellow" />

        <Style.Triggers>
            <DataTrigger Binding="{Binding TypeName}" Value="NoWorkItem">
                <Setter Property="Background" Value="Transparent" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="ErrorWorkItem">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>

            <DataTrigger Binding="{Binding TypeName}" Value="User Story">
                <Setter Property="Background" Value="Yellow" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Product Backlog Item">
                <Setter Property="Background" Value="Yellow" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Change Request">
                <Setter Property="Background" Value="Yellow" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Requirement">
                <Setter Property="Background" Value="LightGreen" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Issue">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Impediment">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Risk">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Bug">
                <Setter Property="Background" Value="Orange" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Task">
                <Setter Property="Background" Value="LightBlue" />
            </DataTrigger>

            <DataTrigger Binding="{Binding 'Iteration Path'}" Value="MSFAgilePlayground\Urgent">
                <Setter Property="Background" Value="Pink" />
            </DataTrigger>

        </Style.Triggers>
    </Style>

Updated Wiki: Visualization customization Examples

HakanForss — Thu, 15 Sep 2011 21:55:42 GMT

Custom Work Item design

As of Changeset 13259 you can add work item type and size specific designs. You do this by creating new DataTemplates in WorkItemResources.xaml with a resource key following this pattern
work item type namn_size_WorkItemView
Example: User StoryMediumWorkItemView

You can make changes to the visualization based any work item field by modifying the WorkItemResources.xaml. The default work item templates are:

DefaultTypeLargeWorkItemView
DefaultTypeMediumWorkItemView
DefaultTypeSmallWorkItemView

Change background based on field

<!-- This style sets the background color for work item based on the work item type -->
    <Style x:Key="WorkItemTypeStyle" TargetType="{x:Type Grid}">
        <Setter Property="Background" Value="Yellow" />

        <Style.Triggers>
            <DataTrigger Binding="{Binding TypeName}" Value="NoWorkItem">
                <Setter Property="Background" Value="Transparent" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="ErrorWorkItem">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>

            <DataTrigger Binding="{Binding TypeName}" Value="User Story">
                <Setter Property="Background" Value="Yellow" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Product Backlog Item">
                <Setter Property="Background" Value="Yellow" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Change Request">
                <Setter Property="Background" Value="Yellow" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Requirement">
                <Setter Property="Background" Value="LightGreen" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Issue">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Impediment">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Risk">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Bug">
                <Setter Property="Background" Value="Orange" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Task">
                <Setter Property="Background" Value="LightBlue" />
            </DataTrigger>

            <DataTrigger Binding="{Binding 'Iteration Path'}" Value="MSFAgilePlayground\Urgent">
                <Setter Property="Background" Value="Pink" />
            </DataTrigger>

        </Style.Triggers>
    </Style>

Updated Wiki: Visualization customization Examples

HakanForss — Thu, 15 Sep 2011 21:54:58 GMT

Custom Work Item design

As of Changeset 13259 you can add work item type and size specific designs. You do this by creating new DataTemplates in WorkItemResources.xaml with a resource key following this pattern work item type namnsizeWorkItemView
Example: User StoryMediumWorkItemView

You can make changes to the visualization based any work item field by modifying the WorkItemResources.xaml. The default work item templates are:

DefaultTypeLargeWorkItemView
DefaultTypeMediumWorkItemView
DefaultTypeSmallWorkItemView

Change background based on field

<!-- This style sets the background color for work item based on the work item type -->
    <Style x:Key="WorkItemTypeStyle" TargetType="{x:Type Grid}">
        <Setter Property="Background" Value="Yellow" />

        <Style.Triggers>
            <DataTrigger Binding="{Binding TypeName}" Value="NoWorkItem">
                <Setter Property="Background" Value="Transparent" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="ErrorWorkItem">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>

            <DataTrigger Binding="{Binding TypeName}" Value="User Story">
                <Setter Property="Background" Value="Yellow" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Product Backlog Item">
                <Setter Property="Background" Value="Yellow" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Change Request">
                <Setter Property="Background" Value="Yellow" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Requirement">
                <Setter Property="Background" Value="LightGreen" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Issue">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Impediment">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Risk">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Bug">
                <Setter Property="Background" Value="Orange" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Task">
                <Setter Property="Background" Value="LightBlue" />
            </DataTrigger>

            <DataTrigger Binding="{Binding 'Iteration Path'}" Value="MSFAgilePlayground\Urgent">
                <Setter Property="Background" Value="Pink" />
            </DataTrigger>

        </Style.Triggers>
    </Style>

Updated Wiki: Visualization customization Examples

HakanForss — Thu, 15 Sep 2011 21:53:29 GMT

Custom Work Item design

As of Changeset 13259 you can add work item type and size specific designs. You do this by creating new DataTemplates in WorkItemResources.xaml with a resource key following this pattern work item type namnsizeWorkItemView. Example: User StoryMediumWorkItemView

You can make changes to the visualization based any work item field by modifying the WorkItemResources.xaml. The default work item templates are:

DefaultTypeLargeWorkItemView
DefaultTypeMediumWorkItemView
DefaultTypeSmallWorkItemView

Change background based on field

<!-- This style sets the background color for work item based on the work item type -->
    <Style x:Key="WorkItemTypeStyle" TargetType="{x:Type Grid}">
        <Setter Property="Background" Value="Yellow" />

        <Style.Triggers>
            <DataTrigger Binding="{Binding TypeName}" Value="NoWorkItem">
                <Setter Property="Background" Value="Transparent" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="ErrorWorkItem">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>

            <DataTrigger Binding="{Binding TypeName}" Value="User Story">
                <Setter Property="Background" Value="Yellow" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Product Backlog Item">
                <Setter Property="Background" Value="Yellow" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Change Request">
                <Setter Property="Background" Value="Yellow" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Requirement">
                <Setter Property="Background" Value="LightGreen" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Issue">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Impediment">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Risk">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Bug">
                <Setter Property="Background" Value="Orange" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Task">
                <Setter Property="Background" Value="LightBlue" />
            </DataTrigger>

            <DataTrigger Binding="{Binding 'Iteration Path'}" Value="MSFAgilePlayground\Urgent">
                <Setter Property="Background" Value="Pink" />
            </DataTrigger>

        </Style.Triggers>
    </Style>

Updated Wiki: Visualization customization Examples

HakanForss — Thu, 15 Sep 2011 21:53:12 GMT

Custom Work Item design

As of Changeset 13259 you can add work item type and size specific designs. You do this by creating new DataTemplates in WorkItemResources.xaml with a resource key following this pattern work item type namnsizeWorkItemView. Example: User StoryMediumWorkItemView

You can make changes to the visualization based any work item field by modifying the WorkItemResources.xaml. The default work item templates are:

DefaultTypeLargeWorkItemView
DefaultTypeMediumWorkItemView
DefaultTypeSmallWorkItemView

SimpleExample

Change background based on field

<!-- This style sets the background color for work item based on the work item type -->
    <Style x:Key="WorkItemTypeStyle" TargetType="{x:Type Grid}">
        <Setter Property="Background" Value="Yellow" />

        <Style.Triggers>
            <DataTrigger Binding="{Binding TypeName}" Value="NoWorkItem">
                <Setter Property="Background" Value="Transparent" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="ErrorWorkItem">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>

            <DataTrigger Binding="{Binding TypeName}" Value="User Story">
                <Setter Property="Background" Value="Yellow" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Product Backlog Item">
                <Setter Property="Background" Value="Yellow" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Change Request">
                <Setter Property="Background" Value="Yellow" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Requirement">
                <Setter Property="Background" Value="LightGreen" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Issue">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Impediment">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Risk">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Bug">
                <Setter Property="Background" Value="Orange" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Task">
                <Setter Property="Background" Value="LightBlue" />
            </DataTrigger>

            <DataTrigger Binding="{Binding 'Iteration Path'}" Value="MSFAgilePlayground\Urgent">
                <Setter Property="Background" Value="Pink" />
            </DataTrigger>

        </Style.Triggers>
    </Style>

Updated Wiki: Visualization customization Examples

HakanForss — Thu, 15 Sep 2011 21:51:51 GMT

Custom Work Item design

As of Changeset 13259 you can add work item type and size specific designs. You do this by creating new DataTemplates in WorkItemResources.xaml with a resource key following this pattern work item type namnsizeWorkItemView. Example: User StoryMediumWorkItemView

You can make changes to the visualization based any work item field by modifying the WorkItemResources.xaml. The default work item templates are:

DefaultTypeLargeWorkItemView
DefaultTypeMediumWorkItemView
DefaultTypeSmallWorkItemView

SimpleExample

Change background based on field

<!-- This style sets the background color for work item based on the work item type -->
    <Style x:Key="WorkItemTypeStyle" TargetType="{x:Type Grid}">
        <Setter Property="Background" Value="Yellow" />

        <Style.Triggers>
            <DataTrigger Binding="{Binding TypeName}" Value="NoWorkItem">
                <Setter Property="Background" Value="Transparent" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="ErrorWorkItem">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>

            <DataTrigger Binding="{Binding TypeName}" Value="User Story">
                <Setter Property="Background" Value="Yellow" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Product Backlog Item">
                <Setter Property="Background" Value="Yellow" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Change Request">
                <Setter Property="Background" Value="Yellow" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Requirement">
                <Setter Property="Background" Value="LightGreen" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Issue">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Impediment">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Risk">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Bug">
                <Setter Property="Background" Value="Orange" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Task">
                <Setter Property="Background" Value="LightBlue" />
            </DataTrigger>

            <DataTrigger Binding="{Binding 'Iteration Path'}" Value="MSFAgilePlayground\Urgent">
                <Setter Property="Background" Value="Pink" />
            </DataTrigger>

        </Style.Triggers>
    </Style>

Updated Wiki: Visualization customization Examples

HakanForss — Thu, 15 Sep 2011 21:45:46 GMT

<!-- This style sets the background color for work item based on the work item type -->
    <Style x:Key="WorkItemTypeStyle" TargetType="{x:Type Grid}">
        <Setter Property="Background" Value="Yellow" />

        <Style.Triggers>
            <DataTrigger Binding="{Binding TypeName}" Value="NoWorkItem">
                <Setter Property="Background" Value="Transparent" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="ErrorWorkItem">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>

            <DataTrigger Binding="{Binding TypeName}" Value="User Story">
                <Setter Property="Background" Value="Yellow" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Product Backlog Item">
                <Setter Property="Background" Value="Yellow" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Change Request">
                <Setter Property="Background" Value="Yellow" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Requirement">
                <Setter Property="Background" Value="LightGreen" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Issue">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Impediment">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Risk">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Bug">
                <Setter Property="Background" Value="Orange" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Task">
                <Setter Property="Background" Value="LightBlue" />
            </DataTrigger>

            <DataTrigger Binding="{Binding 'Iteration Path'}" Value="MSFAgilePlayground\Urgent">
                <Setter Property="Background" Value="Pink" />
            </DataTrigger>

        </Style.Triggers>
    </Style>

Updated Wiki: Documentation

HakanForss — Thu, 15 Sep 2011 21:44:55 GMT

How to get started with Visual WIP.

Downloading and extracting Visual WIP from http://visualwip.codeplex.com
Starting the application
Creating a query folder and a team query for our board
Adding a Single Column to the board

Launch in another window

Setting up a board

Adding 2*2 Dual columns that share the work-in-progress limit
Adding new window for second monitor
Adding 2 Single columns with different work item sizes
Activate Design Mode, resizing andreposition columns
Adding Rich text column

Launch in another window

Visualization customization

MainResources.xaml – contains design elements related to shell and common design elements
WorkItemResources.xaml – contains design elements related to work items
Tfs2010WorkItemWorkProvider.xaml – contains TFS specific design elements

See an example

Updated Wiki: Documentation

HakanForss — Thu, 15 Sep 2011 21:43:37 GMT

How to get started with Visual WIP.

Downloading and extracting Visual WIP from http://visualwip.codeplex.com
Starting the application
Creating a query folder and a team query for our board
Adding a Single Column to the board

Launch in another window

Setting up a board

Adding 2*2 Dual columns that share the work-in-progress limit
Adding new window for second monitor
Adding 2 Single columns with different work item sizes
Activate Design Mode, resizing andreposition columns
Adding Rich text column

Launch in another window

Visualization customization

MainResources.xaml – contains design elements related to shell and common design elements
WorkItemResources.xaml – contains design elements related to work items
Tfs2010WorkItemWorkProvider.xaml – contains TFS specific design elements

See an example

Updated Wiki: Visualization customization Examples

HakanForss — Thu, 15 Sep 2011 21:42:45 GMT

<!-- This style sets the background color for work item based on the work item type -->
    <Style x:Key="WorkItemTypeStyle" TargetType="{x:Type Grid}">
        <Setter Property="Background" Value="Yellow" />

        <Style.Triggers>
            <DataTrigger Binding="{Binding TypeName}" Value="NoWorkItem">
                <Setter Property="Background" Value="Transparent" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="ErrorWorkItem">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>

            <DataTrigger Binding="{Binding TypeName}" Value="User Story">
                <Setter Property="Background" Value="Yellow" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Product Backlog Item">
                <Setter Property="Background" Value="Yellow" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Change Request">
                <Setter Property="Background" Value="Yellow" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Requirement">
                <Setter Property="Background" Value="LightGreen" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Issue">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Impediment">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Risk">
                <Setter Property="Background" Value="Red" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Bug">
                <Setter Property="Background" Value="Orange" />
            </DataTrigger>
            <DataTrigger Binding="{Binding TypeName}" Value="Task">
                <Setter Property="Background" Value="LightBlue" />
            </DataTrigger>

            <DataTrigger Binding="{Binding 'Iteration Path'}" Value="MSFAgilePlayground\Urgent">
                <Setter Property="Background" Value="Pink" />
            </DataTrigger>

        </Style.Triggers>
    </Style>