如何根据视图模型中的属性呈现不同的路径形状

Question

我有一个视图模型，它公开了一个活动类型的可观察集合。每个活动都有一个名为"活动类型"的属性。

在我的视图中，我有一个项目控件，其中的项目面板模板是一个画布。我将 ItemsControl 的 itemsource 属性绑定到视图中的可观察集合。可观察集合中的每个活动都必须在视图中呈现为 wpf 路径对象，该对象根据可观察集合中每个活动的 ActivityType 属性看起来不同。

如果我在视图的资源部分中为要显示的每个路径定义一组样式，如何根据每个活动的 ActivityType 属性在画布上创建不同的 Path 对象？

我是否在 DataTemplate 中使用了 DataTraiggers？

视图的 XAML 如下所示： 深蓝色

    <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

另一种选择是将ItemsControl.ItemTemplateSelector与您自己的DataTemplateSelector类一起使用 - 有关详细信息，请参阅 http://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol.itemtemplateselector.aspx 和 http://msdn.microsoft.com/en-us/library/system.windows.controls.datatemplateselector.aspx。

然后，您将为显示的每个不同路径设置一个单独的DataTemplate。