WPF的DataGrid控件——分组、改变成DataTreeGrid的样式

最新推荐文章于 2024-08-14 12:36:58 发布
最新推荐文章于 2024-08-14 12:36:58 发布
阅读量1w 收藏 23
点赞数 3
分类专栏： wpf 文章标签： wpf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/niuge8905/article/details/78931662
版权

这里主要讲到《WPF编程宝典》那本书中，关于DataGrid控件中一些补充内容。
1、DataGrid基本用法
直接上代码，看效果吧：
后台代码

namespace DataGridTest
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            Model model = new Model();
            this.dataGridStudent.ItemsSource = model.ListStudent;
        }

    }
    public class Model
    {
        public List<Student> ListStudent { get; set; }
        public Model()
        {
            ListStudent = Initial();
        }
        private List<Student> Initial()
        {
            List<Student> listStudent = new List<Student>();
            listStudent.Add(new Student("class1", "David", 101));
            listStudent.Add(new Student("class1","James",102));
            listStudent.Add(new Student("class1", "Jim", 103));
            listStudent.Add(new Student("class2", "Lilei", 201));
            listStudent.Add(new Student("class2", "Hanmeimei", 202));
            listStudent.Add(new Student("class2", "Zhaolei", 203));
            return listStudent;
        }
    }
    public class Student
    {
        public string ClassRoom { get; set; }
        public string Name { get; set; }
        public int StudentId { get; set; }
        public Student(string classRoom,string name,int studentId)
        {
            ClassRoom = classRoom;
            Name = name;
            StudentId = studentId;
        }
    }
}

xaml代码：

    <Grid>
        <DataGrid Name="dataGridStudent" DataContext="{Binding Path=ListStudent}" AutoGenerateColumns="False">
            <DataGrid.Columns>
                <DataGridTextColumn Header="ClassRoom" Binding="{Binding Path=ClassRoom}" Width="*"></DataGridTextColumn>
                <DataGridTextColumn Header="Name" Binding="{Binding Path=Name}" Width="*"></DataGridTextColumn>
                <DataGridTextColumn Header="StudentId" Binding="{Binding Path=StudentId}" Width="*"></DataGridTextColumn>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>

这里写图片描述
2、分组
在上面的数据中，可以以ClassRoom来给数据分组
后台代码(主要修改MainWindow()即可)：

public MainWindow()
        {
            InitializeComponent();
            ObservableCollection<Student> data = new ObservableCollection<Student>();
            Model model = new Model();
            foreach(var item in model.ListStudent)
            {
                data.Add(item);
            }
            this.dataGridStudent.ItemsSource = data;
            ICollectionView vw = CollectionViewSource.GetDefaultView(data);
            vw.GroupDescriptions.Add(new PropertyGroupDescription("ClassRoom"));
        }

前台代码：

<Window x:Class="DataGridTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:DataGridTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style x:Key="GroupHeaderStyle" TargetType="{x:Type GroupItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type GroupItem}">
                        <Expander IsExpanded="True">
                            <Expander.Header>
                                <TextBlock Text="{Binding Path=Name}"/>
                            </Expander.Header>
                            <ItemsPresenter />
                        </Expander>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <DataGrid Name="dataGridStudent"  AutoGenerateColumns="False">
            <DataGrid.GroupStyle>
                <GroupStyle ContainerStyle="{StaticResource GroupHeaderStyle}">
                    <GroupStyle.Panel>
                        <ItemsPanelTemplate>
                            <DataGridRowsPresenter/>
                        </ItemsPanelTemplate>
                    </GroupStyle.Panel>
                </GroupStyle>
            </DataGrid.GroupStyle>
            <DataGrid.Columns>
                <DataGridTextColumn Header="ClassRoom" Binding="{Binding Path=ClassRoom}" Width="*"></DataGridTextColumn>
                <DataGridTextColumn Header="Name" Binding="{Binding Path=Name}" Width="*"></DataGridTextColumn>
                <DataGridTextColumn Header="StudentId" Binding="{Binding Path=StudentId}" Width="*"></DataGridTextColumn>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

这里写图片描述
3、样式修改
这个时候会发现界面样式比较丑，可以稍作修改，可以参考以下博客：
http://blog.csdn.net/ff1990723/article/details/52948467
这篇博客稍复杂，作为入门没多久的半小白，我是看了半天没怎么看明白。但是我工作的需求并没有那么高，只需要修改Expander的按钮，把头列去掉即可，然后改为TreeView的样式。
首先去掉头列，只需要简单的设置RowHeaderWidth=”0”：

<DataGrid Name="dataGridStudent"  AutoGenerateColumns="False" RowHeaderWidth="0">

然后修改Expander的按钮：
这里的expander有两部分组成，一个是togglebutton，一部分是内容，这里可以用一个有两行的Grid的容器来存放这两个内容。当IsExpanded为True的时候，grid.row=1的行高等于内容的行高，当IsExpanded为false的时候，grid.row=1的行高为0，这样就可以变成expander的收放状态。这里仅需修改前台代码即可。

<Window x:Class="DataGridTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:DataGridTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <ControlTemplate x:Key="ExpanderToggleButton" TargetType="ToggleButton">
            <Border>
                <Path Name="path" Data="M 5,4 L 5,11 L 11,7.5 Z" Fill="Black"></Path>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsChecked" Value="true">
                    <Setter TargetName="path" Property="Data" Value="M 4,5 L 11,5 L 7.5,11 Z"></Setter>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

            <Style x:Key="ExpanderStyle" TargetType="{x:Type Expander}">
            <Setter Property="IsExpanded" Value="False"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Expander}">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition></RowDefinition>
                                <RowDefinition Name="ContentRow" Height="0"></RowDefinition>
                            </Grid.RowDefinitions>
                            <Border Grid.Row="0" Name="border" BorderThickness="0,0,0,0">
                                <WrapPanel>
                                    <ToggleButton Margin="20 10 0 10"  VerticalAlignment="Center" IsChecked="{Binding Path=IsExpanded,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
                                                  OverridesDefaultStyle="True" Template="{StaticResource ExpanderToggleButton}" />
                                    <ContentPresenter  Margin="20 10 0 10"  VerticalAlignment="Center"  ContentSource="Header"  RecognizesAccessKey="True" />
                                </WrapPanel>
                            </Border>
                            <ContentPresenter Grid.Row="1"></ContentPresenter>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsExpanded" Value="true">
                                <Setter TargetName="ContentRow" Property="Height" Value="{Binding ElementName=Content, Path=DesiredHeight}" />
                            </Trigger>
                            <Trigger Property="IsExpanded" Value="false">
                                <Setter TargetName="border" Property="BorderThickness" Value="0 0 0 1" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="GroupHeaderStyle" TargetType="{x:Type GroupItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type GroupItem}">
                        <Expander IsExpanded="False" Style="{StaticResource ExpanderStyle}">
                            <Expander.Header>
                                <TextBlock Text="{Binding Path=Name}"/>
                            </Expander.Header>
                            <Expander.Content>
                                <ItemsPresenter />
                            </Expander.Content>                            
                        </Expander>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Window.Resources>
    <Grid>        
        <DataGrid Name="dataGridStudent"  AutoGenerateColumns="False" RowHeaderWidth="0">
            <DataGrid.GroupStyle>
                <GroupStyle ContainerStyle="{StaticResource GroupHeaderStyle}">
                    <GroupStyle.Panel>
                        <ItemsPanelTemplate>
                            <DataGridRowsPresenter/>
                        </ItemsPanelTemplate>
                    </GroupStyle.Panel>
                </GroupStyle>
            </DataGrid.GroupStyle>
            <DataGrid.Columns>
                <DataGridTextColumn Header="ClassRoom" Binding="{Binding Path=ClassRoom}" Width="*"></DataGridTextColumn>
                <DataGridTextColumn Header="Name" Binding="{Binding Path=Name}" Width="*"></DataGridTextColumn>
                <DataGridTextColumn Header="StudentId" Binding="{Binding Path=StudentId}" Width="*"></DataGridTextColumn>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

这里写图片描述

接下来，把网格去掉，只需要设置网格线为空即可。

<DataGrid Name="dataGridStudent"  AutoGenerateColumns="False" RowHeaderWidth="0" HorizontalGridLinesBrush="{x:Null}" VerticalGridLinesBrush="{x:Null}">

然后，这个时候已经离TreeView很近了，我们只需要把第一列去掉，然后把背景颜色也去掉，就是一个DataGrid和TreeView结合的控件。
这里写图片描述

最后的xaml代码如下：

<Window x:Class="DataGridTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:DataGridTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <ControlTemplate x:Key="ExpanderToggleButton" TargetType="ToggleButton">
            <Border>
                <Path Name="path" Data="M 5,4 L 5,11 L 11,7.5 Z" Fill="Black"></Path>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsChecked" Value="true">
                    <Setter TargetName="path" Property="Data" Value="M 4,5 L 11,5 L 7.5,11 Z"></Setter>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

            <Style x:Key="ExpanderStyle" TargetType="{x:Type Expander}">
            <Setter Property="IsExpanded" Value="False"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Expander}">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition></RowDefinition>
                                <RowDefinition Name="ContentRow" Height="0"></RowDefinition>
                            </Grid.RowDefinitions>
                            <Border Grid.Row="0" Name="border" BorderThickness="0,0,0,0">
                                <WrapPanel>
                                    <ToggleButton Margin="20 10 0 10"  VerticalAlignment="Center" IsChecked="{Binding Path=IsExpanded,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
                                                  OverridesDefaultStyle="True" Template="{StaticResource ExpanderToggleButton}" />
                                    <ContentPresenter  Margin="20 10 0 10"  VerticalAlignment="Center"  ContentSource="Header"  RecognizesAccessKey="True" />
                                </WrapPanel>
                            </Border>
                            <ContentPresenter Grid.Row="1"></ContentPresenter>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsExpanded" Value="true">
                                <Setter TargetName="ContentRow" Property="Height" Value="{Binding ElementName=Content, Path=DesiredHeight}" />
                            </Trigger>
                            <Trigger Property="IsExpanded" Value="false">
                                <Setter TargetName="border" Property="BorderThickness" Value="0 0 0 1" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="GroupHeaderStyle" TargetType="{x:Type GroupItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type GroupItem}">
                        <Expander IsExpanded="False" Style="{StaticResource ExpanderStyle}">
                            <Expander.Header>
                                <TextBlock Text="{Binding Path=Name}"/>
                            </Expander.Header>
                            <Expander.Content>
                                <ItemsPresenter />
                            </Expander.Content>                            
                        </Expander>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Window.Resources>
    <Grid>        
        <DataGrid  Name="dataGridStudent"  AutoGenerateColumns="False" RowHeaderWidth="0" HorizontalGridLinesBrush="{x:Null}" VerticalGridLinesBrush="{x:Null}" Background="{x:Null}">
            <DataGrid.GroupStyle>
                <GroupStyle ContainerStyle="{StaticResource GroupHeaderStyle}">
                    <GroupStyle.Panel>
                        <ItemsPanelTemplate>
                            <DataGridRowsPresenter/>
                        </ItemsPanelTemplate>
                    </GroupStyle.Panel>
                </GroupStyle>
            </DataGrid.GroupStyle>
            <DataGrid.Columns>
                <DataGridTemplateColumn Header="Name" Width="*">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Path=Name}" HorizontalAlignment="Center"></TextBlock>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>

                <DataGridTextColumn Header="StudentId" Binding="{Binding Path=StudentId}" Width="*"></DataGridTextColumn>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>
wpf DataGrid分组
01-13
wpf DataGrid大数据通过模板选择器进行不同样式筛选，下拉分组，性能优化，支持几千条数据加载，低卡顿
示例:WPF中DataGrid设置多级分组样式
HeBianGu的博客
06-17 870
最后，设置DataGrid的GroupStyle，示例中定义了二级分组，所以需要设置两个GroupStyle。首先，定义一个支持分组排序的CollectionViewSource资源。然后，绑定到DataGrid的ItemsSource上。
WPF之DataGrid
Major_S的博客
08-14 499
【代码】WPF之DataGrid。
浅谈WPF之DataGrid过滤，分组，排序
zls365365的博客
01-02 659
使用过Excel的用户都知道，Excel可以方便的对数据进行分组，过滤，排序等操作，而在WPF中，默认提供的DataGrid只有很简单的功能，那么如何才能让我们开发的DataGrid，也像Excel一样具备丰富的客户端操作呢？今天就以一个简单的小例子，简述如何在WPF中实现DataGrid的过滤，筛选，排序等功能。仅供学习分享使用，如有不足之处，还请指正。涉及知识点在本示例中，涉及知识点如下所示：...
C# WPF DataGrid 分组（Group）
博客已退休
02-15 8856
C# WPF DataGrid 分组（Group） 效果如图，每个列的名字可以自定义。我随便用了”File”和”Attachment Name”。 在Window的Resources里面设置Style, GroupHeaderStyle： <Style
wpf dataGrid 分组
05-03
wpf dataGrid 分组,能展开与折叠
wpf datagrid分组
weixin_43632687的博客
11-05 1397
<Window x:Class="WpfApplication7.MainWindow" xmlns="<a class="vglnk" href="http://schemas.microsoft.com/winfx/2006/xaml/presentation" rel="nofollow"><span>http</span><s...
wpf DataGrid 分组
weixin_53370274的博客
05-11 1282
转载：https://www.cnblogs.com/sjqq/p/8343335.html wpf DataGrid 分组 //xaml <Page.Resources> <Style x:Key="GroupHeaderStyle" TargetType="{x:Type GroupItem}"> <Setter Property="Template"> <Setter.Value
WPF之DataGrid应用
热门推荐
sanjiawan的专栏
09-18 9万+
前几天打算尝试下DataGrid的用法，起初以为应该很简单，可后来被各种使用方法和功能实现所折磨。网络上的解决方法太多，但也太杂。没法子，我只好硬着头皮阅览各种文献资料，然后不断的去尝试，总算小有成果。因此，把我学到的和大家分享一下，相信这篇文章会让你再很短的时间内学会DataG
WPF DataGrid分组和排序
weixin_34392843的博客
09-12 1958
之前一直用的Dev的GridControl，控件自带分组排序啥的。今天试了下在wpf自带的Datagrid控件上实现分组和排序。 Datagrid上实现这些功能主要用到CollectionViewSource。CollectionViewSource有对数据进行分组和排序过滤的功能。 <CollectionViewSource x:Key="cvsList" So...
WPF 分页DataGrid 分页控件的实现
06-18
8. **自定义外观**：根据需求，你可以自定义DataGrid的样式，以及分页控件的外观和交互。 以上就是使用C#在WPF中实现DataGrid分页的基本流程。实际项目中可能还需要考虑其他细节，如错误处理、性能优化等。在wpf....
wpf DataGrid分组、排序、筛选
02-02
针对 DataGrid 控件，对数据进行分组、排序和筛选....
wpf datagrid实现树结构.rar
11-01
wpf datagrid实现树结构
WPF DataGrid合并单元格（模板列嵌套DataGrid)
09-22
WPF中的DataGrid合并单元格，模板列内嵌套DataGrid，非真正合并
C# WPF DataGrid控件实现三级联动
10-27
在C# WPF开发中，DataGrid控件是用于展示数据集合的重要组件，它提供了丰富的功能，如排序、分页、编辑等。本教程将详细讲解如何利用DataGrid实现三级联动的效果，即在一个DataGrid中更改某一项时，关联的其他两个...
wpf datagrid控件
12-02
自定义WPF DataGrid通常是为了满足特定需求，比如增加新的控件样式、添加自定义排序和过滤功能、优化性能或者改进用户体验。在这个项目中，可能包含以下特性： - **扩展列类型**：可能添加了自定义列类型，如日期...
WPF DataGrid控件中的动态列（第1部分）
04-11
在Windows Presentation Foundation (WPF) 中，`DataGrid`控件是用于展示表格数据的强大工具。在实际开发中，我们经常遇到数据结构不固定或需要根据用户需求动态改变列显示的情况。本篇将深入探讨如何在`WPF ...
【愚公系列】2023年10月 WPF控件专题 DataGrid控件详解
时光隧道
08-12 5万+
WPF控件是Windows Presentation Foundation（WPF）中的基本用户界面元素。它们是可视化对象，可以用来创建各种用户界面。WPF控件可以分为两类：原生控件和自定义控件。原生控件是由Microsoft提供的内置控件，如Button、TextBox、Label、ComboBox等。这些控件都是WPF中常见的标准用户界面元素。自定义控件则允许开发人员使用XAML和C#等编程语言来创建个性化的用户界面元素。自定义控件可以根据需求提供更多的功能和自定义化选项，以及更好的用户体验。
WPF应用实战开发指南 - 如何实现DataGrid分组显示及嵌套明细展示效果
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
04-22 887
本文主要介绍在WPF应用中如何实现DataGrid的分组显示以及嵌套明细展示效果，欢迎下载一些三方组件体验~
如何设置wpf datagrid控件失去焦点后选中行的样式
最新发布
09-30
在WPF中，你可以通过定制`DataGrid`的`SelectionChanged`事件以及`CellStyle`属性来设置当Datagrid失去焦点时选中行的样式。以下是步骤： 1. 首先，在XAML中为`DataGrid`添加一个资源样式，通常会创建一个名为`SelectedRowStyle`的ResourceDictionary： ```xml <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Style TargetType="DataGridRow" x:Key="SelectedRowStyle"> <Style.Triggers> <Trigger Property="IsSelected" Value="True"> <!-- 设置选定行的背景色、字体颜色等 --> <Setter Property="Background" Value="LightBlue"/> <Setter Property="Foreground" Value="Black"/> </Trigger> </Style.Triggers> </Style> </ResourceDictionary> ``` 2. 然后，在需要应用这个样式的`DataGrid`上绑定这个资源： ```xml <DataGrid Style="{StaticResource SelectedRowStyle}" ... /> ``` 3. 当`DataGrid`失去焦点时，`IsSelected`属性将变为`False`，触发了`SelectedRowStyle`中的`Trigger`，对应的样式就会应用到未选中的行。 如果你想要在失去焦点时特定的行为发生，比如清空高亮，可以在`LostFocus`事件处理程序中手动清除选中状态： ```csharp dataGrid.LostFocus += (sender, e) => dataGrid.SelectedItem = null; ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值