WPF之DataGrid控件使用

迈不过友情╰ 2023-01-05 05:30 1696阅读 0赞

### WPF之DataGrid控件使用 ###

*  一、DataGrid简介
 *  二、DataGrid数据源绑定
 *  三、DataGrid单元格编辑触发事件
 *  四、DataGrid增加删除行
 *  五、DataGrid数据触发器
 *  参考文档

# 一、DataGrid简介 #

据微软官方文档介绍，使用该 DataGrid 控件，可以从许多不同的源（如 SQL 数据库、LINQ 查询或任何其他可绑定的数据源）显示和编辑数据。 列可以显示文本、控件（如 ComboBox ）或任何其他 WPF 内容（如图像、按钮或模板中包含的任何内容）。 可以使用 DataGridTemplateColumn 来显示模板中定义的数据。 下表列出了默认情况下提供的列类型：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Njg0NjY4NQ_size_16_color_FFFFFF_t_70_pic_center]  
下表列出了一些常见的任务 DataGrid ，以及如何完成这些任务。 通过查看相关 API，可以找到详细信息和示例代码。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Njg0NjY4NQ_size_16_color_FFFFFF_t_70_pic_center 1]  
DataGrid中比较常用的属性有**IsReadOnly**，该属性设置DataGrid单元格是否可以编辑，既可以对整个DataGrid进行设置，也可以单独对每一列进行设置。  
**SelectionUnit**属性可以设置当鼠标点击DataGrid时获得焦点的是一个单元格或一个单元行，该属性会影响获取单元格的列索引。  
**CanUserAddRows**属性设置是否在编辑行后再增加一行空白行，如果使用了数据源绑定，那么建议设置为False。  
**AutoGenerateColumns**属性，如果使用了数据源绑定，那么应设置为False，否则相同的列会重复出现。  
设置DataGrid**表头内容居中显示**，需要使用DataGrid.ColumnHeaderStyle样式进行设置，而没有可以直接设置居中的属性。

<DataGrid.ColumnHeaderStyle>
                        <Style TargetType="DataGridColumnHeader">
                            <Setter Property="HorizontalContentAlignment" Value="Center"/>
                            <Setter Property="Background" Value="#f5f5f5"/>
                            <Setter Property="Foreground" Value="Black"/>
                            <Setter Property="BorderThickness" Value="1" />
                            <Setter Property="BorderBrush" Value="Gray" />
                            <Setter Property="Height" Value="30"/>
                            <Setter Property="FontSize" Value="18"/>
                        </Style>
                    </DataGrid.ColumnHeaderStyle>

设置DataGrid**单元格内容样式**，需要在DataGrid.Resources中定义Style，下方代码中的TargetType="TextBlock"只针对于DataGridTextColumn列类型，如果定义的列为其他类型，则需要另行设置。

<DataGrid.Resources>
    	                    <Style x:Key="CenterAlignmentStyle01" TargetType="TextBlock">
    	                        <Setter Property="TextAlignment" Value="Center"/>
    	                        <Setter Property="Height" Value="30"/>
    	                        <Setter Property="FontSize" Value="22"/>
    	                        <Setter Property="Padding" Value="0,2"/>
    	                        <Setter Property="Background" Value="#FFC4F3E2"/>
    	                    </Style>
                        </DataGrid.Resources>
                        <DataGridTextColumn Header="表头1" Width="3*" ElementStyle="{StaticResource CenterAlignmentStyle}"/>

设置DataGrid**选中行时单元格变色**，需要使用DataGrid.CellStyle样式进行设置

<DataGrid.CellStyle>
                        <Style TargetType="DataGridCell">
                            <Style.Triggers>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter Property="Background" Value="#FF8CCFEE"/>
                                    <Setter Property="Foreground" Value="Black"/>
                                </Trigger>
                                <Trigger Property="IsFocused" Value="True">
                                    <Setter Property="Background" Value="#FF62E6A4"/>
                                    <Setter Property="Foreground" Value="Black"/>
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </DataGrid.CellStyle>

# 二、DataGrid数据源绑定 #

在DataGrid进行数据源绑定，可以通过DataGridTextColumn、DataGridComboBoxColumn等几种列类型直接进行绑定，前台代码如下：

后台代码如下：

public partial class MainWindow : Window
    {
        
    	ObservableCollection<Data> Datas = new ObservableCollection<Data>();//DataGrid01数据源定义
    	public MainWindow()
            {
        
                InitializeComponent();
                this.DataGrid01.ItemsSource = Datas;
            }
    }
    public class Data : INotifyPropertyChanged
        {
        
            private string _Num;
            public string Num
            {
        
                get {
         return _Num; }
                set
                {
        
                    _Num = value;
                    if (PropertyChanged != null)
                    {
        
                        PropertyChanged(this, new PropertyChangedEventArgs("Num"));
                    }
                }
            }
            public event PropertyChangedEventHandler PropertyChanged;
            protected virtual void OnPropertyChanged(string propertyName)
            {
        
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
            }
        }

其中Path=Num，Num为DataGrid数据源Data类中的一个成员变量。  
也可以使用DataGridTemplateColumn进行绑定，后台代码与上面相同，前台代码如下：

第一种绑定方式无法直接设置单元格内容样式，需要通过DataGrid.Resources定义Style来设置例如居中，字体大小等格式，而第二种绑定方式可以直接在DataTemplate中设置单元格格式，设置较为方便。  
数据绑定后，在后台对数据进行编辑时，前台DataGrid会实时显示编辑后的数据，但DataGrid焦点默认只会聚焦到第一行数据行，而不是正在编辑的数据行，因此需要在后台代码中进行设置，将**SelectedItem滚动到当前行**，代码如下：

this.DataGrid01.SelectedItem = this.DataGrid01.Items[Index];//Index为待聚焦的行索引
    this.DataGrid01.CurrentColumn = this.DataGrid01.Columns[0];
    this.DataGrid01.ScrollIntoView(this.DataGrid01.SelectedItem, this.DataGrid01.CurrentColumn);

# 三、DataGrid单元格编辑触发事件 #

要实现对DataGrid单元格编辑，需先将DataGrid属性**IsReadOnly**设置为false，可以在DataGrid定义中设置，这样是对全体单元格只读属性进行设置，也可以在列定义中设置，这样是对单个列字段进行设置。  
DataGrid单元格编辑触发方法主要有**CellEditEnding**和**BeginningEdit**，CellEditEnding是在单元格编辑完成后触发，BeginningEdit是在编辑一开始就触发。  
前台xaml代码如下：

后台代码如下：

/// <summary>
            /// 获取编辑前数据保存至OriginEditData中
            /// </summary>
            /// <param name="sender"></param>
            /// <param name="e"></param>
            private void DataGrid01_BeginningEdit(object sender, DataGridBeginningEditEventArgs e)
            {
        
                TextBlock textBlock = e.Column.GetCellContent(e.Row) as TextBlock;
                if (textBlock == null)
                {
        
                    return;
                }
                string value = textBlock.Text;
                MessageBox.Show(value);
            }
            /// <summary>
            /// 编辑单元格后对编辑后数据进行判断
            /// </summary>
            /// <param name="sender"></param>
            /// <param name="e"></param>
            private void DataGrid01_CellEditEnding(object sender, DataGridCellEditEndingEventArgs e)
            {
        
                var cells = this.DataGrid01.SelectedCells;
                int RowIndex = 0;
                int ColumnIndex = 0;
                if (cells.Any())
                {
        
                    RowIndex = this.DataGrid01.Items.IndexOf(cells.First().Item);//获取单元格行索引
                    ColumnIndex = cells.First().Column.DisplayIndex;//获取单元格列索引
                }
                string input = (e.EditingElement as TextBox).Text;//获取编辑后数据
                DataGridTextColumn dataGridTextColumn = this.DataGrid01.Columns[ColumnIndex] as DataGridTextColumn;
                Binding binding = dataGridTextColumn.Binding as Binding;
                string field = binding.Path.Path;//获取绑定的数据源的字段名称
                input = input.Replace(" ", "");
                if (input == "")
                {
        
                    (e.EditingElement as TextBox).Text = "";
                    MessageBox.Show("输入有误，请重新输入");
                    return;
                }
            }

# 四、DataGrid增加删除行 #

当DataGrid绑定数据源时，删除和增加行应对数据源进行操作，如下所示，使用PreviewKeyDown方法，根据键盘按键进行增加和删除行操作：

/// <summary>
            /// 根据按键进行删除和增加行操作，用户需选择3个以上单元格才能触发操作
            /// </summary>
            /// <param name="sender"></param>
            /// <param name="e"></param>
            private void DataGrid01_PreviewKeyDown(object sender, KeyEventArgs e)
            {
        
                var cells = this.DataGrid01.SelectedCells;
                int count = cells.Count;
                if (count > 2)
                {
        
                    if (e.Key == Key.Back)//Backspace键
                    {
        
                        //删除DataGrid的行是通过移除与之绑定的数据源中的元素来实现的
                        int RowIndex = this.DataGrid01.Items.IndexOf(cells.First().Item);
                        Datas.RemoveAt(RowIndex);//Datas为DataGrid绑定的数据源
                        //if (this.DataGrid01.SelectedItems != null && this.DataGrid01.SelectedItems.Count > 0)
                        //{
        
                            //for (int i = this.DataGrid01.SelectedItems.Count - 1; i >= 0; i--)
                            //{
        
                                //Datas.Remove(this.DataGrid01.SelectedItems[i] as Data);
                            //}
                        //}//删除行的另一种方法
                        e.Handled = true;//将按键事件标记为已处理，不再发送到操作系统中
                        return;
                    }
                    if (e.Key == Key.Return)//Enter键
                    {
        
                        Data data = new Data();
                        Datas.Add(data);
                        e.Handled = true;
                        return;
                    }
                }
            }

# 五、DataGrid数据触发器 #

在DataGrid中显示数据时，有时需要实现当某一字段的数据为特定值时，该数据所在的单元行更改如背景色等样式，这时可以使用Style.Triggers进行设置，前台代码如下：

<DataGrid.RowHeaderStyle>
        <Style TargetType="DataGridRowHeader">
            <Style.Triggers>
                <DataTrigger Binding="{Binding Type}" Value="1">
                    <Setter Property="Background"  Value="Red"></Setter>
                </DataTrigger>
                <DataTrigger Binding="{Binding Type}" Value="0">
                    <Setter Property="Background" Value="White"></Setter>                                                        
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </DataGrid.RowHeaderStyle>

代码中绑定的Type是DataGrid绑定的数据源中的某一成员名，当值为1时背景变红，为0时背景变白。

# 参考文档 #

[DataGrid 类][DataGrid]  
[WPF的DataGrid用法][WPF_DataGrid]  
[WPF：获取DataGrid控件单元格DataGridCell][WPF_DataGrid_DataGridCell]  
[获取wpf datagrid当前被编辑单元格的内容][wpf datagrid]  
[Wpf DataGrid动态添加列，行数据（一）][Wpf DataGrid]  
[WPF DataGrid 编辑和新增行问题][WPF DataGrid]  
[\[Silverlight学习笔记\]如何获取ItemsControl的DataTemplate中定义的控件？][Silverlight_ItemsControl_DataTemplate]  
[DataGrid中的子控件Combox之数据源绑定（WPF）][DataGrid_Combox_WPF]  
[WPF DataGrid 新增、删除行][WPF DataGrid 1]  
[WPF-DataGrid-获取选中单元所在行数和列数][WPF-DataGrid-]  
[关于c＃：WPF DataGrid-新行事件？][c_WPF DataGrid-]  
[WPF中DataGrid 动态增加列][WPF_DataGrid 1]  
[【WPF】设置DataGrid表头内容居中显示][WPF_DataGrid 2]  
[WPF 修改DataGrid选中行时的颜色][WPF _DataGrid]  
[WPF DataGridComboBoxColumn使用（绝对良心版）][WPF DataGridComboBoxColumn]  
[WPF 后台创建 DateTemplate][WPF _ DateTemplate]  
[将DataGrid的SelectedItem滚动到第一行(WPF)][DataGrid_SelectedItem_WPF]  
[DataGridComboBoxColumn绑定后显示空白的问题][DataGridComboBoxColumn]  
[WPF：后台获取DataGrid列的绑定字段。][WPF_DataGrid 3]  
[WPF DataGrid 触发器][WPF DataGrid 2]  
[DataGrid根据值改变行样式-DataTrigger触发器][DataGrid_-DataTrigger]  
[AutoGenerateColumns的使用属性介绍][AutoGenerateColumns]  
[WPF datagrid AutoGenerateColumns隐藏部分列][WPF datagrid AutoGenerateColumns]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Njg0NjY4NQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/989e68cb2a8d4bb28fef822a320a0344.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Njg0NjY4NQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221119/6c584445ff1c43009faf0ec9ca352df0.png
[DataGrid]: https://docs.microsoft.com/zh-cn/dotnet/api/system.windows.controls.datagrid?view=net-5.0
[WPF_DataGrid]: https://www.cnblogs.com/Stay627/p/12076084.html
[WPF_DataGrid_DataGridCell]: https://www.cnblogs.com/qq247039968/p/4066058.html
[wpf datagrid]: https://www.cnblogs.com/liuxia19872003/archive/2012/01/10/2318561.html
[Wpf DataGrid]: https://www.cnblogs.com/lsgsanxiao/p/11556066.html
[WPF DataGrid]: https://bbs.csdn.net/topics/391878685
[Silverlight_ItemsControl_DataTemplate]: https://blog.csdn.net/wackelbh/article/details/6003947
[DataGrid_Combox_WPF]: https://blog.csdn.net/baiduandxunlei/article/details/8684891
[WPF DataGrid 1]: https://blog.csdn.net/windowsliusheng/article/details/85258290
[WPF-DataGrid-]: https://blog.csdn.net/li_l_il/article/details/95317397
[c_WPF DataGrid-]: https://www.codenong.com/4617810/
[WPF_DataGrid 1]: https://blog.csdn.net/u014650759/article/details/100033645
[WPF_DataGrid 2]: https://blog.csdn.net/Xumuyang_/article/details/88384240
[WPF _DataGrid]: https://www.cnblogs.com/T-ARF/p/12206869.html
[WPF DataGridComboBoxColumn]: https://blog.csdn.net/jiyanglin/article/details/83004460
[WPF _ DateTemplate]: https://blog.csdn.net/Iron_Ye/article/details/83504358
[DataGrid_SelectedItem_WPF]: https://blog.csdn.net/u012559285/article/details/51508742
[DataGridComboBoxColumn]: https://blog.csdn.net/loveyou388i/article/details/76130698
[WPF_DataGrid 3]: https://blog.csdn.net/laferm/article/details/8958177
[WPF DataGrid 2]: https://blog.csdn.net/sinat_23050697/article/details/110955846
[DataGrid_-DataTrigger]: https://www.cnblogs.com/mei891208/archive/2013/01/25/2877382.html
[AutoGenerateColumns]: https://blog.csdn.net/firetaker/article/details/5493772
[WPF datagrid AutoGenerateColumns]: https://www.cnblogs.com/czly/p/10847745.html