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>

Last edited Sep 15, 2011 at 10:02 PM by HakanForss, version 10

Comments

No comments yet.