WPF入门教程系列二十一——DataGrid示例(一)

谁借莪１个温暖的怀抱￠ 2024-03-17 11:04 57阅读 0赞

前面我们学习了ListView控件的使用示例，今天我们来学习DataGrid的有关知识。提到DataGrid 不管是Asp.Net中的网页开发还是WinForm应用程序开发都会频繁使用。通过它我们可以灵活的在行与列间显示各种数据。本篇将学习WPF中的DataGrid 相关功能。

首先，先介绍一下DataGrid中有哪些列的类型。

**DataGrid****列的类型**

默认情况下，当我们为DataGrid 控件设置ItemSource 属性后，DataGrid 会根据数据类型自动生成相应的列，下表列出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> 
 <tr> 
 <td style="vertical-align:top;"> </td> 
 <td style="vertical-align:top;"> </td> 
 <td style="vertical-align:top;"> </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> </td> 
 <td style="vertical-align:top;"> </td> 
 <td style="vertical-align:top;"> </td> 
 </tr> 
 </tbody> 
</table>

在创建DataGrid 时可以通过**AutoGenerateColumns** 属性设置列是否自动生成，从而加入自定义列。如果DataGrid 中同时包含“自动生成列”与“用户自定义列”，则首先创建“用户自定义列”。如下图。

![86422c6dee6bfbf2bdcda04bb69f675f.png][]

其次：我们来做一个示例，学习如何使用DataGrid。

**制做DataGrid示例的界面**

1）按照上一篇文章中所写的步骤，使用Visual Studio 2013创建一个WindowGrid界面。如下图。

![b0047e81215da82e12853cf1a91b1398.png][]

2）在Visual studio 2013中的工具箱中，找到DataGrid控件，然后双击。把DataGrid控件添加窗体界面中。如下图1，图2。注意，图2中的红框所标示的那个小框，就是DataGrid控件，是不是与WindowForm中的DataGrid有很大的不同呀。

![fccd995085284dc34850ffb59d9fc389.png][]

图1

![0b83f382bf08a26aa98fd0e9bc8f65a8.png][]

图2

3）给DataGrid添加列。先鼠标左键选中，窗体界面中的小方块，然后点击Visual Studio 2013最右边的“属性”标签，然后Visual Studio 2013会弹出“属性”编辑窗口。如下图。

![c1407620ec0bec8b2c76b75dc27129d4.png][]

4) 在上图中使用鼠标左键点击Columns那一行的按钮。如上图中的红色框，然后会弹出一个对话框，如下图。

![3e5a0e6b844c64cec3399e62dea62cf8.png][]

4）在上图中，选择相应的列的类型，然后点击“添加”按钮，添加列。如下图。

![a6adbd78e97267247b059ad901fc29df.png][]

5) 根据我这个示例的实际情况，我根据需要我添加了5列DataGridTextColumn,和一列DataGridComboBoxColumn。添加完成之后，如下图。看起来与WindowForm中的DataGrid很像了吧。

![6cfd869a36aa7338a8c57def4f0bf679.png][]

6) 下面是全部完成之后的实际的XAML代码。

![1e509994a44cf3e9709147f663f9a3ba.gif][]

[86422c6dee6bfbf2bdcda04bb69f675f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/b6d73ed64d8b4dcb9b39a8f81779ac9f.png
[b0047e81215da82e12853cf1a91b1398.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/f485d7b0e9d047939571b5e6ab41ff53.png
[fccd995085284dc34850ffb59d9fc389.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/0e3faa10954a4a999d225630999f4608.png
[0b83f382bf08a26aa98fd0e9bc8f65a8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/fe60c55dd2da4512916112de4c5591b8.png
[c1407620ec0bec8b2c76b75dc27129d4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/0025b91d45e84223bf61e3dc82434943.png
[3e5a0e6b844c64cec3399e62dea62cf8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/522af9bb611b47daa46014eda40e624d.png
[a6adbd78e97267247b059ad901fc29df.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/44b6310c10124ee88c6add0f63c0f42b.png
[6cfd869a36aa7338a8c57def4f0bf679.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/dc2c439c4be84656a53ac3008a44f789.png
[1e509994a44cf3e9709147f663f9a3ba.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/1fd40ba2012b42bdb68a8b3e777c4472.png