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

相关推荐
界面开发小八哥1 天前
界面组件DevExpress WPF中文教程:Grid - 如何过滤节点?
.net·wpf·界面控件·devexpress·ui开发
I'mSQL1 天前
C#与WPF使用mvvm简单案例点击按钮触发弹窗
开发语言·c#·wpf
百锦再2 天前
WPF依赖属性深度解析:从原理到高级应用
wpf·依赖·绑定·验证·net·强制
✎ ﹏梦醒͜ღ҉繁华落℘2 天前
WPF高级学习(一)
学习·wpf
界面开发小八哥2 天前
界面控件DevExpress WPF v25.1新版亮点:模板库更新升级
ui·.net·wpf·界面控件·devexpress·ui开发
△曉風殘月〆2 天前
WPF MVVM进阶系列教程(二、数据验证)
wpf·mvvm
JosieBook3 天前
【开源】WpfMap:一个基于WPF(Windows Presentation Foundation)技术构建的数据可视化大屏展示页面
信息可视化·wpf
bianguanyue3 天前
WPF——自定义ListBox
c#·wpf
大曰编程3 天前
行为型模式-协作与交互机制
wpf·交互
上元星如雨5 天前
WPF 项目设置应用程序图标和设置程序集图标
wpf