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

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>

Last edited Sep 15, 2011 at 9:51 PM by HakanForss, version 3

Comments

No comments yet.