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

相关推荐
✎ ﹏梦醒͜ღ҉繁华落℘13 小时前
开发WPF项目时遇到的问题总结
wpf
hqwest1 天前
C#WPF实战出真汁06--【系统设置】--餐桌类型设置
c#·.net·wpf·布局·分页·命令·viewmodel
Vae_Mars2 天前
WPF中使用InputBindings进行快捷键绑定
wpf
hqwest2 天前
C#WPF实战出真汁05--左侧导航
开发语言·c#·wpf·主界面·窗体设计·视图viewmodel
hqwest2 天前
C#WPF实战出真汁01--项目介绍
开发语言·c#·wpf
wuty0072 天前
WPF 实现支持动态调整高度的文本显示控件
wpf·scrollviewer·extentheight·自动高度控件·动态调整高度
范纹杉想快点毕业5 天前
C 语言主控开发与显控开发能力体系及技术栈详解,STM32、QT、嵌入式、边缘系统显示
stm32·单片机·tcp/ip·microsoft·fpga开发·51单片机·wpf
weixin_447103586 天前
WPF之绑定!
c#·wpf
DataIntel6 天前
wpf问题记录
wpf
蓝点lilac7 天前
C# WPF 内置解码器实现 GIF 动图控件
c#·.net·wpf·图像