如何在 TreeView WPF 中在同一级别上绑定具有相同类型的集合答案

【问题标题】：How to bind collections with same type on same level in TreeView WPF如何在 TreeView WPF 中在同一级别上绑定具有相同类型的集合
【发布时间】：2016-04-19 13:50:54
【问题描述】：

我想在 Treeview 中显示以下集合

 private ObservableCollection<SectionHeader> _sections;
 public ObservableCollection<SectionHeader> Sections
 {
     get { return _sections ?? (_sections = new ObservableCollection<SectionHeader>()); }
     set { _sections = value; NotifyOfPropertyChange(() => Sections); }
 }

SectionHeader 和嵌套类型如下所示

 public class SectionHeader
{
    public string ID { get; set; }
    public string Name { get; set; }
    private ObservableCollection<SectionItem> _items;
    public ObservableCollection<SectionItem> Items { get { return _items ?? (_items = new ObservableCollection<SectionItem>()); } }
}

public class SectionItem
{
    public string Title { get; set; }
    public int ID { get; set; }


    private ObservableCollection<ProductCalculatorTemplate> _products;
    public ObservableCollection<ProductCalculatorTemplate> Products { get { return _products ?? (_products = new ObservableCollection<ProductCalculatorTemplate>()); } }

    private ObservableCollection<ProductCalculatorTemplate> _productsOptionTwo;
    public ObservableCollection<ProductCalculatorTemplate> ProductsOptionTwo { get { return _productsOptionTwo ?? (_productsOptionTwo = new ObservableCollection<ProductCalculatorTemplate>()); } }
}

public class ProductCalculatorTemplate
{
    public string Product { get; set; }
    public double NoOfCoats { get; set; }
    public double PackSize { get; set; }
}

这就是我的 TreeView 的 XAML 代码的样子

<TreeView ItemsSource="{Binding Sections}" Background="GhostWhite">
            <TreeView.Resources>
                <HierarchicalDataTemplate DataType= "{x:Type ViewModels:SectionHeader}" ItemsSource = "{Binding Path=Items}">
                    <StackPanel Orientation="Horizontal" Tag="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}}">
                        <TextBlock Text="{Binding Name}"/>
                    </StackPanel>
                </HierarchicalDataTemplate>

                <HierarchicalDataTemplate  DataType = "{x:Type ViewModels:SectionItem}" ItemsSource = "{Binding Path=Products}">
                    <StackPanel Orientation="Horizontal" Tag="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}}">
                        <TextBlock Text="{Binding Title}"/>
                    </StackPanel>
                    <HierarchicalDataTemplate.ItemTemplate>
                        <DataTemplate DataType = "{x:Type ViewModels:ProductCalculatorTemplate}" >
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="{Binding Product}"/>
                            </StackPanel>
                        </DataTemplate>
                    </HierarchicalDataTemplate.ItemTemplate>
                </HierarchicalDataTemplate>
            </TreeView.Resources>
 </TreeView>

这是上面代码的输出

但是我想以这样一种方式显示信息，即在 Fenomastic 下方出现一个名为“选项 1”的子节点，该节点应列出所有 Prdouct，而 Fenomastic 的第二个子节点应为“选项 2”，该节点应列出 SectionItem 的所有 ProductsOptionTwo 成员。

【问题讨论】：

标签： c# wpf treeview hierarchicaldatatemplate

【解决方案1】：

仅使用 WPF 中的基本树视图，最简单的选项是引入选项集合，其中包含选项 1 和选项 2 作为项目，即：

public class SectionItem
{
    public string Title { get; set; }
    public int ID { get; set; }

    private ObservableCollection<Option> _options;
    public ObservableCollection<Option> Options
    {
        get { return _options ?? (_options = new ObservableCollection<Option>()); }
    }
}

public class Option
{
    public string Name { get; set; }
    public ObservableCollection<ProductCalculatorTemplate> Products
    {
        get { return _products ?? (_products = new ObservableCollection<ProductCalculatorTemplate>()); }
    }
}

并为Option 类型添加另一个HierarchicalDataTemplate

因为 TreeView 否则不适合列出像 ProductsOption 和 ProductsOptionTwo 属性这样的固定数量的属性。

【讨论】：