WPF入门教程系列二十五——DataGrid使用示例(2)

喜欢ヅ旅行 2024-03-17 11:05 31阅读 0赞

## 三、DataGrid列的类型 ##

默认情况下，当我们为DataGrid 控件设置ItemSource 属性后，DataGrid 会根据数据类型自动生成相应的列，数据表格中的每一行都绑定到数据源中的一个对象，数据表格中的每一列都绑定到数据对象的属性。如果想要实现用户界面中的DataGrid数据随着数据源中添加或删除数据时自动更新，DataGrid的绑定数据源必须实现接口INotifyCollectionChanged，例如 ObservableCollection<T>。

WPF推出也有十多年了，WPF中的DataGrid的列的类型还是四种。如下面表格中列出了DataGrid 支持的四种列及其数据类型。

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;"> 列类型 </td> 
 <td style="vertical-align:top;"> 显示数据 </td> 
 <td style="vertical-align:top;"> 数据类型 </td> 
 </tr> 
 <tr> 
 <td> DataGridHyperlinkColumn </td> 
 <td style="vertical-align:top;"> 使用显示 URI 数据。 </td> 
 <td style="vertical-align:top;"> URI </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> DataGridComboBoxColumn </td> 
 <td style="vertical-align:top;"> 使用显示枚举数据与其他需要下拉框选择的数据。 </td> 
 <td style="vertical-align:top;"> Enum,String </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> DataGridTextColumn </td> 
 <td style="vertical-align:top;"> 使用显示文本 </td> 
 <td style="vertical-align:top;"> String </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> DataGridCheckBoxColumn </td> 
 <td style="vertical-align:top;"> 使用显示布尔数据 </td> 
 <td style="vertical-align:top;"> Bool </td> 
 </tr> 
 </tbody> 
</table>

在创建DataGrid 时可以通过**AutoGenerateColumns** 属性设置列是否自动生成，从而加入自定义列。

自动生成列时，可以通过在AutoGeneratingColumn事件中进行处理，决定是否在将列添加到DataGrid之前自定义或取消列。 如果将用户定义的列和自动生成的列同时添加到，DataGrid则首先添加用户定义的列。若要重新排列列的显示顺序，可以设置 DisplayIndex 单个列的属性。

DataGridTemplateColumn如果内置列类型不能满足你的需求，请使用DataGridTemplateColumn来定义自定义列。DataGridTemplateColumn 提供 CellTemplate 和 CellEditingTemplate 属性，使你可以为显示模式和编辑模式指定内容模板。 例如，可以为日期定义自定义列。 可以 CellTemplate 定义 TextBlock 以显示日期，而 CellEditingTemplate 可以定义用于 DatePicker 编辑日期的控件。

可以使用 Columns 集合在运行时以编程方式添加、插入、删除和更改控件中的任何列。 IsAutoGenerated检查 属性以确定列是自动生成的还是用户定义的。 更改时，将自动添加、删除或重新生成自动生成的 ItemsSource 列。

如果DataGrid 中同时包含“自动生成列”与“用户自定义列”，则首先创建“用户自定义列”。

接下来通过做一个实际的应用示例，使用省市县区这个能非常方便找到的数据，做为示例数据库的数据，来学习如何使用DataGrid。

## 四、DataGrid示例 ##

1．在Visual Studio 2022中打开MainWindows文件，创建一个Grid样式。如下图。

![5fa6a082129076ca775f9130a2f8c76b.png][]

2． 在Visual studio 2022中的工具箱中，找到DataGrid控件，然后双击。把DataGrid控件添加窗体界面中。并设置DataGrid控件的位置是在Grid中的第二行，如下图。

![311c31bac4988143c42780ba162e5507.png][]

3．DataGrid添加列的方式一。在Visual Studio 2022中打开MainWindow.xmal文件。先鼠标左键选中，窗体界面中的DataGrid，然后单击鼠标右键，在弹出菜单中选择“添加列”快捷菜单。如下图。

![083ac57df56fb94fa8917f2f9cf982c9.png][]

4.DataGrid添加列方式二。在Visual Studio 2022中先用鼠标左键选中，窗体界面中的DataGrid，然后点击Visual Studio 2022最右边的“属性”标签，然后Visual Studio 2022会弹出“属性”窗口。在“属性”窗口中展开列，用鼠标左键点击Columns那一行的按钮。如下图中的红色2处，然后会弹出一个对话框“集合编辑器”，如下图。

![6a53098469e78cc876a94629f6a93f6e.png][]

5.在上图3处，选择相应的列的类型，然后点击“添加”按钮，添加列。如下图。

![e72405e5085791cb3f96529f29ccd8e7.png][]

6. 根据我这个示例的实际情况，我根据需要我添加了4列DataGridTextColumn,和一列DataGridComboBoxColumn。添加完成之后，如下图。

![3f9defce02b695a542c62f89e13870a0.png][]

7. 通过Entity Framework Core 7 从数据库（本地数据库(EFCoreDemo))中的Area表中读取县区镇的信息数据，从Province表中读取省份信息，从City表中读取城市信息，然后通过绑定的方式将县区镇的数据绑定到DataGrid中，让WPF的Window中的DataGrid显示县区镇的信息。具体代码如下。

![e448fd6b7625356277f18d5ba82ff841.gif][]

using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Data;
 using System.Windows.Documents;
 using System.Windows.Input;
 using System.Windows.Media;
 using System.Windows.Media.Imaging;
 using System.Windows.Navigation;
 using System.Windows.Shapes;
 using WpfGridDemo.NET7.Entitys;
 
 
 namespace WpfGridDemo.NET7
 {
 
 /// <summary>
 /// Interaction logic for MainWindow.xaml
 /// </summary> 
 public partial class MainWindow : Window
 
 {
 
 public MainWindow()
 {
 InitializeComponent();
 
 }
 
 GridDbContext db = new GridDbContext();
 protected List<City> GetCitys()
 {
 
 List<City> list = db.City.ToList<City>();
 return list;
 }
 
 protected List<Area> GetAreas()
 {
 
 List<Area> list = db.Area.ToList<Area>(); 
 return list;
 }
 
 protected List<Province> GetProvinces()
 {
 List<Province> list = db.Province.ToList<Province>();
 
 return list;
 }
 
 private void BindGrid()
 {
 gridArea.ItemsSource = GetAreas();
 } 
 private void btnRefresh_Click(object sender, RoutedEventArgs e)
 {
 BindGrid();
 }
 }
 }

![11e2af29c585b7afecc55800a2a5650f.gif][]

8.在Visual Studio 2022中按F5键，启动WPF应用程序，然后使用鼠标左键点击“刷新”按钮。如下图。从图中来看，数据是绑定到了DataGrid，但是却没有在DataGrid中显示出来。

![b16ac743f47dc8b7aadb92d9a3bd3e34.png][]

9.这是由于我们没有使用列自动生成，同时没有将数据绑定到具体的列上。接下来我们来绑定数据。

![3a3086e4b0249add303fdcd50e553d78.gif][]

![cbc188da8b102c4195bad8e75ef6a264.gif][]

10. 在Visual Studio 2022中按F5键，启动WPF应用程序，然后使用鼠标左键点击“刷新”按钮。如下图。

![1fd8f42f67ed95341ee6e64ddbdd1c14.png][]

[5fa6a082129076ca775f9130a2f8c76b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/153c1a869b4b412a9f9527d1241f1d46.png
[311c31bac4988143c42780ba162e5507.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/b29a3e7446bd4ae4b9cda1a2dc57c647.png
[083ac57df56fb94fa8917f2f9cf982c9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/53d9892612444f249da6b67802b38f95.png
[6a53098469e78cc876a94629f6a93f6e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/ebfedb9ae38e4160b8ca109eb246b792.png
[e72405e5085791cb3f96529f29ccd8e7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/60b3ece8d66e4fd48eabea5b598a11d2.png
[3f9defce02b695a542c62f89e13870a0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/7d6492d2b4f84871a8f139371ff840bf.png
[e448fd6b7625356277f18d5ba82ff841.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/7cf2c340f9a24623b8a99b9653c4a2bc.png
[11e2af29c585b7afecc55800a2a5650f.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/492dc916c02e4066a004dda47024f0a0.png
[b16ac743f47dc8b7aadb92d9a3bd3e34.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/26e674d007a64ced8dafeeba95e34a8c.png
[3a3086e4b0249add303fdcd50e553d78.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/d8527c1cf1b14efa91086b1d7a812eac.png
[cbc188da8b102c4195bad8e75ef6a264.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/6e1e70c127e344abb4f65434d78292f3.png
[1fd8f42f67ed95341ee6e64ddbdd1c14.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/a4129ee11c4340a39478e462c6df814a.png