Windows Community Toolkit 4.0 - DataGrid - Overview

概述

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 的官方微博：https://weibo.com/u/6506046490, 你們能夠經過微博關注最新動態。

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