How to render different path shapes based on property in viewmodel

Question

I have a viewmodel that exposes an observablecollection of type Activity. Each Activity has a property named ActivityType.

In my View I have an ItemsControl of which the ItemsPanelTemplate is a Canvas. I bind the ItemsControl's itemsource property to the observablecollection in the view. Each Activity in the observablecollection must be rendered in the view as a wpf path object that looks different based on the ActivityType property of each Activity in the observablecollection.

If I define a set of styles in my View's resources section for each path I want to display, how do I create a different Path object on the canvas based on the ActivityType property on each Activity?

Do I used DataTraiggers in a DataTemplate?

The XAML for the view is as follows: DarkBlue

    <LinearGradientBrush x:Key="ItemBrush" StartPoint="0,0" EndPoint="0,1">
        <LinearGradientBrush.GradientStops>
            <GradientStop Color="#FAFBE9" Offset="0" />
            <GradientStop Color="Blue" Offset="1" />
        </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>

    <Style x:Key="FlowChartItemStyle" TargetType="Path">
        <Setter Property="Fill" Value="{StaticResource ItemBrush}"/>
        <Setter Property="Stroke" Value="{StaticResource ItemStroke}"/>
        <Setter Property="StrokeThickness" Value="1"/>
        <Setter Property="StrokeLineJoin" Value="Round"/>
        <Setter Property="Stretch" Value="Fill"/>
        <Setter Property="IsHitTestVisible" Value="False"/>
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="Height" Value="50"/>
        <Setter Property="Width" Value="50"/>
    </Style>

    <!-- Process -->
    <Style x:Key="Process" TargetType="Path" BasedOn="{StaticResource FlowChartItemStyle}">
        <Setter Property="Data" Value="M 0,0 H 60 V40 H 0 Z"/>
    </Style>

    <Style x:Key="Process_DragThumb" TargetType="Path" BasedOn="{StaticResource Process}">
        <Setter Property="Height" Value="30"/>
        <Setter Property="Width" Value="30"/>
        <Setter Property="Margin" Value="5,5,5,5"/>
    </Style>

    <!-- Decision -->
    <Style x:Key="Decision" TargetType="Path" BasedOn="{StaticResource FlowChartItemStyle}">
        <Setter Property="Data" Value="M 0,20 L 30 0 L 60,20 L 30,40 Z"/>
    </Style>

    <Style x:Key="Decision_DragThumb" TargetType="Path" BasedOn="{StaticResource Decision}">
        <Setter Property="Height" Value="30"/>
        <Setter Property="Width" Value="30"/>
        <Setter Property="Margin" Value="5,5,5,5"/>
        <Setter Property="ToolTip" Value="Decision"/>
    </Style>

    <!-- Start -->
    <Style x:Key="Start" TargetType="Path" BasedOn="{StaticResource FlowChartItemStyle}">
        <Setter Property="Data" Value="M 10,20 A 20,20 0 1 1 50,20 A 20,20 0 1 1 10,20"/>
    </Style>

    <Style x:Key="Start_DragThumb" TargetType="Path" BasedOn="{StaticResource Start}">
        <Setter Property="Height" Value="30"/>
        <Setter Property="Width" Value="30"/>
        <Setter Property="Margin" Value="5,5,5,5"/>
    </Style>

    <!-- Terminator -->
    <Style x:Key="Terminator" TargetType="Path" BasedOn="{StaticResource FlowChartItemStyle}">
        <Setter Property="Data" Value="M 20,40 A 20,20 0 0 1 20,0 H 40 A 20,20 0 0 1 40,40 Z"/>
    </Style>

    <Style x:Key="Terminator_DragThumb" TargetType="Path" BasedOn="{StaticResource Terminator}">
        <Setter Property="Height" Value="30"/>
        <Setter Property="Width" Value="30"/>
        <Setter Property="Margin" Value="5,5,5,5"/>
    </Style>        
</Window.Resources>
<Grid>
    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
        <ItemsControl ItemsSource="{Binding CanvasActivities}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemContainerStyle>
                <Style>
                    <Setter Property="Canvas.Top" Value="{Binding Path=Top}"/>
                    <Setter Property="Canvas.Left" Value="{Binding Path=Left}"/>
                </Style>
            </ItemsControl.ItemContainerStyle>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <DataTemplate.Triggers>
                        <DataTrigger Value="0" Binding="{Binding Path=ActivityType}">

                        </DataTrigger>
                        <DataTrigger Value="1" Binding="{Binding Path=ActivityType}">

                        </DataTrigger>
                        <DataTrigger Value="2" Binding="{Binding Path=ActivityType}">

                        </DataTrigger>
                        <DataTrigger Value="3" Binding="{Binding Path=ActivityType}">

                        </DataTrigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>
</Grid>

Answer 1

Another alternative is to use ItemsControl.ItemTemplateSelector with your own DataTemplateSelector class - see http://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol.itemtemplateselector.aspx and http://msdn.microsoft.com/en-us/library/system.windows.controls.datatemplateselector.aspx for more information.

Then you'd have a seperate DataTemplate for each different path you are showing.