🥑本篇為學習博客園大佬聖殿騎士的《WPF基礎到企業應用系列》以及部分DotNet菜園的《WPF入門教程系列》所作筆記，對應聖殿騎士《WPF基礎到企業應用系列》第 1 - 6 章之間內容，包括 WPF 項目結構、程式的啟動和關閉、程式的生命周期、繼承關係以及常見的佈局控制項及其應用。文章有問題的話歡迎... ...

三、DataGrid列的類型

預設情況下，當我們為DataGrid 控制項設置ItemSource 屬性後，DataGrid 會根據數據類型自動生成相應的列，數據表格中的每一行都綁定到數據源中的一個對象，數據表格中的每一列都綁定到數據對象的屬性。如果想要實現用戶界面中的DataGrid數據隨著數據源中添加或刪除數據時自動更新，DataGrid的綁定數據源必須實現介面INotifyCollectionChanged，例如 ObservableCollection<T>。

WPF推出也有十多年了，WPF中的DataGrid的列的類型還是四種。如下麵表格中列出了DataGrid 支持的四種列及其數據類型。

列類型	顯示數據	數據類型
DataGridHyperlinkColumn	使用顯示 URI 數據。	URI
DataGridComboBoxColumn	使用顯示枚舉數據與其他需要下拉框選擇的數據。	Enum,String
DataGridTextColumn	使用顯示文本	String
DataGridCheckBoxColumn	使用顯示布爾數據	Bool

在創建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樣式。如下圖。

2．在Visual studio 2022中的工具箱中，找到DataGrid控制項，然後雙擊。把DataGrid控制項添加窗體界面中。並設置DataGrid控制項的位置是在Grid中的第二行，如下圖。

3．DataGrid添加列的方式一。在Visual Studio 2022中打開MainWindow.xmal文件。先滑鼠左鍵選中，窗體界面中的DataGrid，然後單擊滑鼠右鍵，在彈出菜單中選擇“添加列”快捷菜單。如下圖。

4.DataGrid添加列方式二。在Visual Studio 2022中先用滑鼠左鍵選中，窗體界面中的DataGrid，然後點擊Visual Studio 2022最右邊的“屬性”標簽，然後Visual Studio 2022會彈出“屬性”視窗。在“屬性”視窗中展開列，用滑鼠左鍵點擊Columns那一行的按鈕。如下圖中的紅色2處，然後會彈出一個對話框“集合編輯器”，如下圖。

5.在上圖3處，選擇相應的列的類型，然後點擊“添加”按鈕，添加列。如下圖。

6. 根據我這個示例的實際情況，我根據需要我添加了4列DataGridTextColumn,和一列DataGridComboBoxColumn。添加完成之後，如下圖。

7. 通過Entity Framework Core 7 從資料庫（本地資料庫(EFCoreDemo))中的Area表中讀取縣區鎮的信息數據，從Province表中讀取省份信息，從City表中讀取城市信息，然後通過綁定的方式將縣區鎮的數據綁定到DataGrid中，讓WPF的Window中的DataGrid顯示縣區鎮的信息。具體代碼如下。

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();
        }
    }
}

8.在Visual Studio 2022中按F5鍵，啟動WPF應用程式，然後使用滑鼠左鍵點擊“刷新”按鈕。如下圖。從圖中來看，數據是綁定到了DataGrid，但是卻沒有在DataGrid中顯示出來。

9.這是由於我們沒有使用列自動生成，同時沒有將數據綁定到具體的列上。接下來我們來綁定數據。

        <DataGrid x:Name="gridArea" Grid.Row="1" d:ItemsSource="{d:SampleData ItemCount=5}" 
AutoGenerateColumns="False" HorizontalAlignment="Left" VerticalAlignment="Top">
            <DataGrid.Columns>
                <DataGridComboBoxColumn Header="城市" Width="120" />
                <DataGridTextColumn Header="縣區鎮" Width="*" Binding="{Binding Name}" ClipboardContentBinding="{x:Null}"/>

                <DataGridTextColumn Header="郵編" Width="100"  Binding="{Binding Code}" ClipboardContentBinding="{x:Null}"/> 

                <DataGridTextColumn Header="創建時間" Width="160" Binding="{Binding Created}" ClipboardContentBinding="{x:Null}"/>

                <DataGridTextColumn Header="更新時間" Width="160" Binding="{Binding Updated}" ClipboardContentBinding="{x:Null}"/>

            </DataGrid.Columns>
        </DataGrid>

10. 在Visual Studio 2022中按F5鍵，啟動WPF應用程式，然後使用滑鼠左鍵點擊“刷新”按鈕。如下圖。

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

三、DataGrid列的類型

四、DataGrid示例