Windows Community Toolkit 4.0

概述

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 UIA 實現
• 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 的官方微博：weibo.com/u/6506046490, 大家可以通過微博關注最新動向。

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