如何为 WPF TreeView 设置 DataTemplate 以显示列表的所有元素？

How do I set a DataTemplate for a WPF TreeView to display all Elements of an List?

提问by Onur

I'd like to visualize the following data structure using TreeViews in WPF:

我想在 WPF 中使用 TreeViews 可视化以下数据结构：

class MyDataContext
{
    ICollectionView Outers {get;set;}
    //...
}

class Outer
{
    string Name {get;set;}
    IEnumberable<Inner> Actions {get;set;} 
}


class Inner
{
    string Description {get;set;}
    Command OnClick {get;set;}
}

This is my attempt so far:

到目前为止，这是我的尝试：

<!-- DataContext is MyDataContext at this  point -->
<TreeView ItemsSource="{Binding Path=Outers}">
    <TreeView.Resources>
        <DataTemplate DataType="{x:Type myns:Outer}">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Path=Name}"/>

                <TreeView ItemsSource="{Binding Path=Actions}" >
                    <DataTemplate DataType="{x:Type myns:Inner}">
                        <Button Command={Binding Path=OnClick}>
                            <TextBlock Text="{Binding Path=Description}"/>
                        </Button>
                    </DataTemplate>
                </TreeView>
            </StackPanel>
        </DataTemplate>
    </TreeView.Resources>
</TreeView>

It seams like there's something wrong with this access since I get the following InvalidOperationException:

由于我得到以下信息，因此此访问似乎有问题InvalidOperationException：

Operation is not valid while ItemsSource is in use. Access and modify elements with ItemsControl.ItemsSource instead.

If I drop the inner TreeView there's no exception (but also no buttons of course).

如果我删除内部 TreeView 也不例外（当然也没有按钮）。

回答by Onur

I used the page Mateusz mentioned (HierarchicalDataTemplate) and after reading the answer to this question: Bind Collection to StackPanelI found a solution that did what I wanted:

我使用了 Mateusz 提到的页面（HierarchicalDataTemplate），并在阅读了这个问题的答案后：将集合绑定到 StackPanel我找到了一个解决方案，可以满足我的需求：

Here the players (level 3) are on the same row as the team (level 2):

这里的球员（级别 3）与团队（级别 2）在同一排：

<TreeView ItemsSource="{Binding League}">
    <!-- Conference template -->
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding Teams}">
            <TextBlock Foreground="Red" Text="{Binding Name}" />
            <!-- Team template -->
            <HierarchicalDataTemplate.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Name}"/>
                        <ItemsControl ItemsSource="{Binding Players}">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Orientation="Horizontal">
                                    </StackPanel>
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <Button Content="{Binding }"/>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </StackPanel>
                </DataTemplate>
            </HierarchicalDataTemplate.ItemTemplate>
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

回答by Mateusz Dembski

Please try to use HierarchicalDataTemplate with TreeView.

请尝试将 HierarchicalDataTemplate 与 TreeView 一起使用。

HierarchicalDataTemplate

分层数据模板

回答by Jan Peter

Maybe this helps you a little bit ;)

也许这对你有一点帮助；)

The xaml:

xml：

    <TreeView ItemsSource="{Binding Outers}">
        <TreeView.ItemTemplate>
            <DataTemplate>
                <TreeViewItem ItemsSource="{Binding Actions}" Header="{Binding Name}">
                    <TreeViewItem.ItemTemplate>
                        <DataTemplate>
                            <Button Command="{Binding Click}" Content="{Binding Name}" />
                        </DataTemplate>
                    </TreeViewItem.ItemTemplate>
                </TreeViewItem>
            </DataTemplate>
        </TreeView.ItemTemplate>
    </TreeView>

The data:

数据：

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        DataContext = new MyDataContext();
    }
}



    class MyDataContext
    {
        public ObservableCollection<Outer> Outers { get; set; }


        public MyDataContext()
        {
            Outers = new ObservableCollection<Outer>();
            Outers.Add(new Outer() { Name = "Herp" });
            Outers.Add(new Outer() { Name = "Derp" });
        }
    }

    class Outer
    {
        public string Name { get; set; }
        public ObservableCollection<Inner> Actions { get; set; }

        public Outer()
        {
            Actions = new ObservableCollection<Inner>();
            Actions.Add(new Inner { Name = "Test1" });
            Actions.Add(new Inner { Name = "Test2" });
            Actions.Add(new Inner { Name = "Test3" });
            Actions.Add(new Inner { Name = "Test4" });
            Actions.Add(new Inner { Name = "Test5" });
            Actions.Add(new Inner { Name = "Test6" });
            Actions.Add(new Inner { Name = "Test7" });
        }
    }


    class Inner
    {
        public string Name { get; set; }
        public ICommand OnClick { get; set; }
    }

And if you are using Commands... Try it with this example: ICommand

如果你正在使用命令...试试这个例子： ICommand