示例:WPF中DataGrid设置多级分组样式

一、目的:应用CollectionViewSource和GroupStyle设置DataGrid多级分组样式

二、实现

一级分组效果如下

二级分组效果如下

三、环境

VS2022

四、示例

具体实现代码如下

XML 复制代码
        <TabItem Header="DataGrid - 多级分组">
            <TabItem.Resources>
                <CollectionViewSource x:Key="cvs" Source="{h:GetStudents Count=10}">
                    <CollectionViewSource.GroupDescriptions>
                        <PropertyGroupDescription PropertyName="Name" />
                        <PropertyGroupDescription PropertyName="Class" />
                    </CollectionViewSource.GroupDescriptions>
                </CollectionViewSource>
            </TabItem.Resources>
            <DataGrid IsReadOnly="True" AutoGenerateColumns="False" ItemsSource="{Binding Source={StaticResource cvs}}">
                <DataGrid.GroupStyle>
                    <GroupStyle>
                        <GroupStyle.ContainerStyle>
                            <Style TargetType="{x:Type GroupItem}">
                                <Setter Property="Margin" Value="0,0,0,5" />
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="{x:Type GroupItem}">
                                            <Expander IsExpanded="True">
                                                <Expander.Header>
                                                    <DockPanel Margin="0 5">
                                                        <TextBlock Width="200"
                                                                   Margin="5,0,0,0"
                                                                   FontWeight="Bold">
                                                            <Run Text="厨师 :"/>
                                                            <Run Text="{Binding Name,Mode=OneWay}"/>
                                                        </TextBlock>

                                                        <TextBlock FontWeight="Bold">
                                                              <Run Text="数量 :"/>
                                                            <Run Text="{Binding ItemCount,Mode=OneWay}"/>
                                                                <Run Text="个"/>
                                                        </TextBlock>
                                                    </DockPanel>
                                                </Expander.Header>
                                                <ItemsPresenter />
                                            </Expander>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </GroupStyle.ContainerStyle>
                    </GroupStyle>
                    <GroupStyle>
                        <GroupStyle.HeaderTemplate>
                            <DataTemplate>
                                <DockPanel>
                                    <DockPanel.Background>
                                        <SolidColorBrush Color="Transparent" />
                                    </DockPanel.Background>
                                    <TextBlock Width="200"
                                               Margin="30,6,0,6"
                                               VerticalAlignment="Center">
                                        <Run Text="班次 :"/>
                                        <Run Text="{Binding Name,Mode=OneWay}"/>
                                    </TextBlock>
                                    <TextBlock VerticalAlignment="Center">
                                        <Run Text="销量 :"/>
                                        <Run Text="{Binding ItemCount,Mode=OneWay}"/>
                                        <Run Text="单"/>
                                    </TextBlock>
                                </DockPanel>
                            </DataTemplate>
                        </GroupStyle.HeaderTemplate>
                    </GroupStyle>
                </DataGrid.GroupStyle>
                <DataGrid.Columns>
                    <DataGridTemplateColumn  Width="Auto" Header="菜品">
                        <DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <Image Source="2.jpg" Width="200" VerticalAlignment="Center" Stretch="UniformToFill" Height="100"/>
                            </DataTemplate>
                        </DataGridTemplateColumn.CellTemplate>
                    </DataGridTemplateColumn>
                    <DataGridTextColumn Width="*" Header="产地" Binding="{Binding Address}"/>
                    <DataGridTextColumn Width="*"  Header="邮箱" Binding="{Binding Emall}"/>
                    <DataGridTextColumn Width="100" Header="价格" Binding="{Binding Score, StringFormat={}{0:C}}"/>
                    <DataGridTextColumn Width="*" Header="联系方式" Binding="{Binding Tel}"/>
                </DataGrid.Columns>
            </DataGrid>
        </TabItem>

首先,定义一个支持分组排序的CollectionViewSource资源

然后,绑定到DataGrid的ItemsSource上

最后,设置DataGrid的GroupStyle,示例中定义了二级分组,所以需要设置两个GroupStyle

五、需要了解的知识点

CollectionViewSource 类 (System.Windows.Data) | Microsoft Learn

GroupStyle 类 (System.Windows.Controls) | Microsoft Learn

六、源码地址

GitHub - HeBianGu/WPF-ControlDemo: 示例

GitHub - HeBianGu/WPF-ControlBase: Wpf封装的自定义控件资源库

GitHub - HeBianGu/WPF-Control: WPF轻量控件和皮肤库

七、了解更多

System.Windows.Controls 命名空间 | Microsoft Learn

https://github.com/HeBianGu

HeBianGu的个人空间-HeBianGu个人主页-哔哩哔哩视频

相关推荐
donk13146 小时前
React Native for OpenHarmony 实战:三方库 react-native-step-indicator 的鸿蒙化适配指南
分布式·react native·react.js·wpf·harmonyos
He BianGu8 小时前
【笔记】WPF中RenderOptions类的详细功能
笔记·wpf
VidDown10 小时前
上线三个月后的第一次事故:一个 Django 服务的日志、监控与故障复盘
数据库·python·django·wpf·音视频·视频编解码
He BianGu10 小时前
【笔记】WPF中CachingHint的功能
笔记·wpf
He BianGu13 小时前
【笔记】在WPF中BitmapScalingMode的作用
笔记·wpf
Vae_Mars1 天前
幂等性学习笔记
笔记·学习·wpf
samble2 天前
从零搭建灌装监控系统(十九):单元测试实战,xUnit + 内存SQLite + 反射测试私有方法
c#·wpf·mvvm·modbus·工业控制
光泽雨3 天前
路由概念和路由事件 继承链路 RadioButton的事件解析
wpf
samble3 天前
从零搭建灌装监控系统(十八):自定义控件,三色灯与状态指示
c#·wpf·mvvm·modbus·工业控制
光泽雨3 天前
ToolTip工具提示控件
wpf·控件按钮