wpf - WPF DataGrid 显示多种类型

Question

在 WPF 数据网格中显示多种类型的数据的最佳方式是什么。例如类别和产品：

| 产品名称 | 说明 | 价格 |
--------------------------------------
IT - 类别
--------------------------------------
  监视器 - 类别
--------------------------------------
| 监视器 1 | ... | 100 美元 |
| 监视器 2 | ... | 99 美元 |
| 监视器 3 | ... | 120 美元 |
--------------------------------------
  硬盘 - 类别
--------------------------------------
| 硬盘 1 | ... | 50 美元 |
| 硬盘 2 | ... | 45 美元 |
--------------------------------------
电子类
--------------------------------------
 ...

我想显示在产品列的顶部，并更改类别的模板。我知道有一个单元格模板选择器，但是有没有办法为整行指定一个模板选择器？谢谢你。

Answer 1

如果您CollectionViewsource为您的数据创建一个，您可以PropertyGroupDescription在集合中使用GroupDescriptions您希望的属性对所有数据进行分组。

然后在 中DataGrid您可以创建一个GroupStyle来显示一个TextBlock或一些东西来分隔您在 中的所有组DataGrid。

这是一个完整的工作演示，因为它比解释更容易展示:)

xml:

<Window x:Class="WpfApplication20.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="505" Width="525" Name="UI">

    <Window.Resources>

        <!--Create CollectionViewSource and set the property you want to group by-->
        <CollectionViewSource x:Key="MyItems" Source="{Binding Items, ElementName=UI}">
            <CollectionViewSource.GroupDescriptions>
                <PropertyGroupDescription PropertyName="Category" />
            </CollectionViewSource.GroupDescriptions>
        </CollectionViewSource>
    </Window.Resources>

    <Grid>
        <DataGrid ItemsSource="{Binding Source={StaticResource MyItems}}">
            <DataGrid.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <!--Name property is the GroupName created by the CollectionViewSource-->
                                <TextBlock Text="{Binding Path=Name}" Margin="10,0,0,0" FontSize="18" FontWeight="Bold"/>
                            </StackPanel>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                </GroupStyle>
            </DataGrid.GroupStyle>
        </DataGrid>
    </Grid>
</Window>

代码：

namespace WpfApplication20
{
    public partial class MainWindow : Window
    {
        private ObservableCollection<MyDataObject> _items = new ObservableCollection<MyDataObject>();

        public MainWindow()
        {
            InitializeComponent();
            Items.Add(new MyDataObject { Category = "IT", ProductName = "Stackoverflow", Description = "Group", Price = "Demo" });
            Items.Add(new MyDataObject { Category = "Monitors", ProductName = "Stackoverflow", Description = "Group", Price = "Demo" });
            Items.Add(new MyDataObject { Category = "Monitors", ProductName = "Stackoverflow", Description = "Group", Price = "Demo" });
            Items.Add(new MyDataObject { Category = "Monitors", ProductName = "Stackoverflow", Description = "Group", Price = "Demo" });
            Items.Add(new MyDataObject { Category = "HDD", ProductName = "Stackoverflow", Description = "Group", Price = "Demo" });
            Items.Add(new MyDataObject { Category = "HDD", ProductName = "Stackoverflow", Description = "Group", Price = "Demo" });
        }

        public ObservableCollection<MyDataObject> Items
        {
            get { return _items; }
            set { _items = value; }
        }
    }

    public class MyDataObject
    {
        public string Category { get; set; }
        public string ProductName { get; set; }
        public string Description { get; set; }
        public string Price { get; set; }
    }
}

结果：

增强

GroupItem在 中覆盖模板DataGrid ContainerStyle以使用可能是个好主意Expander，这样您就可以展开折叠组。

例子：

    <DataGrid ItemsSource="{Binding Source={StaticResource MyItems}}" CanUserAddRows="False">
        <DataGrid.GroupStyle>
            <GroupStyle>
                <GroupStyle.ContainerStyle>
                    <Style TargetType="{x:Type GroupItem}">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type GroupItem}">
                                    <Expander Name="expander">
                                        <Expander.Header>
                                            <StackPanel >
                                                <TextBlock Text="{Binding Name}" FontWeight="Bold"/>
                                                <TextBlock Text="{Binding ItemCount, StringFormat={}Items: {0}}" FontSize="9" />
                                            </StackPanel>
                                        </Expander.Header>
                                        <ItemsPresenter />
                                    </Expander>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </GroupStyle.ContainerStyle>
            </GroupStyle>
        </DataGrid.GroupStyle>
    </DataGrid>

结果：