WPF 将 List 绑定到 TreeView 和分组

Question

我的 ViewModel 中有列表。我想根据属性对这个列表对象进行分组，并在Treeview 中显示。

class ProductsViewModel
{
    public List<Product> ProductList;
}

class Product
{
    public string Name;
    public string Category;
    public double Price;
}

在我的 WPF 窗口中，我需要根据产品的类别在 TreeView 的 ProductList 中显示产品。请指导我。

Category 1
    P1
    P2
Category 2
    P3
    P4
    P5

Answer 1

我通过使用 CollectionViewSource 设法做到了这一点。创建一个 CollectionViewSource 并设置组描述。

    <CollectionViewSource Source="{Binding ProductList}"
                          x:Key="Items">
        <CollectionViewSource.GroupDescriptions>
            <PropertyGroupDescription PropertyName="Category" />
        </CollectionViewSource.GroupDescriptions>
    </CollectionViewSource>

我在 ListBox 上使用 GroupStyle 来实现分组。但是既然需要树视图UI，我们就需要自定义GroupItem的ContainerStyle。将 TreeViewItem 模板放入容器样式中。我实际上是从here复制了TreeViewItem的默认模板。

        <ListBox ItemsSource="{Binding Source={StaticResource Items}}"
                  DisplayMemberPath="Name">
        <ItemsControl.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Name}" />
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
                <GroupStyle.ContainerStyle>
                    <Style TargetType="GroupItem">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="GroupItem">
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition MinWidth="19"
                                                              Width="Auto" />
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition />
                                        </Grid.RowDefinitions>
                                        <ToggleButton x:Name="Expander"
                                                      Style="{StaticResource ExpandCollapseToggleStyle}"
                                                      ClickMode="Press"/>
                                        <Border x:Name="Bd"
                                                Grid.Column="1"
                                                Background="{TemplateBinding Background}"
                                                BorderBrush="{TemplateBinding BorderBrush}"
                                                BorderThickness="{TemplateBinding BorderThickness}"
                                                Padding="{TemplateBinding Padding}">
                                            <TextBlock Text="{Binding Name}"/>
                                        </Border>
                                        <ItemsPresenter x:Name="ItemsHost"
                                                        Grid.Row="1"
                                                        Grid.Column="1"
                                                        Margin="10 0 0 0"
                                                        Grid.ColumnSpan="2"
                                                        Visibility="Collapsed" />
                                    </Grid>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsChecked"
                                                 SourceName="Expander"
                                                 Value="True">
                                            <Setter Property="Visibility"
                                                    TargetName="ItemsHost"
                                                    Value="Visible" />
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </GroupStyle.ContainerStyle>
            </GroupStyle>
        </ItemsControl.GroupStyle>
    </ListBox>

Answer 2

使用此更改 Product 和 ProductViewModel 类：

class ProductsViewModel
{
    private List<Product> productList;

    public List<Product> ProductList
    {
        get 
        { return productList; }
        set 
        { productList = value; }
    }
}

class Product
{
    private string name;

    public string Name
    {
        get { return name; }
        set { name = value; }
    }

    private string category;

    public string Category
    {
        get { return category; }
        set { category = value; }
    }

    private double price;

    public double Price
    {
        get { return price; }
        set { price = value; }
    }
}

MainWindow.xaml

<Window x:Class="WpfApplication11.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <TreeView x:Name="treeView" HorizontalAlignment="Left" Height="178" Margin="85,24,0,0" VerticalAlignment="Top" Width="279"/>

    </Grid>
</Window>

MainWindow 构造函数：

    public MainWindow()
    {
        ProductsViewModel viewModel = new ProductsViewModel();
        viewModel.ProductList = new List<Product>();
        viewModel.ProductList.Add(new Product() { Name = "ABC", Category ="1", Price = 100 });
        viewModel.ProductList.Add(new Product() { Name = "PQR", Category = "2", Price = 100 });
        viewModel.ProductList.Add(new Product() { Name = "ABC", Category = "3", Price = 100 });
        viewModel.ProductList.Add(new Product() { Name = "XYZ", Category = "2", Price = 100 });

        InitializeComponent();

        var GetCategories = viewModel.ProductList.Select(p => p.Category).Distinct();
        foreach (var item in GetCategories)
        {
            TreeViewItem node = new TreeViewItem() { Header = item };
            treeView.Items.Add(node);
            var products = viewModel.ProductList.Where(p => p.Category == item).Select(p => p.Name).Distinct();
            foreach (var product in products)
            {
                node.Items.Add(product);
            }
        }
    }