C# TreeView、HierarchicalDataTemplate 和递归数据

TreeView, HierarchicalDataTemplate and recursive Data

提问by Mare Infinitus

For my treeview I have two different classes that provide the ItemsSource.

对于我的树视图，我有两个不同的类提供 ItemsSource。

public class TreeViewModel : ViewModelBase
{
    public ObservableCollection<NodeViewModel> Items { get; set; }
}

public class NodeViewModel : ViewModelBase
{
    public string Id { get; set; }
    public string Name { get; set; }
    public ObservableCollection<NodeViewModel> Children { get; set; }
}

Now I want my TreeView to display the Items in TreeViewModel and show hierarchical data as provided by the NodeViewModel.

现在我希望我的 TreeView 显示 TreeViewModel 中的项目并显示 NodeViewModel 提供的分层数据。

Here is my XAML

这是我的 XAML

<Window x:Class="TreeViewMasterDetails.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:TreeViewMasterDetails" 
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <TreeView Height="Auto" 
                  HorizontalAlignment="Stretch" 
                  Margin="10" 
                  VerticalAlignment="Stretch" 
                  Width="Auto">
            <TreeView.Resources>
                <HierarchicalDataTemplate DataType="x:Type local:TreeViewModel" ItemsSource="{Binding Items}">
                    <TextBlock Text="{Binding Path=Name}"></TextBlock>
                </HierarchicalDataTemplate>
                <HierarchicalDataTemplate DataType="x:Type local:NodeViewModel" ItemsSource="{Binding Children}">
                    <TextBlock Text="{Binding Name}"></TextBlock>
                </HierarchicalDataTemplate>
            </TreeView.Resources>
        </TreeView>
    </Grid>
</Window>

Have tried to provide Itemsas the ItemsSourceof the TreeView. It does not show the data hierarchically, if displaying anything.

试图提供Items作为ItemsSource的TreeView。如果显示任何内容，它不会分层显示数据。

And I tried using the ItemTemplateinstead of the TreeView.Resources, too.

我也尝试使用ItemTemplate代替TreeView.Resources。

What is wrong about it?

它有什么问题？

Perhaps a problem is the first TextBlock Text Binding? I want to display the Nameproperty of the NodeViewModelin Itemsthere.

也许问题是第一个TextBlock Text Binding？我想在那里显示Name属性。NodeViewModelItems

采纳答案by Mohammad Dehghan

As @sa_ddam213 said, you only need the HierarchicalDataTemplatefor NodeViewModel, but the only problem with your code was the missing braces ({and }) for DataType="x:Type local:TreeViewModel"in your data template definitions (it should be DataType="{x:Type local:TreeViewModel}"). Adding brackets and ItemsSourcebinding solves the problem:

正如@ sa_ddam213说，你只需要HierarchicalDataTemplate对NodeViewModel，但你的代码的唯一问题是缺少括号（{和}）为DataType="x:Type local:TreeViewModel"您的数据模板定义（应该是DataType="{x:Type local:TreeViewModel}"）。添加括号和ItemsSource绑定解决问题：

The additional HierarchicalDataTemplatefor TreeViewModelis not used, but it does not harm.

不使用附加的HierarchicalDataTemplatefor TreeViewModel，但它不会造成伤害。

回答by sa_ddam213

You should only have to declare the HierarchicalDataTemplatefor NodeViewModelas this is the only thing showing in the TreeView, and bind the actual ItemSourceto the TreeView

您应该只需要声明HierarchicalDataTemplateforNodeViewModel因为这是在 中显示的唯一内容TreeView，并将实际绑定ItemSource到TreeView

<TreeView ItemsSource="{Binding Items}">
    <TreeView.Resources>
        <HierarchicalDataTemplate DataType="{x:Type local:NodeViewModel}" ItemsSource="{Binding Children}">
            <TextBlock Text="{Binding Name}"></TextBlock>
        </HierarchicalDataTemplate>
    </TreeView.Resources>
</TreeView>

Full Example

完整示例

Xaml:

Xml：

<Window x:Class="WpfApplication13.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication13"
        Title="MainWindow" x:Name="UI" Width="343" Height="744.625" >

    <TreeView DataContext="{Binding ElementName=UI, Path=TreeModel}" ItemsSource="{Binding Items}">
        <TreeView.Resources>
            <HierarchicalDataTemplate DataType="{x:Type local:NodeViewModel}" ItemsSource="{Binding Children}">
                <TextBlock Text="{Binding Name}"></TextBlock>
            </HierarchicalDataTemplate>
        </TreeView.Resources>
    </TreeView>

</Window>

Code:

代码：

public partial class MainWindow : Window
{

    public MainWindow()
    {
        InitializeComponent();
    }

    public TreeViewModel TreeModel
    {
        get
        {
            return new TreeViewModel
            {
                Items = new ObservableCollection<NodeViewModel>{
                           new NodeViewModel { Name = "Root", Children =  new ObservableCollection<NodeViewModel> {
                              new NodeViewModel { Name = "Level1" ,  Children = new ObservableCollection<NodeViewModel>{ 
                                  new NodeViewModel{ Name = "Level2"}}} } }}
            };
        }
    }
}

public class TreeViewModel
{
    public ObservableCollection<NodeViewModel> Items { get; set; }
}

public class NodeViewModel
{
    public string Id { get; set; }
    public string Name { get; set; }
    public ObservableCollection<NodeViewModel> Children { get; set; }
}

Result:

结果：