具有RichText、RowDetails、Grouping、Filter等功能的WPF DataGrid！

于 2024-08-06 10:50:52 发布
收藏
点赞数
分类专栏： CSharp.NET 文章标签： wpf DataGrid
原文链接：https://www.codeproject.com/Tips/5381772/WPF-DataGrid-with-RichText-RowDetails-Grouping-Fil
版权

目录

介绍

背景

使用代码

概述

分组和筛选

RowDetails 区域

超链接扩展

文本搜索和过滤

MVVM

集合视图和参数命令示例

使用应用程序

上下文菜单

致谢/参考资料

介绍

本文和代码片段展示了DataGrid的RowDetails、Grouping和Filter如何使用xml文件作为数据源。

背景

该项目基于MS Learn示例。

使用代码

概述

分组和筛选

在MS Learn示例[1]中进行了详细介绍和解释。

我添加了“简单文本搜索”和“添加新行”按钮。

RowDetails 区域

这是在ResourceDictionary中定义的。

<ResourceDictionary 
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:local="clr-namespace:DataGridUC1"
                xmlns:local2="clr-namespace:DataGridUC1.Controls" 
                xmlns:b="http://schemas.microsoft.com/xaml/behaviors" 
                xmlns:ViewModel="clr-namespace:DataGridUC1.ViewModel">

    <Style x:Key="DataGridCellStyle" 
         TargetType="{x:Type DataGridCell}">
        <Style.Triggers>
            <Trigger Property="IsSelected"
               Value="True">
                <Setter Property="BorderBrush" Value="Transparent"/>
                <Setter Property="Foreground"
                Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
                <Setter Property="Background" Value="Yellow"/>
            </Trigger>
        </Style.Triggers>
    </Style>

    <DataTemplate x:Key="DataGridPlusRowDetailsTemplate">
        <StackPanel HorizontalAlignment="Stretch" 
                    Height="225" Orientation="Vertical" Width="NaN" Margin="31,0,0,0" 
                    Background="{DynamicResource {x:Static SystemColors.InfoBrushKey}}">
            
            <Label Content="Group" HorizontalAlignment="Left" 
                   FontSize="14" FontWeight="Bold" />
            <TextBox x:Name="Item"
                   Text="{Binding Item, Mode=TwoWay, 
                            UpdateSourceTrigger=PropertyChanged}"
                    Margin="5,1,3,2"
                    IsEnabled="True" ToolTip="Item" 
                    HorizontalAlignment="Left" MinWidth="50" />
            <Label Content="Note" HorizontalAlignment="Left" 
                    FontSize="14" FontWeight="Bold" />
            <TextBox x:Name="Note"
                    Margin="5,1,3,2"
                    Text="{Binding Note, Mode=TwoWay, 
                            UpdateSourceTrigger=PropertyChanged}"
                    ToolTip="Note" IsEnabled="True" MinWidth="50" />

            <StackPanel Orientation="Horizontal" Height="32" 
                    VerticalAlignment="Stretch" 
                    HorizontalAlignment="Left" Width="500" >
                <Label Content="Check" HorizontalAlignment="Left" 
                        VerticalAlignment="Bottom" HorizontalContentAlignment="Center" 
                        VerticalContentAlignment="Center" 
                        FontSize="14" FontWeight="Bold" />
                <CheckBox
                        Margin="10,8,3,2"
                        IsChecked="{Binding Check, Mode=TwoWay, 
                                UpdateSourceTrigger=PropertyChanged}"
                        ToolTip="CheckBox" IsEnabled="True" 
                        AutomationProperties.HelpText="Check" 
                        HorizontalAlignment="Left" VerticalAlignment="Center" 
                        VerticalContentAlignment="Center" />

                <Label Content="Rating" HorizontalAlignment="Center" 
                       VerticalAlignment="Bottom" HorizontalContentAlignment="Right" 
                       VerticalContentAlignment="Center" Width="184" 
                       FontSize="14" FontWeight="Bold" />
                <ComboBox
                        Margin="22,10,3,2"
                        Text="{Binding Rating, Mode=TwoWay, 
                                UpdateSourceTrigger=PropertyChanged}"
                        ToolTip="ComboBox" 
                        IsEnabled="True" 
                        HorizontalAlignment="Right" VerticalAlignment="Bottom" 
                        Width="88" HorizontalContentAlignment="Center" 
                        VerticalContentAlignment="Center" >
                        <ComboBoxItem Content="Average"/>
                        <ComboBoxItem Content="Good"/>
                        <ComboBoxItem Content="Excellent"/>
                </ComboBox>
            </StackPanel>

            <Label Content="Link" HorizontalAlignment="Left" 
                   FontSize="14" FontWeight="Bold" />

             <TextBlock FontFamily="Segoe UI" FontSize="16">
                <Hyperlink NavigateUri="{Binding Text, ElementName=LinkTB, 
                    Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                           local2:HyperlinkExtensions.IsExternal="true">
                           --> Click here to fire the hyperlink 
                </Hyperlink>
            </TextBlock>

            <TextBox x:Name="LinkTB"
                Margin="5,1,3,2"
                Text="{Binding Link, Mode=TwoWay, 
                        UpdateSourceTrigger=PropertyChanged}"
                ToolTip="Link" IsEnabled="True" 
                Foreground="{DynamicResource {x:Static 
                        SystemColors.InfoTextBrushKey}}" 
                Background="{DynamicResource {x:Static 
                        SystemColors.ControlLightLightBrushKey}}" />

        </StackPanel>
    </DataTemplate>

</ResourceDictionary>

“行详细信息”包含用于编辑当前行的文本框和用于触发相关超链接的“测试”按钮。

超链接扩展

此扩展基于[3]，并在Row Details区域中使用，如上所述。

namespace DataGridUC1.Controls
{
    // https://stackoverflow.com/questions/10238694/example-using-hyperlink-in-wpf

    public static class HyperlinkExtensions
    {
        public static bool GetIsExternal(DependencyObject obj)
        {
            return (bool)obj.GetValue(IsExternalProperty);
        }

        public static void SetIsExternal(DependencyObject obj, bool value)
        {
            obj.SetValue(IsExternalProperty, value);
        }
        public static readonly DependencyProperty IsExternalProperty =
            DependencyProperty.RegisterAttached("IsExternal", typeof(bool), 
                typeof(HyperlinkExtensions), 
                new UIPropertyMetadata(false, OnIsExternalChanged));

        private static void OnIsExternalChanged(object sender, 
            DependencyPropertyChangedEventArgs args)
        {
            var hyperlink = sender as Hyperlink;

            if ((bool)args.NewValue)
                hyperlink.RequestNavigate += Hyperlink_RequestNavigate;
            else
                hyperlink.RequestNavigate -= Hyperlink_RequestNavigate;
        }

        private static void Hyperlink_RequestNavigate(object sender, 
            System.Windows.Navigation.RequestNavigateEventArgs e)
        {
            //Process.Start(new ProcessStartInfo(e.Uri.AbsoluteUri));
            //e.Handled = true;

// https://www.codeproject.com/Questions/5380961/How-do-I-fix-net-8-process-start-url-issue
            Hyperlink link = (Hyperlink)e.OriginalSource;
            Process? process = Process.Start(new ProcessStartInfo(link.NavigateUri.AbsoluteUri)
            {
                UseShellExecute = true
            });

            process!.WaitForExit();
            e.Handled = true;
        }
    }
}

文本搜索和过滤

MS Learn示例用于过滤选中/未选中的任务的方法激发了我创建以下超级简单的文本搜索。

使用FilterEventArgs，我们获得每个任务/行的DataRowView，这允许我们对该方法使用简单的if语句。因此，逻辑存在于VM中。

MVVM

为了将对象/控件从 View 传递给 ViewModel，我们使用Interaction.Triggers和ParameterCommand。

ViewModel 还包含用于读取/写入XML数据的逻辑。

private void LoadXML()
{
    _ds.Clear();
    _ds.ReadXml(_data.FullName);
}

// ds.WriteXml(path);
private void WriteXML()
{
    _ds.AcceptChanges();

    _ds.WriteXml(path);
MessageBox.Show("xml data saved. ");
}

筛选器和文本搜索的逻辑

private void CompleteFilter_Changed(object sender, RoutedEventArgs e)
{
    if (sender != null)
    {
        cbCompleteFilter = (bool)((CheckBox)sender).IsChecked;
    }
    // Refresh the view to apply filters.
    cvs.View.Refresh();
}

private void CollectionViewSource_Filter(object sender, FilterEventArgs e)
{
    //Task t = e.Item as Task;
    DataRowView drv = e.Item as DataRowView;

    if (e.Item != null)
    {
        drv = (DataRowView)e.Item;

        if (drv != null && cbCompleteFilter != null)
        // If filter is turned on, filter completed items.
        {
            // if (this.cbCompleteFilter.IsChecked == true && t.Complete == true)
            if (this.cbCompleteFilter == true && (bool)drv.Row["Check"] == true)
            {
                e.Accepted = false;
            }
            else
                e.Accepted = true;
        }
    }
}

private void SearchBox_Changed(object sender, RoutedEventArgs e)
{
    if (sender != null)
    {
        searchBox = (TextBox)sender;
    }
    // Refresh the view to apply filters.
    cvs.View.Refresh();
}

private void CollectionViewSource_Search(object sender, FilterEventArgs e)
{
    DataRowView drv = e.Item as DataRowView;
    if (e.Item != null)
    {
        drv = (DataRowView)e.Item;

        if (drv != null && searchBox != null
            && this.cbCompleteFilter == false)
        {
            if (drv.Row["Item"].ToString().ToLower().Contains(searchBox.Text.ToLower()) == false
                && drv.Row["Note"].ToString().ToLower().Contains(searchBox.Text.ToLower()) == false)
            {
                e.Accepted = false;
            }
            else
                e.Accepted = true;
        }

        if (drv != null && searchBox != null
            && this.cbCompleteFilter == true)
        {
            if (drv.Row["Item"].ToString().ToLower().Contains(searchBox.Text.ToLower()) == false
                && drv.Row["Note"].ToString().ToLower().Contains(searchBox.Text.ToLower()) == false
                || (bool)drv.Row["Check"] == true)
            {
                e.Accepted = false;
            }
            else
                e.Accepted = true;
        }
    }
}

Properties、ICommands和ParameterCommands始终以相同的方式工作，因此在下面显示一个示例就足够了。

集合视图和参数命令示例

我们使用文本搜索功能使其更清晰。

我们在XAML文件中使用Interaction.Triggers。这意味着每次当CollectionView是Refreshed时，都会处理过滤器。

当我们将Ds.Credits (表名)绑定为CollectinViewSource时，我们从XML文件中获取数据。

CollectionViewType是ListCollectionView。

<CollectionViewSource x:Key="cvsTasks" Source="{Binding Ds.Credits}"
                      CollectionViewType="ListCollectionView" >

    <CollectionViewSource.SortDescriptions>

        <scm:SortDescription PropertyName="Item"/>
        <scm:SortDescription PropertyName="Check" />
        <!--<scm:SortDescription PropertyName="DueDate" />-->

    </CollectionViewSource.SortDescriptions>

    <CollectionViewSource.GroupDescriptions>
        <PropertyGroupDescription PropertyName="Item"/>
        <PropertyGroupDescription PropertyName="Check"/>
    </CollectionViewSource.GroupDescriptions>

    <b:Interaction.Triggers>
        <b:EventTrigger EventName= "Filter">
            <b:InvokeCommandAction Command="{Binding
                        ParameterCmdFilter, Mode=OneWay}"
                CommandParameter="{Binding cvsTasks,
                            RelativeSource={RelativeSource
                                AncestorType={x:Type CollectionViewSource}}}"
                            PassEventArgsToCommand="True" />
        </b:EventTrigger>
        <b:EventTrigger EventName= "Filter">
            <b:InvokeCommandAction Command="{Binding
                        ParameterCmdSearch, Mode=OneWay}"
                CommandParameter="{Binding cvsTasks,
                            RelativeSource={RelativeSource
                                AncestorType={x:Type CollectionViewSource}}}"
                            PassEventArgsToCommand="True" />
        </b:EventTrigger>
    </b:Interaction.Triggers>

</CollectionViewSource>

对于文本搜索，使用EventTrigger EventName= “Filter”，将调用Command ParameterCmdSearch，并且CommandParameter是cvsTasks（源Ds.Credits的密钥）。

然后，ParameterCmdSearch调用CollectionViewSource_Search。因此，我们将每个DataRow作为参数获取。

搜索TextBox的内容与另一个参数命令一起传递。

搜索string被转换ToLower，因此我们忽略UpperCase。

<TextBox x:Name="SearchBox"
    Margin="5,1,3,2"
    IsEnabled="True" ToolTip="Item" HorizontalAlignment="Left"
        MinWidth="120" FontSize="14" AcceptsReturn="True"
        MaxLines="1" >

    <b:Interaction.Triggers>
        <b:EventTrigger EventName= "TextChanged">
            <b:InvokeCommandAction Command="{Binding
                      ParameterCmdSearchBox, Mode=OneWay}"
                CommandParameter="{Binding ElementName= SearchBox,
                    Mode=OneWay}"/>
        </b:EventTrigger>
    </b:Interaction.Triggers>

</TextBox>

使用应用程序

当您启动应用程序时，DataGrid 应填充Credits。

选择一行后，RowDetails将展开。

您可以在RowDetails区域中编辑当前行，并测试触发超链接。

DataGrid 下方的按钮是：

使用“删除组”，您可以获得正常的 DataGrid 装备。

按组/状态分组可恢复分组装备。

“添加新行”和“保存积分”按其名称所示执行。

可以同时使用文本搜索框和过滤掉选中的项目（用于选中/未选中的行）。

可以使用上下文菜单进行复制和粘贴。

上下文菜单

DataGrid的上下文菜单提供了一些额外的命令/功能，例如切换“组”列可见性或撤销/重做，用于在当前行中进行的编辑。

在RowDetails上的RichTextBox有自己的上下文菜单，该菜单在右键单击时显示。

RichTextBoxFormatBar

以下文字摘自RichTextBoxFormatBar · xceedsoftware/wpftoolkit Wiki ·GitHub的

“RichTextBoxFormatBar是一个上下文格式工具栏，它模仿了Microsoft Office 2010格式设置栏的行为。可以使用RichTextBoxFormatBarManager将其附加到任何Richtextbox控件。您甚至可以创建自己的格式条并改用它，但仍然具有RichTextboxFormatBarManager提供的所有功能。

"RichTextBoxFormatBar是一个上下文文本格式设置工具栏，它将对RichTextBox控件的选定文本应用文本转换。当用户处于选择过程中时，RichTextBoxFormatBar将在选择后释放鼠标时出现。RichTextBoxFormatBar也将在最后一次单击“双击”选择时出现。当显示RichTextFormatBar时，您可以单击要应用于所选文本的任意数量的文本转换。"

致谢/参考资料

https://www.codeproject.com/Tips/5381772/WPF-DataGrid-with-RichText-RowDetails-Grouping-Fil

寒冰屋
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于WPF TreeView我的一点心得
weixin_40029679的博客
08-02 244
ItemsSource="{Binding Children} 对应就是属性children数据。这个配置必须要 绑定ThisName textbolck 的text 显示 然后。然后 关于 treeview 的配置是。文件名是：TreeViewStyle。另外 从数据库获取来后的list操作。
WPF学习（3）- WrapPanel控件（瀑布流布局）+DockPanel控件（停靠布局）
一个人的江湖
08-05 306
WrapPanel控件表示将其子控件从左到右的顺序排列，如果第一行显示不了，则自动换至第二行，继续显示剩余的子控件。提供了3个属性，分别是Orientation代表子控件的排列方向，ItemWidth代表子控件的（最大）宽度，ItemHeight代表子控件的（最大）高度。默认的排列方向是水平方向。
WPF使用Iconfont字符串的操作方法
weixin_40029679的博客
08-05 136
注意这里的地址请填写绝对地址，也就是从根目录下来计算的一直。（如果地址出错，展示的则是方框，无法显示图片）在控件Text=对应的位置写入当前数据的编码即可。3.引入 FontFamily字体类型。2.放入Fonts文件夹下。3.文件属性修改为 资源。
ROS2从入门到精通4-6：路径平滑插件开发案例(以B样条曲线平滑为例)
FRIGIDWINTER的博客
08-05 719
本文详细总结ROS2路径平滑器(Nav2 Smoother)插件开发的范式，并提供基于B样条曲线的路径平滑算法插件实现基础平滑功能，文章结合开发范式、算法原理和实际开发案例加深理解
wpf 环形进度条，自定义控件
sunjay117的专栏
07-25 1410
// CircleProgress.xaml 的交互逻辑。
WPF使用Direct2D绘制曲线
weixin_43434464的博客
08-05 100
WPF使用Direct2D绘制曲线
WPF学习（2）-UniformGrid控件（均分布局）+StackPanel控件（栈式布局）
一个人的江湖
08-05 146
UniformGrid控件使用非常简单方便，通常用于局部的布局。
WPF程序通过CadLib4加载CAD .dwg格式文件
刺眼的博客
08-05 104
1、下载CadLib相关dll文件，主要用到的：WW.dll、WW.Cad.dll、WW.GL.dll。3、创建WPF程序，使用Canvas来加载dwg文件，支持拖动和放大缩小。2、程序中引用dll库。
WPF绘制动态曲线
weixin_43434464的博客
08-05 111
WPF绘制动态曲线
WPF-实现多语言的静态（需重启）与动态切换（不用重启）
rwo_bear的博客
08-05 1043
②资源文件中添加多语言资源。①映射命名空间到XAML。
WPF datagrid 选中某一行后让第一列的checkbox选中
大黄鸭在发光的专栏
08-03 440
在中，定义DataGrid，绑定到一个集合，并定义一个包含CheckBox<Grid></Grid></Window>
[毕业设计]VB环境下电脑销售与财务管理系统开发(ACCESS+源代码+论文).zip
08-05
[毕业设计]VB环境下电脑销售与财务管理系统开发(ACCESS+源代码+论文)
PPO（Proximal Policy Optimization，近端策略优化）算法
08-05
在解答2024年华数杯全国大学生数学建模竞赛的C题“老外游中国”时，虽然PPO（Proximal Policy Optimization，近端策略优化）算法主要是应用于强化学习领域，特别是在解决连续动作空间的策略优化问题上，但在此数学建模竞赛中，它并不直接适用于数据处理、综合评价或路径规划等任务。不过，我们可以从数据处理和决策优化的角度，类比强化学习中的一些思想来构思解题策略。 然而，对于本题而言，我们可以更侧重于数据分析、综合评价模型（如层次分析法AHP、TOPSIS、模糊综合评价等）和路径规划算法（如Dijkstra、A*、遗传算法等）来解决问题。以下是对各个问题的进一步建模思路： 一、问题1建模思路 1.1 数据处理与分析 数据收集与清洗：首先，需要加载所有352个城市的CSV文件，对每个城市的100个景点信息进行数据清洗，去除无效或缺失的关键信息（如评分缺失的景点）。 最高分查找：遍历所有景点，找到最高评分（BS），并统计获评该评分的景点数量。 城市排名：统计每个城市获评BS的景点数量，并根据数量多少进行排序，列出前10个城市。 二、问题2建模思路 2.1 综合评价体系构建
中国城市统计年鉴（1985-2023）
08-05
《中国城市统计年鉴》是全面反映中国城市社会经济发展情况的资料性年刊。《中国城市统计年鉴—2023》收录了2022年全国各级城市社会经济发展等方面的主要统计数据。 本年鉴内容共分四个部分: 第一部分是全国城市行政区划,列有不同区域、不同级别的城市分布情况; 第二、三部分分别是地级以上城市统计资料和县级城市统计资料,具体包括人口、资源环境、经济发展、科技创新、人民生活、公共服务、等方面的数据; 第四部分是附录,为主要统计指标解释。 需要说明的是,从1997年开始,地级以上城市和县级城市分别采用不同的统计制度,有些指标在两类城市之间不具有可比性,故本年鉴将地级以上城市和县级城市统计资料分为独立的两部分。本年鉴所涉及的全国或全部城市统计资料,均未包括香港特别行政区、澳门特别行政区和台湾省。
振中TP900 驱动工具2.2
08-05
振中TP900 驱动工具2.2
大学信息安全试题精选12
08-05
大学信息安全试题精选 【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】：所有源码都经过严格测试，可以直接运行。功能在确认正常工作后才上传。 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】：项目具有较高的学习借鉴价值，也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。鼓励下载和使用，并欢迎大家互相学习，共同进步。
mutiple_pie (8).zip
08-05
mutiple_pie (8).zip
基于pytorch实现的ResUnet对BRATS脑肿瘤多模态分割项目（数据集、源码、训练结果）
最新发布
08-06
基于pytorch实现的ResUnet对BRATS脑肿瘤多模态分割项目（数据集、源码、训练结果） 本项目对BRATS脑肿瘤的四种模态FLAIR、T1w、t1gd、T2w进行融合分割 实现思路，将四种模态进行融合，并且将原始的nii.gz数据转换成npy数据。然后将四种模态的npy数据输入resUnet网络，总共训练了30个epoch，训练集的iou达到了0.84左右 如果想更换数据集进行多模态的训练，更换数据集按照readme文件操作即可
[毕业设计]JAVA大文件分块传输与合并机制(源代码+论文).zip
08-05
[毕业设计]JAVA大文件分块传输与合并机制(源代码+论文)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值