WPF树数据模板取决于项的类型

Question

我有一个MVVM WPF应用程序，其中包含一个包含自引用数据的树，此数据通过分层转换器绑定到树。 （如例：http://www.telerik.com/help/wpf/radtreeview-how-to-bind-to-self-referencing-data.html）

此数据包括ID，ParentID，文本和类型（以及更多）。

示例数据：

1,0,"FirstItem","Triangle"
2,1,"SubItem1","Circle"
3,1,"SubItem2","Square"
4,2,"SubItem11","Triangle"
5,2,"SubItem12","Heart"
6,3,"SubItem21","Circle"

现在我想为三角形，心形，圆形和正方形设置不同的模板。 我不是说只改变一个图像，而是一个模板。 我怎么能做到这一点？

亲切的问候，保罗。

Answer 1

如果您的ItemsSource由不同的类型组成，那么您只需创建HierarchicalDataTemplates而不是指定x：Key。如果DataTemplate没有x：Key属性，框架将在遇到该类型时使用此DataTemplate并尝试以可视方式显示它（您可以阅读有关隐式DataTemplates的更多信息here）。例如，如果您有一个Circle类型和另一个Square类型，那么您的资源中将包含以下模板：

<Window.Resources>
    <HierarchicalDataTemplate DataType="{x:Type local:Circle}" ItemsSource="{Binding Children}">
        <Ellipse Fill="{Binding Fill}" Width="25" Height="25" Stroke="Black" StrokeThickness="0.25"/>
    </HierarchicalDataTemplate>
    <HierarchicalDataTemplate DataType="{x:Type local:Square}" ItemsSource="{Binding Children}">
        <Rectangle Fill="{Binding Fill}" Width="25" Height="25" Stroke="Black" StrokeThickness="0.25"/>
    </HierarchicalDataTemplate>
</Window.Resources>

然后，如果您的TreeView在其ItemsSource中遇到其中一种类型，则会使用HierarchicalDataTemplate作为该特定类型。

您可以详细了解HierarchicalDataTemplates here，this link举例说明如何在TreeView中使用它们。

或

如果您的商品属于同一类型，并且仅按属性（例如类型）区分，则您需要使用DataTemplateSelector。这是一个简单的例子：

代码隐藏：

public class ShapeTemplateSelector : DataTemplateSelector
{
    public DataTemplate CircleTemplate { get; set; }
    public DataTemplate SquareTemplate { get; set; }
    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        Shape shape = item as Shape;
        if (shape != null)
        {
            if (shape.Type == "Circle")
                return this.CircleTemplate;
            else if (shape.Type == "Square")
                return this.SquareTemplate;
            }
            return null;
        }
}

和XAML：

<local:ShapeTemplateSelector x:Key="shapeSelector">
    <local:ShapeTemplateSelector.CircleTemplate>
        <HierarchicalDataTemplate DataType="{x:Type local:Shape}" ItemsSource="{Binding Children}">
            <Ellipse Fill="{Binding Fill}" Width="25" Height="25" Stroke="Black" StrokeThickness="0.25"/>
        </HierarchicalDataTemplate>
    </local:ShapeTemplateSelector.CircleTemplate>
    <local:ShapeTemplateSelector.SquareTemplate>
        <HierarchicalDataTemplate DataType="{x:Type local:Shape}" ItemsSource="{Binding Children}">
            <Rectangle Fill="{Binding Fill}" Width="25" Height="25" Stroke="Black" StrokeThickness="0.25"/>
        </HierarchicalDataTemplate>
    </local:ShapeTemplateSelector.SquareTemplate>
</local:ShapeTemplateSelector>

然后在TreeView中，您只需指定选择器

<TreeView x:Name="Tree" ItemsSource="{Binding Shapes}" ItemTemplateSelector="{DynamicResource shapeSelector}"/>

Answer 2

如果您有实际的不同类型，可以使用DataType属性（How do I use the DataType property on a WPF DataTemplate?）在HierarchicalDataTemplate中指定类型，WPF将根据类选择模板。

如果您没有不同的类型，但取决于类中的属性或值，则需要指定DataTemplateSelector（http://tech.pro/tutorial/807/wpf-tutorial-how-to-use-a-datatemplateselector）