简单的嵌套树视图的XAML结构？ [英] Simple Nested TreeView Xaml structure?

问题描述

我想建立一个WPF TreeView控件三层。 CountryReportTitle 是一个字符串属性和 ArticleCategoryTitlesList 是一个集合，从我的视图模型。没有定义的类层次结构。这就是我要找的结构：

I am trying to build a WPF TreeView with three layers. CountryReportTitle is a string property and ArticleCategoryTitlesList is a collection, both exposed from my ViewModel. There is no class hierarchy defined. This is the structure I'm looking for:

这是我尝试的XAML，但我在运行时得到一个例外，在XAML：

This is my attempted Xaml but I'm getting an exception in the Xaml at runtime:

{"Item has already been added. Key in dictionary: 'DataTemplateKey(ISESApp.ViewModels.ReportViewModel)'  Key being added: 'DataTemplateKey(ISESApp.ViewModels.ReportViewModel)'"}

XAML中：

       <TreeView ItemsSource="{Binding CountryReportTitle}">
                    <TreeView ItemsSource="{Binding CountryReportTitle}">
                        <TreeView.Resources>
                            <HierarchicalDataTemplate  DataType="{x:Type local:ReportViewModel}"
                                ItemsSource="{Binding ArticleCategoryTitlesList}">
                                <TextBlock Text="{Binding CategoryTitle}" />
                            </HierarchicalDataTemplate>
                            <HierarchicalDataTemplate  DataType="{x:Type local:ReportViewModel}"
                                ItemsSource="{Binding ArticleCatagoryTypesList}">
                                <TextBlock Text="{Binding ArticleTitle}" />
                            </HierarchicalDataTemplate>
                            <DataTemplate  DataType="{x:Type local:ReportViewModel}">
                                <TextBlock Text="{Binding ArticleTitle}" />
                            </DataTemplate>
                        </TreeView.Resources>
                    </TreeView>
                </TreeView>

本机：是一个命名空间，以我的视图模型：

Local: is a namespace to my ViewModel:

xmlns:local="clr-namespace:MyApp.ViewModels"

我是什么做错了，究竟是什么这个问题？

What am I doing wrong, what is the best approach for this problem?

推荐答案

下面是我去到示例树视图。

Here's my go-to example for treeviews.

使用 HierarchicalDataTemplate 在树中的元素。请注意，有三层，每层是其自己的类型。这是为了方便，但你可以定义一个类型和使用一个模板或你的树类型的任意组合。在树中有不同类型的再present不同的东西让使用模板极为方便。

Use a HierarchicalDataTemplate for elements in the tree. Note that there are three layers, and each layer is its own type. This is for convenience, but you could define one type and use one template or any mix of types for your tree. Having different types represent different things in the tree makes using templates extremely convenient.

数据类

public class ViewModel
{
    public ObservableCollection<ItemA> ItemsA { get; set; }
    public ViewModel()
    {
        ItemsA = new ObservableCollection<ItemA>(new[]{
            new ItemA{Name = "A one"},
            new ItemA{Name = "A Two"},
            new ItemA{Name = "A Three"},
        });
    }
}

public class ItemA
{
    public ObservableCollection<ItemB> ItemsB { get; set; }
    public string Name { get; set; }
    public ItemA()
    {
        ItemsB = new ObservableCollection<ItemB>(new[]{
            new ItemB{Name = "B one"},
            new ItemB{Name = "B Two"},
            new ItemB{Name = "B Three"},
        });
    }
}
public class ItemB
{
    public ObservableCollection<ItemC> ItemsC { get; set; }
    public string Name { get; set; }
    public ItemB()
    {
        ItemsC = new ObservableCollection<ItemC>(new[]{
            new ItemC{Name = "C one"},
            new ItemC{Name = "C Two"},
            new ItemC{Name = "C Three"},
        });
    }
}
public class ItemC
{
    public string Name { get; set; }
}

和用户界面

 <TreeView ItemsSource="{Binding ItemsA}">
            <TreeView ItemsSource="{Binding ItemsA}">
    <TreeView.Resources>
        <HierarchicalDataTemplate  DataType="{x:Type t:ItemA}"
                                    ItemsSource="{Binding ItemsB}">
            <TextBlock Text="{Binding Name}" />
        </HierarchicalDataTemplate>
        <HierarchicalDataTemplate  DataType="{x:Type t:ItemB}"
                                    ItemsSource="{Binding ItemsC}">
            <TextBlock Text="{Binding Name}" />
        </HierarchicalDataTemplate>
        <DataTemplate  DataType="{x:Type t:ItemC}">
            <TextBlock Text="{Binding Name}" />
        </DataTemplate>
    </TreeView.Resources>
</TreeView>

给你一个简单的树状

gives you a simple treeview

这篇关于简单的嵌套树视图的XAML结构？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！