WPF DataGrid table表格强大功能,样式的实现之合计栏

已于 2023-05-06 20:11:09 修改
阅读量3.9k 收藏 31
点赞数 9
分类专栏： wpf相关 文章标签： wpf c# 前端
于 2023-02-03 11:12:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40127027/article/details/128861564
版权
本文展示了如何通过自定义样式和XAML代码实现WPFDataGrid的合计栏功能，以及标题头的搜索功能。代码示例中详细解释了合计栏的实现流程，包括ItemsControl的使用和宽度计算逻辑，同时也讨论了用户拖动标题头后的排序处理和宽度自适应。文章还提及了性能分析和适用环境，适用于需要对WPFDataGrid进行增强功能开发的开发者。
摘要由CSDN通过智能技术生成

最近准备做几期wpf datagrid优化功能的博客,包括合计栏,标题头带搜索功能,标题头带感叹号的提示框,ui优化等等.本期展示合计栏,后续再添加其他功能代码

1.效果展示

实现wpf datagrid的合计栏,标题头搜索,分页,自定义滚动条, 话不多说 先上效果
合计栏效果展示
在这里插入图片描述
标题头筛选UI还未调整,请忽略

2.合计栏实现流程及代码

(1)重写datagrid样式,在datagrid底部添加一个ItemsControl,用于展示合计的项目同时用ScrollViewer包裹ItemsControl,使之能跟随滚动条滚动
    <Style x:Key="DesignTotalDataGrid" TargetType="{x:Type controls:DataGrid}">
        <Setter Property="IsReadOnly" Value="True"/>
        <Setter Property="Background" Value="#FFFAFAFA" />
        <Setter Property="Foreground" Value="#DD000000" />
        <Setter Property="BorderBrush" Value="#1F000000" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="AutoGenerateColumns" Value="False" />
        <Setter Property="CanUserAddRows" Value="False" />
        <Setter Property="FontSize" Value="13" />
        <Setter Property="GridLinesVisibility" Value="Horizontal" />
        <Setter Property="HorizontalGridLinesBrush">
            <Setter.Value>
                <MultiBinding Converter="{StaticResource RemoveAlphaBrushConverter}">
                    <Binding Path="BorderBrush" RelativeSource="{RelativeSource Self}" />
                    <Binding Path="Background" RelativeSource="{RelativeSource Self}" />
                </MultiBinding>
            </Setter.Value>
        </Setter>
        <Setter Property="VerticalGridLinesBrush" Value="{Binding HorizontalGridLinesBrush, RelativeSource={RelativeSource Self}}" />
        <Setter Property="RowDetailsVisibilityMode" Value="VisibleWhenSelected" />
        <Setter Property="HeadersVisibility" Value="Column" />
        <Setter Property="ScrollViewer.CanContentScroll" Value="true" />
        <Setter Property="ScrollViewer.PanningMode" Value="Both" />
        <Setter Property="Stylus.IsFlicksEnabled" Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type controls:DataGrid}">
                    <Border
                        Padding="{TemplateBinding Padding}"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CornerRadius="{TemplateBinding assist:DataGridAssist.CornerRadius}"
                        SnapsToDevicePixels="True"
                        >
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition Height="auto"/>
                            </Grid.RowDefinitions>
                            <ScrollViewer x:Name="DG_ScrollViewer" Focusable="false">
                                <ScrollViewer.Template>
                                    <ControlTemplate TargetType="{x:Type ScrollViewer}">
                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="Auto" />
                                                <ColumnDefinition Width="*" />
                                                <ColumnDefinition Width="Auto" />
                                            </Grid.ColumnDefinitions>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="*" />
                                                <RowDefinition Height="Auto" />
                                            </Grid.RowDefinitions>
                                            <Border
                                            Grid.Row="0"
                                            Grid.Column="1"
                                            Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.Column}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}">
                                                <DataGridColumnHeadersPresenter x:Name="PART_ColumnHeadersPresenter" />
                                            </Border>
                                            <ScrollContentPresenter
                                            x:Name="PART_ScrollContentPresenter"
                                            Grid.Row="1"
                                            Grid.Column="0"
                                            Grid.ColumnSpan="2"
                                            CanContentScroll="{TemplateBinding CanContentScroll}" />
                                            <ScrollBar
                                            x:Name="PART_VerticalScrollBar"
                                            Grid.Row="1"
                                            Style="{StaticResource ScrollBarStyle}"
                                            Grid.Column="2"
                                            Maximum="{TemplateBinding ScrollableHeight}"
                                            Orientation="Vertical"
                                            ViewportSize="{TemplateBinding ViewportHeight}"
                                            Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                                            Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" />

                                            <Grid Grid.Row="3" Grid.Column="1">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="{Binding NonFrozenColumnsViewportHorizontalOffset, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" />
                                                    <ColumnDefinition Width="*" />
                                                </Grid.ColumnDefinitions>
                                                <ScrollBar
                                                x:Name="PART_HorizontalScrollBar"
                                                Grid.Column="1"
                                                Maximum="{TemplateBinding ScrollableWidth}"
                                                Orientation="Horizontal"
                                                Style="{StaticResource ScrollBarStyle}"
                                                ViewportSize="{TemplateBinding ViewportWidth}"
                                                Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                                                Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" />
                                            </Grid>
                                        </Grid>
                                    </ControlTemplate>
                                </ScrollViewer.Template>
                                <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                            </ScrollViewer>
                            <!--合计栏添加开始-->
                            <Border BorderThickness="0 1 0 0" BorderBrush="#1F000000"  Grid.Row="1"  Effect="{StaticResource EffectShadow2}">
                                <Grid>
                                    <ScrollViewer x:Name="scrollViewer" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden">
                                        <ItemsControl x:Name="itemsControl">
                                            <ItemsControl.ItemsPanel>
                                                <ItemsPanelTemplate>
                                                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center"/>
                                                </ItemsPanelTemplate>
                                            </ItemsControl.ItemsPanel>
                                            <ItemsControl.ItemTemplate>
                                                <DataTemplate>
                                                    <Border  Height="{Binding RelativeSource={RelativeSource Self}, Path=(assist:DataGridAssist.CellHeight)}"  Width="{Binding Width}">
                                                        <TextBlock Text="{Binding Content}" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="3 0"/>
                                                    </Border>
                                                </DataTemplate>
                                            </ItemsControl.ItemTemplate>
                                        </ItemsControl>
                                    </ScrollViewer>
                                </Grid>
                            </Border>

                        </Grid>
                    </Border>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsGrouping" Value="true" />
                </MultiTrigger.Conditions>
                <Setter Property="ScrollViewer.CanContentScroll" Value="false" />
            </MultiTrigger>
        </Style.Triggers>
    </Style>
(2)合计栏中每一项宽度的计算

每一项宽度的计算是一个重点,因为每一项的宽度是随内容变化的,同时用户可以拖拽改变每一列的宽度,每次宽度的改变,都得重新计算,这里请注意Border的宽度 Width=“{Binding Width}”,回到cs代码 进行逻辑实现

public static readonly DependencyProperty TotalItemsProperty =
            DependencyProperty.Register("TotalItems", typeof(object), typeof(DataGrid), new PropertyMetadata(null, TotalItemsCallBack));


        public object OriginItemsSource { get; set; }

        public  object ItemsSources
        {
            get { return (object)GetValue(ItemsSourcesProperty); }
            set { SetValue(ItemsSourcesProperty, value); }
        }

以上代码(来自DataGrid自定义样式类)是合计栏的数据来源,是一个对象,通过后端接口返回的,当然,也可以由前端自己合计,对TotalItems进行赋值即可,赋值方式如下(来自ViewModel业务代码)
在这里插入图片描述

(3)TotalItemsCallBack(合计项赋值后回调)代码分析
        private static void TotalItemsCallBack(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            DataGrid dataGrid = d as DataGrid;
            if (e.NewValue != null && dataGrid.itemsControl != null)
            {
                if (e.NewValue is List<string> totalItems)
                {
                    //数组和对象都要转为数组;
                    //排序问题处理
                    System.Threading.Tasks.Task.Factory.StartNew(() =>
                    {
                        System.Threading.Thread.Sleep(1000);
                        Application.Current.Dispatcher.BeginInvoke((Action)(() =>
                        {
                            List<DataGridTotal> dataGrids = new List<DataGridTotal>();
                            for (int i = 0; i < dataGrid.Columns.Count; i++)
                            {
                                if (dataGrid.Columns[i].Visibility == Visibility.Visible)
                                {
                                    if (totalItems != null && totalItems.Count >= i + 1 && totalItems[i] != null)
                                    {
                                        dataGrids.Add(new DataGridTotal { Width = dataGrid.Columns[i].ActualWidth, Content = totalItems[i], Index = dataGrid.Columns[i].DisplayIndex });
                                    }
                                    else
                                    {
                                        dataGrids.Add(new DataGridTotal { Width = dataGrid.Columns[i].ActualWidth, Content = "-", Index = dataGrid.Columns[i].DisplayIndex });
                                    }

                                }
                            }
                            dataGrids = dataGrids.OrderBy(x => x.Index).ToList();
                            dataGrid.itemsControl.ItemsSource = dataGrids;
                        }));
                    });
                }
                else if(e.NewValue is object obj){
                    System.Threading.Tasks.Task.Factory.StartNew(() =>
                    {
                        System.Threading.Thread.Sleep(1000);
                        Application.Current.Dispatcher.BeginInvoke((Action)(() =>
                        {
                            List<DataGridTotal> dataGrids = new List<DataGridTotal>();
                            for (int i = 0; i < dataGrid.Columns.Count; i++)
                            {
                                if (dataGrid.Columns[i].Visibility == Visibility.Visible)
                                {
                                    var content = "-";
                                    if (obj.GetType().GetProperty(dataGrid.Columns[i].SortMemberPath) != null)
                                    {
                                        content = obj.GetType().GetProperty(dataGrid.Columns[i].SortMemberPath).GetValue(obj, null)?.ToString();
                                    }
                                    dataGrids.Add(new DataGridTotal { Width = dataGrid.Columns[i].ActualWidth, Content = string.IsNullOrEmpty(content) ? "-" : content, Index = dataGrid.Columns[i].DisplayIndex });

                                }
                            }
                            dataGrids = dataGrids.OrderBy(x => x.Index).ToList();
                            dataGrid.itemsControl.ItemsSource = dataGrids;
                        }));
                    });
                }
            }
            else {
                System.Threading.Tasks.Task.Factory.StartNew(() => {
                    System.Threading.Thread.Sleep(1000);
                    Application.Current.Dispatcher.BeginInvoke((Action)(() =>
                    {
                        List<DataGridTotal> dataGrids = new List<DataGridTotal>();
                        for (int i = 0; i < dataGrid.Columns.Count; i++)
                        {
                            if (dataGrid.Columns[i].Visibility == Visibility.Visible)
                            {
                                dataGrids.Add(new DataGridTotal { Width = dataGrid.Columns[i].ActualWidth, Content = "-", Index = dataGrid.Columns[i].DisplayIndex });
                            }
                        }
                        dataGrids = dataGrids.OrderBy(x => x.Index).ToList();
                        dataGrid.itemsControl.ItemsSource = dataGrids;
                    }));
                });
            }
        }

TotalItems赋值时可以是数组,也可以是对象,数组的话需要按照顺序从左到右一次返回;
Width = dataGrid.Columns[i].ActualWidth是宽度的首次计算;
Index = dataGrid.Columns[i].DisplayIndex 是排序的顺序,确保合计的项不会错位;
DataGridTotal类如下:

public class DataGridTotal
    {
        /// <summary>
        /// 内容
        /// </summary>
        public string Content { get; set; }
        /// <summary>
        /// 宽度
        /// </summary>
        public double Width { get; set; }
        /// <summary>
        /// 排序
        /// </summary>
        public int Index { get; set; } 
        /// <summary>
        /// 标题头
        /// </summary>
        public string Header { get; set; }
    }

加入异步是为了减少前端自己合计 数据量大时的卡顿效果

(4)用户拖动标题头,顺序发生改变后逻辑处理

对合计栏的排序进行重新计算

        private void DataGrid_ColumnDisplayIndexChanged(object sender, DataGridColumnEventArgs e)
        {
            if (TotalItems != null)
            {
                List<DataGridTotal> dataGrids = new List<DataGridTotal>();

                if (TotalItems is List<string> items)
                {
                    for (int i = 0; i < Columns.Count; i++)
                    {
                        if (Columns[i].Visibility == Visibility.Visible)
                        {
                            dataGrids.Add(new DataGridTotal { Width = Columns[i].ActualWidth, Content = items[i], Index = Columns[i].DisplayIndex });
                        }
                    }
                }
                else if(TotalItems is object obj)
                {
                    for (int i = 0; i < Columns.Count; i++)
                    {
                        if (Columns[i].Visibility == Visibility.Visible)
                        {
                            var content = "-";
                            if (obj.GetType().GetProperty(Columns[i].SortMemberPath) != null)
                            {
                                content = obj.GetType().GetProperty(Columns[i].SortMemberPath).GetValue(obj, null)?.ToString();
                            }
                            dataGrids.Add(new DataGridTotal { Width = Columns[i].ActualWidth, Content = string.IsNullOrEmpty(content)?"-":content, Index = Columns[i].DisplayIndex });
                        }
                    }
                    
                }

                
                dataGrids = dataGrids.OrderBy(x => x.Index).ToList();
                itemsControl.ItemsSource = dataGrids;
            }
            else {
                List<DataGridTotal> dataGrids = new List<DataGridTotal>();
                for (int i = 0; i < Columns.Count; i++)
                {
                    if (Columns[i].Visibility == Visibility.Visible)
                    {
                        dataGrids.Add(new DataGridTotal { Width = Columns[i].ActualWidth, Content = "-", Index = Columns[i].DisplayIndex });
                    }
                }
                dataGrids = dataGrids.OrderBy(x => x.Index).ToList();
                itemsControl.ItemsSource = dataGrids;
            }
            
        }
(5)合计栏宽度自适应

内容发生改变,列宽自动撑开后合计栏宽度的自适应,用户拖动列的宽度后,合计栏的自适应

private void OwnScrrow_ScrollChanged(object sender, ScrollChangedEventArgs e)
        {
            /*
            Console.WriteLine("----------------------------");
            Console.WriteLine("ScrollableWidth:"+ownScrrow.ScrollableWidth);
            Console.WriteLine("ExtentWidth:"+ownScrrow.ExtentWidth);
            Console.WriteLine("VerticalOffset:" + ownScrrow.VerticalOffset);
            Console.WriteLine("HorizontalOffset:" + ownScrrow.HorizontalOffset);
            */
            DataGrid_ColumnDisplayIndexChanged(null, null);

            /*
            if (ownScrrow.ScrollableWidth != horOffset)
            {
                horOffset = ownScrrow.ScrollableWidth;
                //宽度发生改变 通知滚动条重新渲染
                Console.WriteLine(horOffset);
                DataGrid_ColumnDisplayIndexChanged(null, null);
            } 
            */
            scrollViewer.ScrollToHorizontalOffset((sender as ScrollViewer).HorizontalOffset);
        }

3.性能分析

windows xp(客户那里找来的,估计年龄比我还大) 256m内存运行流畅,高于此配置均能完美运行

4.代码

gitee地址

Ryannn_NN
关注
专栏目录
Wpf DataGrid 合计行，并在最下方
08-23
wpf的DataGrid中，添加某一列的合计，并在最下方固定显示。本列子不使用ToolKit（有3.5和4.0的限制），添加一个类，重写DataGrid。可以在DataGrid上下左右绑定一个DataGrid，类似Footer属性。示例可直接运行，简单易懂。 （思路：两个DataGrid（mainDG，bottomDG），bottomDG的左右边binding 主表mainDG。并bottomDG绑定数据源（只有一行（合计的值）），），合计行的列宽可随着mainDG的改变而改变。
WPF DataGrid 添加合计行并始终显示在底部代码
12-14
找了好长时间,终于找到wpf DataGrid添加合计行并始终显示在底部,并带有DataGrid 样式(隔行变色,鼠标移动变色,选中行变色)
wpf datagrid 绑定datatable数据
最新发布
MaggieWon
09-06 268
【代码】wpf datagrid 绑定datatable数据。
WPF中实现Table布局控件
u013319633的博客
03-25 1471
相信很多做WPF开发的小伙伴都遇到过表格类的需求，虽然现有的Grid控件也能实现，但是使用起来的体验感并不好，比如要实现一个Excel中的表格效果，估计你能想到的第一个方法就是套Border控件，用这种方法你需要控制每个Border的边框，并且在一堆Bordr中找到Grid.Row，Grid.Column来确定位置，明明很简单的一个功能，硬是耗费了大量时间。Grid的这种设计虽然功能很强大，但是同时也导致了操作繁琐可读性非常差的问题。
WPF篇（18）-DataGrid数据表格控件+ComboBox下拉框控件
一个人的江湖
08-14 1530
第二个则绑定了一个数据源，并在Xaml中指定了DisplayMemberPath属性显示Person的Name，最后在后端代码中，依然使用SelectedItem 属性获取当前选中项，转化成Person，以获取实际的选中数据。ComboBox表示带有下拉列表的控件，实际上可以把它看成两个部分组成，一个类似TextBox文本输入框，所以它有一个Text文本属性，用于获取ComboBox框的文本值，另一个是类似ListBox的列表框，用于显示ComboBox绑定的所有数据源。这样的话，当鼠标双击时会报错。
ASP.NET中为DataGrid添加合计字段
weixin_33998125的博客
03-05 126
ASP.NET中为DataGrid添加合计字段 作者：nxyc_twz@163.com　发布时间：2005-05-28　来源：ASPCOOL ...
WPF 计算DataGrid每一列的合计数
Q_MingTao
07-31 2606
WPF 计算DataGrid每一列的合计数 作者：邱名涛 撰写时间：2019 年 8 月 8 日 XAML: WindowStartupLocation="CenterScreen" Loaded="Window_Loaded"> <StackPanel Orientation="Horizontal" VerticalAlignment="Center"> ...
C# wpf中DataGrid 支持汇总行
weixin_33971205的博客
04-23 867
最近有一个需求，需要汇总金额，份额等字段。我们使用的是原生的WPF控件，自己开发了一套Template。而没有使用比较成熟的第三方控件。所以这个功能得自己开发。并且要做成控件层次的功能。 当然也可以这样做，在ItemSource数据中手动汇总一行并显示。但这样做是纯业务层次的东西。且每个不同的界面。要做不同的业务逻辑处理。太LOW。 思路： 我们先来看下WPF原生DataGrid的模板，发...
c# WPF DataGrid 底部汇总行合计
01-20
在C# WPF环境中，DataGrid控件是一个非常强大的数据展示工具，它可以用来显示和编辑表格数据。在处理大量数据时，我们经常需要在底部添加一个汇总行来展示各项数值的总计，这在商业应用中尤其常见。本篇文章将详细...
wpf datagrid实现树结构.rar
11-01
WPF的DataGrid控件默认并不支持树形结构，但可以通过自定义模板和数据绑定来实现这一功能。这通常涉及到对HierarchicalDataTemplate的使用，该模板允许DataGrid展示具有层级关系的数据源。 `Person.cs`文件可能是...
在WPF DataGrid中导出到Excel功能
04-11
在WPF（Windows Presentation Foundation）开发中，DataGrid控件是一种强大的数据展示工具，它可以方便地展示和操作数据。在实际应用中，有时我们需要将DataGrid中的数据导出到Excel文件，以便进行进一步的数据分析...
C# WPF DataGrid 底部汇总行合计
03-24
DataGrid 底部合计，在DataGrid 的外部，底部横向滚动条的下面做的汇总。
WPF datagrid foot合计行源代码
09-24
WPF datagrid foot合计行源代码，可以直接运行查看消费，可以参考源码自己扩展，是正真的foot，不是第二个datagrid
WPF中DataGrid自定义实现最后一行下面跟一个汇总行，类似MT4
08-29
WPF中DataGrid自定义实现最后一行下面跟一个汇总行，类似MT4
WPF DataGrid绑定DataTable demo
07-21
WPF DataGrid绑定DataTable demo
Datagridview合计行
08-05
Datagridview合计行，会总行，非常不错，源码代码：调用代码：Maticsoft.Datagridview.SummaryDataGridView.ShowSummary(折旧核算表DataGridView, true, "合计", true, new string[] { "资产原值", "月度折旧额", "预计净残值", "累计折旧" });
WPF 分页DataGrid 分页控件的实现
06-18
WPF DataGrid 控件是一个强大的表格展示工具，它可以方便地展示和操作数据，而添加分页功能则可以提高应用的性能，减少内存占用，并提供更好的用户体验。本文将详细介绍如何在WPF中使用C#实现DataGrid的分页功能。 ...
WPF之DataGrid应用
热门推荐
sanjiawan的专栏
09-18 9万+
前几天打算尝试下DataGrid的用法，起初以为应该很简单，可后来被各种使用方法和功能实现所折磨。网络上的解决方法太多，但也太杂。没法子，我只好硬着头皮阅览各种文献资料，然后不断的去尝试，总算小有成果。因此，把我学到的和大家分享一下，相信这篇文章会让你再很短的时间内学会DataG
C# WPF DataGrid底部汇总行合计2
xiongliuyun的博客
03-24 647
datagrid 底部汇总行合计，在datagrid 的外部，底部横向滚动条的下面进行的统计。 详情可下载： 。。。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值