示例: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个人主页-哔哩哔哩视频

相关推荐
晓纪同学35 分钟前
WPF-04 XAML概述
wpf
△曉風殘月〆18 小时前
如何在WPF中捕获窗口外的事件
wpf
爱吃烤鸡翅的酸菜鱼2 天前
Java 事件发布-订阅机制全解析:从原生实现到主流中间件
java·中间件·wpf·事件·发布订阅
武藤一雄3 天前
WPF中ViewModel之间的5种通讯方式
开发语言·前端·microsoft·c#·wpf
CSharp精选营3 天前
都是微软亲儿子,WPF凭啥干不掉WinForm?这3个场景说明白了
c#·wpf·跨平台·winform
baivfhpwxf20233 天前
wpf TextBlock 控件如何根据内容换行?
wpf
亘元有量-流量变现3 天前
鸿蒙、安卓、苹果音频设备技术深度解析与开发实践
android·wpf·harmonyos·亘元有量·积分墙
软泡芙3 天前
【Bug】ReactiveUI WPF绑定中依赖属性不更新的问题分析与解决方案
java·bug·wpf
浪扼飞舟3 天前
WPF输入验证(ValidationRule)
java·javascript·wpf
IOFsmLtzR5 天前
Flink Agents 源码解读 --- (5) --- ActionExecutionOperator
microsoft·flink·wpf