概述

Windows Community Toolkit 4.0 於 2018 月 8 月初發布：Windows Community Toolkit 4.0 Release Note. 4.0 版本相較於 3.0，增加了 DataGrid 等控件，Sample App 支持了 Fluent Design 設計和明暗兩種風格，修復了遺留的控件 BUG，接下來我們主要看一下 DataGrid 控件的實現。

DataGrid 控件是一個可以展示多行多列數據集合的控件，相信大家在 Silverlight WPF 等平臺開發中都有過接觸，該控件非常適合用來展示數據表格，可以完全是文本內容展示，也可以在數據中包含按鈕等操作；另外控件還支持篩選，分組等操作需求。

由於 DataGrid 控件涉及到的功能比較復雜，代碼量也比較大，我們會分為幾篇文章來詳細講解。而本篇，我們會先針對 DataGrid 控件的整體實現和使用做介紹。

下面是 Windows Community Toolkit Sample App 的示例截圖和 code/doc 地址：

Windows Community Toolkit Doc - DataGrid

Windows Community Toolkit Source Code - DataGrid

Namespace: Microsoft.Toolkit.Uwp.UI.Controls; Nuget: Microsoft.Toolkit.Uwp.UI.Controls.DataGrid

開發過程

代碼結構分析

本篇我們先對 DataGrid 的整體代碼結構做概覽分析，後續會分幾篇文章來分析每個重要的類和方法實現。來看一下 DataGrid 的代碼結構：

可以看到，DataGrid 的代碼結構上是一整個 Project，而在 Nuget 上也能體現。接下看一下幾個文件夾的組成和其中重要的類：

1. CollectionViews

CollectionViews 是 DataGrid 的數據部分，可以看到 CollectionView 是基類，EnumerableCollectionView 和 ListCollectionView 繼承自它，而這兩個類分別代表枚舉類的集合，以及列表類的集合。這兩個類，都會在 DataGrid 獲取數據源時被使用到。

2. Utilities

Utilities 是 DataGrid 控件的基礎類和幫助類集合，可以看到涉及到綁定，數值相等(接近)判斷，擴展功能，索引值映射，鍵盤幫助類，值範圍，類型幫助類，UI 設置幫助類，校驗類，可視狀態類和內存管理監聽類；後面我們會詳細講解每個類的重點實現部分。

3. DataGrid

DataGrid 控件的最重要實現在 DataGrid 文件夾中，一共有 50 多個類。我們可以先看一遍這裏類的大致作用，後面會詳細講解每個類的代碼實現：

• Automation - DataGrid 控件的動畫實現
• DataGrid，DataGridColumn，DataGridRow，DataGridCell 控件類，控件頭，基於這些類的實現類；
• DataGrid，DataGridColumn，DataGridRow，DataGridCell 相關事件處理類；
• DataGrid，DataGridColumn，DataGridRow，DataGridCell 相關數據類；

調用示例

我們來看一下 DataGrid 控件的調用方式，先看一下 XAML 的簡單實現：

xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"

<controls:DataGrid x:Name="dataGrid1" 
    Height="600" Margin="12"
    AutoGenerateColumns="True"
    ItemsSource="{x:Bind MyViewModel.Customers}" />

接著看一下數據源的簡單代碼：

public class Customer
{
    public String FirstName { get; set; }
    public String LastName { get; set; }
    public String Address { get; set; }
    public Boolean IsNew { get; set; }

    public Customer(String firstName, String lastName, 
        String address, Boolean isNew)
    {
        this.FirstName = firstName;
        this.LastName = lastName;
        this.Address = address;
        this.IsNew = isNew; 
    }

    public static List<Customer> Customers()
    {
        return new List<Customer>(new Customer[4] {
            new Customer("A.", "Zero", 
                "12 North Third Street, Apartment 45", 
                false), 
            new Customer("B.", "One", 
                "34 West Fifth Street, Apartment 67", 
                false),
            new Customer("C.", "Two", 
                "56 East Seventh Street, Apartment 89", 
                true),
            new Customer("D.", "Three", 
                "78 South Ninth Street, Apartment 10", 
                true)
        });
    }
}

看一下運行結果：

總結

到這裏我們就把 Windows Community Toolkit 4.0 中的 DataGrid 概覽和代碼整體結構講解完成了，希望能對大家更好的理解和使用這個功能有所幫助。後續會對該控件做系列的詳細講解。

最後，再跟大家安利一下 WindowsCommunityToolkit 的官方微博：https://weibo.com/u/6506046490, 大家可以通過微博關註最新動態。

衷心感謝 WindowsCommunityToolkit 的作者們傑出的工作，感謝每一位貢獻者，Thank you so much, ALL WindowsCommunityToolkit AUTHORS !!!

Windows Community Toolkit 4.0 - DataGrid - Overview