WPF数据处理控件DataGrid ：CRUD操作入门经典

发布时间：2020-12-14 03:59:20 所属栏目：大数据来源：网络整理

导读：说明：文中有FID字段，作者代码中没有说明详细，起始它就是数据表中的自增长字段或者是主键字段。我习惯命名为Id_Key，并设定为自增长字段，在整个数据表中唯一标识一条记录。这篇文章可谓入门级的经典篇，干货比较多。好好研究可以事半功倍。前几天打算尝

说明：文中有FID字段，作者代码中没有说明详细，起始它就是数据表中的自增长字段或者是主键字段。我习惯命名为Id_Key，并设定为自增长字段，在整个数据表中唯一标识一条记录。这篇文章可谓入门级的经典篇，干货比较多。好好研究可以事半功倍。

前几天打算尝试下DataGrid的用法，起初以为应该很简单，可后来被各种使用方法和功能实现所折磨。网络上的解决方法太多，但也太杂。没法子，我只好硬着头皮阅览各种文献资料，然后不断的去尝试，总算小有成果。因此，把我学到的和大家分享一下，相信这篇文章会让你再很短的时间内学会DataGrid的大部分主要功能，而且很多难点都可以在里面找到解决方案。

由于涉及的应用比较多，所以篇幅会很长。但可以确保各个版块相互独立，总共4个部分

1.数据绑定

2.DataGrid的增改删功能

3.DataGrid的分页实现

4.DataGrid的样式设计

先上一张截图，让你大概知道自己需要的功能是否在这张图里有所实现。

PS：使用技术：WPF + ADO.NET Entity Framework

1.数据绑定（涉及DataGrid绑定和Combox绑定）

在DataGrid 中同时包含“自动生成列”与“用户自定义列” 由属性AutoGenerateColumns控制。

默认情况下， DataGrid 将根据数据源自动生成列。下图列出了生成的列类型。

如果AutoGenerateColumns="True" ，我们只需要如下几行代码

后台dataGrid1.ItemsSource = infoList;?//infoList为内容集合（这是我从数据库中获取的记录集合类型为List<T>）

PS:因为这里给dataGrid1绑定了数据源，所以下面绑定的字段都是infoList中的字段名称，同样也对应着我数据表中的字段名。里面包含FID,公司名称，职员姓名，性别，年龄，职务。解释下，怕大家无法理解Binding 后面的值是如何来的了

显然这种数据绑定非常的容易，如果对表格要求不高，这中无疑是最简单方便的。

如果AutoGenerateColumns="False" 表格字段的显示就要靠我们手动去完成了。这个也是数据绑定的重点，因为实际应用中我们大多都是自定义去完成DataGrid的数据绑定。

接下来贴出代码（后面的所有功能都可以在此代码基础上添加和修改）

[html]? 
    view plain 
    copy 
     
    
 <Window?x:Class="CSDN_C.MainWindow"??
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"??
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"??
 xmlns:assembly="clr-namespace:System;assembly=mscorlib"???
 xmlns:local="clr-namespace:Demo"???
 Title="MainWindow"??Loaded="Window_Loaded">??
Window.Resources>??
 ??ObjectDataProvider?x:Key="keySex"?MethodName="GetValues"?ObjectType="{x:Type?assembly:Enum}" ????ObjectDataProvider.MethodParameters ??????x:Type?Type="local:Sex"></x:Type>???<!--引用后台的枚举类型，为字段‘性别’提供数据源。上面引用了命名空间Demo-->??
ObjectDataProvider ??
Grid>???
DataGrid?Name="dataGrid1"??AutoGenerateColumns="False"DataGrid.ColumnsDataGridTemplateColumn?Header="操作"?Width="40" ????????DataGridTemplateColumn.CellTemplate ??????????DataTemplate ????????????CheckBox?CheckBoxDataGridTemplateColumn ??????DataGridTextColumn?Header="公司名称"?Width="80"?Binding="{Binding?公司名称,?Mode=TwoWay,?UpdateSourceTrigger=PropertyChanged}"/>??
DataGridTextColumn?Header="姓名"?Width="80"?Binding="{Binding?职员姓名,0); background-color:inherit; font-weight:bold">/>??
DataGridComboBoxColumn?Header="sex"?SelectedItemBinding="{Binding?性别}"?ItemsSource="{Binding?Source={StaticResource?keySex}}" ??????<!--Combox绑定,获取上面定义的资源keySex.绑定性别-->??
DataGridTextColumn?Header="年龄"?Width="80"?Binding="{Binding?年龄,0); background-color:inherit; font-weight:bold">DataGridTextColumn?Header="职务"?Width="80"?Binding="{Binding?职务,0); background-color:inherit; font-weight:bold">DataGrid Window>??

后台

[csharp]? 
    copy

?namespace?Demo{??

///?<summary>??
///?MainWindow.xaml?的交互逻辑??
///?</summary>??
public?enum?Sex?{?男,女?};??//注意?写在命名空间内?，不要写在类里，否则台前local:Sex找不到路径??
}??

当我们绑定好数据运行程序的时候，会发现 DataGridComboBoxColumn下拉框里虽然绑定了值，但是他不会默认显示出已经设定好的值。所以我们就可以摈弃这种现有的 DataGridComboBoxColumn，我们用DataGrid样板标签DataGridTemplateColumn。

我们在DataGridTemplateColumn标签里要用到2个控件，一个 TextBlock控件来显示内容，另一个ComBox来提供选择。

所以我们可以用如下代码替换掉

<DataGridComboBoxColumn Header="sex" SelectedItemBinding="{Binding 性别}" ItemsSource="{Binding Source={StaticResource keySex}}"/>

copy 
     
    

Header

"性别"

???????????????????? ???????????????????????? ????????????????????????????TextBlock?Text="{Binding?Path=性别}"/>????

????????????????????DataGridTemplateColumn.CellEditingTemplate ????????????????????????>????

????????????????????????????ComboBox?x:Name="taskCombo"?ItemsSource="{Binding?Source={StaticResource?keySex}}"??SelectedItem?="{Binding?Path=性别}"??IsSynchronizedWithCurrentItem="False" ????????????????>??

注意 CellTemplate和 CellEditingTemplate的区别

2.DataGrid的增改删功能

①添加记录行+编辑记录行

由于增加和编辑有一定的联系，所以就放一起来讨论

在上面的代码处添加2个Button按钮,DataGrid默认是输入一行记录后自动会生成一个新行（类似MSSQL数据库添加表记录）。由属性 CanUserAddRows来控制当 CanUserAddRows=false的时候就不会自动生成新行。为了方便我们自己来控制，所以在DataGrid里面设置CanUserAddRows为false.

copy 
     
    

Content

"添加"

???

Name

"btnAdd"

Click

"?btnAdd_Click"

??Button?Content="保存"??Name="btnSave"?Click="btnSave_Click"?DataGrid?Name="dataGrid1"?AutoGenerateColumns="False"??CanUserAddRows="False"??

>??

后台事件

copy 
     
    

?judge?=?0;???

//0表示编辑状态，1为添加状态。因为后面的增加和编辑都在同一个事件中，所以建一个变量来区分操作

?TB_Information??tbInfo?=?new?TB_Information();????//这个类可以供我调用里面的方法来进行增删改查的操作??
private?void?btnAdd_Click(object?sender,?RoutedEventArgs?e)??
{??
??
????????judge?=?1;??//现在为添加状态???????
???????dataGrid1.CanUserAddRows?=?true;????//点击添加后??将CanUserAddRows重新设置为True，这样DataGrid就会自动生成新行，我们就能在新行中输入数据了。??
}??
//现在我们可以添加新记录了，我们接下来要做的就是获取这些新添加的记录??
//先声明一个存储新建记录集的List<T>??????这里的Information是我的数据表实体类??里面包含FID?，公司名称，职员姓名，性别，年龄，职务??
?List<Information>?lstInformation?=?new?List<Information>();??
//我们通过?RowEditEnding来获取新增的记录，就是每次编辑完行后，行失去焦点激发该事件。???更新记录也是执行该事件??
?void?dataGrid1_RowEditEnding( {??
?????Information?info?=?new?Information();???//我自己的数据表实例类??
??????info?=?e.Row.Item?as?Information;????????//获取该行的记录??
??????if?(judge?==?1)??????????????????????????????????????????//如果是添加状态就保存该行的值到lstInformation中??这样我们就完成了新行值的获取??
??????{??
??????????lstInformation.Add(info);??
??????}??
else??
??????{????
??????????tbInfo.UpdInformation(info);????????????//如果是编辑状态就执行更新操作??更新操作最简单，因为你直接可以在DataGrid里面进行编辑，编辑完成后执行这个事件就完成更新操作了??
}??
//获取到记录后，单击保存按钮就可以保存lstInformation中的每一条记录??
void?btnSave_Click( ???????foreach?(Information?info?in?lstInformation)??
???????{??
?????????????tbInfo.InsInformation(info);??????//执行插入方法，将记录保存到数据库??
??????}??
????????????judge?=?0;??????????//重新回到编辑状态??
????????????lstInformation.Clear();??
???????????dataGrid1.CanUserAddRows?=?false;?????//因为完成了添加操作?所以设置DataGrid不能自动生成新行了??
???????????Binding(Num,?1);??
}??

这里又会遇到一个问题。那就是更新数据的时候，发现数据更本就没更新。跟踪代码会发现后台得到的值还是原来的，无法获取编辑后的值。这个问题就是绑定模式的问题，我们只需设置双向绑定就可以了。且作用对象是在属性值更改的情况下进行双向绑定。只要在前面的每个表字段处加上?Mode=TwoWay,UpdateSourceTrigger=PropertyChanged问题就解决了

例如： <DataGridTextColumn Header="公司名称" Width="80"?Binding="{Binding 公司名称,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"?/>

②删除记录

为了有良好的用户体验，我就做了个可以批量删除的删除功能。就是利用到CheckBox控件来完成。

以绑定代码为基础添加代码

</Grid>

首先我们要获取CheckBox中的值，有哪些是被选中的。显然CheckBox里面还必须绑定值，并且还需要一个事件。给CheckBox添加的代码如下

后台代码

copy 
     
    

?List<int>?selectFID?=?new?List<int>();??//保存选中要删除行的FID值??
?void?CheckBox_Click( ?????CheckBox?dg?=?sender?as?CheckBox;??
?????int?FID?=?int.Parse(dg.Tag.ToString());???//获取该行的FID??
?????var?bl?=?dg.IsChecked;??
if?(bl?==?true)??
?????{??
????????selectFID.Add(FID);?????????//如果选中就保存FID??
?????}??
????????selectFID.Remove(FID);??//如果选中取消就删除里面的FID??
????}??
//已经获取到里面的值了，接下来就只要完成删除操作就可以了??删除事件如下??
void?btnDelete_Click(foreach?(int?FID?in?selectFID)??
????{??
?????????tbInfo.DelInformation(FID);???//循环遍历删除里面的记录??
????//Binding(Num,?1);???????//这个是我绑定的一个方法，作用是删除记录后重新给DataGrid赋新的数据源??
}??

3.DataGrid的分页实现

原理：其实分页功能的实现大家都清楚，无非就是把一个记录集通过运算来刷选里面对应页码的记录。

接来下我们再次添加新的代码

copy 
     
    

Name

"dataGrid1"

AutoGenerateColumns

"False"

??????????

StackPanel?Orientation="Horizontal" ???????TextBlock?Text="转到"?Margin="5" ???????TextBox?Name="tbxPageNum"?Text=""?TextBlock?Text="页"?Button?Content="GO"???Click="btnGo_Click"Button?Name="btnUp"?Content="上一页"??VerticalAlignment="Center"?Click="btnUp_Click"/>???

Button?Name="btnNext"?Content="下一页"??VerticalAlignment="Center"?Click="btnNext_Click"TextBlock?Height="20" ?????????????TextBlock?Text="【共"? ?????????????TextBlock?Name="tbkTotal"?Foreground="Red"?TextBlock?Text="页】"?TextBlock?Text="【当前"?TextBlock?Name="tbkCurrentsize"?Foreground="Red"?TextBlockStackPanel>??

首先我们先写个分页的方法，供上面这些事件调用

后台代码

copy 
     
    

void?Binding(int?number,?int?currentSize)??
??????List<Information>?infoList?=?new?List<Information>();??
??????infoList?=?tbInfo.GetInformationList();??????//获取数据源??
??????int?count?=?infoList.Count;??????????//获取记录总数??
int?pageSize?=?0;????????????//pageSize表示总页数??
if?(count?%?number?==?0)??
??????{??
???????????pageSize?=?count?/?number;??
else??
???????????pageSize?=?count?/?number?+?1;??
??????tbkTotal.Text?=?pageSize.ToString();?????????
??????tbkCurrentsize.Text?=?currentSize.ToString();?????
??????infoList?=?infoList.Take(number?*?currentSize).Skip(number?*?(currentSize?-?1)).ToList();???//刷选第currentSize页要显示的记录集??
??????dataGrid1.ItemsSource?=?infoList;????????//重新绑定dataGrid1??
//分页方法写好了?接下来就是响应下一页，上一页，和跳转页面的事件了??
//先定义一个常量??
const?int?Num=12;??//表示每页显示12条记录??
//上一页事件???
void?btnUp_Click(int?currentsize?=?int.Parse(tbkCurrentsize.Text);?//获取当前页数??
?????if?(currentsize?>?1)??
?????{??
?????????Binding(Num,?currentsize?-?1);???//调用分页方法??
?????}??
//下一页事件??
void?btnNext_Click(int?total?=?int.Parse(tbkTotal.Text);?//总页数??
//当前页数??
if?(currentsize?<?total)??
????{??
????????Binding(Num,?currentsize?+?1);??? ????}??
//跳转事件??
void?btnGo_Click( ????int?pageNum?=?int.Parse(tbxPageNum.Text);??
????//总页数??
if?(pageNum?>=?1?&&?pageNum?<=?total)??
???????Binding(Num,?pageNum);????? }??

4.DataGrid的样式设计

为什么用WPF，不就是因为WPF拥有绚丽的设计页面功能么（当然远不止这些）。虽然我美工这方面很差劲，但是最基本的设计我们还是要会一些。所以接下来做的工作主要就是给DataGrid上色了。（有些需要用到后台代码，也许不属于样式这类，但总归是改变外观，所以就放在一起归纳了）

①给DataGrid自动添加行序号+修改行表头颜色

后台代码

copy 
     
    

void?Window_Loaded( ????Binding(Num,?1);???//调用分页方法??显示第一页??
????dataGrid1.LoadingRow?+=?new?EventHandler<DataGridRowEventArgs>(dataGrid_LoadingRow);????//自动添加序号的事件??调用下面的dataGrid_LoadingRow??
void?dataGrid_LoadingRow( ????????e.Row.Header?=?e.Row.GetIndex()?+?1;????//设置行表头的内容值??
}??

接下来就可以修改行表头的颜色了

copy 
     
    

?DataGrid?Name="dataGrid1" ???DataGrid.RowHeaderStyle ?????Style?TargetType="DataGridRowHeader"Setter?Property="Width"?Value="15" ??????????Setter?Property="Background"Setter.Value ??????????????????LinearGradientBrush?StartPoint="0,0"?EndPoint="1,1" ???????????????????????GradientStop?Color="White"?Offset="0"/>???????

???????????????????????GradientStop?Color="SkyBlue"?Offset="1" ?????????????????LinearGradientBrush ????????SetterStyle >??

②给列表头添加颜色

copy 
     
    

??

DataGrid.ColumnHeaderStyle ???????????????Style?TargetType="DataGridColumnHeader" ????????????????????????? ?????????????????????????????????EndPoint="0,248); line-height:18px"> ???????????????????????????????????????? ????????????????????????????????????????GradientStop?Color="LightBlue"?Offset="0.5"GradientStop?Color="White"?Offset="1" ??????????????????????????????? ??????????????????? ???????????????????Setter?Property="Foreground"?Value="Black"Setter?Property="FontSize"?Value="13"? ?????????????? ???????????
??
?????????????????????DataGridColumn.HeaderStyle ??????????????????????????? ????????????????????????????????? ??????????????????????????????????????? ????????????????????????????????????????????? ??????????????????????????????????????????????????? ???????????????????????????????????????????????????GradientStop?Color="Yellow"?Offset="0.5" ???????????????????????????????????????????? ?????????????????????????????????????? ???????????????????????????????Setter?Property="FontSize"?Value="13"Setter?Property="Width"?Value="70" ?????????????????????????? ??????????????????
??
>??

③给行添加颜色+滑鼠事件

copy 
     
    

????DataGrid.RowStyleStyle?TargetType="DataGridRow"Setter?Property="Background"?Value="LightBlue"? ???????????????Style.TriggersTrigger?Property="IsMouSEOver"?Value="True">???????

Setter?Property="Background"?Value="SkyBlue"Setter?Property="Foreground"?Value="White"Trigger lt;/DataGrid>??

④给单元格添加颜色

copy 
     
    

Style

TargetType

"DataGridCell"

Trigger

Property

"IsSelected"

Value

"True"

??????????????????????????????Setter?Property="Background"?Value="LightPink">??

⑤ 让用户在单元格获得焦点时编辑 ComboBox

其实这不属于样式的范畴了，但我喜欢把改善用户体验归于这一类。当我们的表格里有类似ComboBox的控件时（如： DatePicker 控件等）。我们编辑这些控件时，首先第一次单击获取单元格焦点，

第二次点击才能获取编辑时的焦点，也就是用户必须单击2次才能进行操作。这种机制其实是适合文本框控件的，但对于其它控件，像ComboBox就显得很不方便了。所以我们要做的就是单击第一次的

时候用户就可以编辑ComboBox。

接下来我要在DataGrid添加了三个新属性（RowDetailsVisibilityMode、SelectionMode 和 SelectionUnit）和一个新的事件处理程序 (SelectedCellsChanged)

前台

</DataGrid>

后台

现在就差一个 SelectedCellsChanged(选则单元格时出发该事件)事件的后台代码了

copy 
     
    

?dataGrid1_SelectedCellsChanged(

?(e.AddedCells.Count?==?0)??

?????????return;??
????var?currentCell?=?e.AddedCells[0];??
if?(currentCell.Column?==?dataGrid1.Columns[3])???//Columns[]从0开始??我这的ComboBox在第四列??所以为3??
???????????dataGrid1.BeginEdit();????//??进入编辑模式??这样单击一次就可以选择ComboBox里面的值了??
????}??

⑥固定列表头

这个非常简单只要在DataGrid里添加一个属性即可

<DataGrid?FrozenColumnCount="1"?>

</DataGrid>

费了不少时间，希望可以帮助大家。有什么地方有误欢迎大家指正！！！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!