Windows Community Toolkit 5.0 - DataGrid - Overview

概述

Windows Community Toolkit 5.0 于 2018 月 11 月初發(fā)布：Windows Community Toolkit 5.0 Release Note. 5.0 版本相較于 4.0，增加了 DataGrid 等控件，Sample App 支持了 Fluent Design 設(shè)計(jì)和明暗兩種風(fēng)格，修復(fù)了遺留的控件 BUG，接下來(lái)我們主要看一下 DataGrid 控件的實(shí)現(xiàn)。

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

由于 DataGrid 控件涉及到的功能比較復(fù)雜，代碼量也比較大，我們會(huì)分為幾篇文章來(lái)詳細(xì)講解。而本篇，我們會(huì)先針對(duì) DataGrid 控件的整體實(shí)現(xiàn)和使用做介紹。

下面是 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;

開發(fā)過程

代碼結(jié)構(gòu)分析

本篇我們先對(duì) DataGrid 的整體代碼結(jié)構(gòu)做概覽分析，后續(xù)會(huì)分幾篇文章來(lái)分析每個(gè)重要的類和方法實(shí)現(xiàn)。來(lái)看一下 DataGrid 的代碼結(jié)構(gòu)：

可以看到，DataGrid 的代碼結(jié)構(gòu)上是一整個(gè) Project，而在 Nuget 上也能體現(xiàn)。接下看一下幾個(gè)文件夾的組成和其中重要的類：

1. CollectionViews

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

2. Utilities

Utilities 是 DataGrid 控件的基礎(chǔ)類和幫助類集合，可以看到涉及到綁定，數(shù)值相等(接近)判斷，擴(kuò)展功能，索引值映射，鍵盤幫助類，值范圍，類型幫助類，UI 設(shè)置幫助類，校驗(yàn)類，可視狀態(tài)類和內(nèi)存管理監(jiān)聽類；后面我們會(huì)詳細(xì)講解每個(gè)類的重點(diǎn)實(shí)現(xiàn)部分。

3. DataGrid

DataGrid 控件的最重要實(shí)現(xiàn)在 DataGrid 文件夾中，一共有 50 多個(gè)類。我們可以先看一遍這里類的大致作用，后面會(huì)詳細(xì)講解每個(gè)類的代碼實(shí)現(xiàn)：

Automation - DataGrid UIA 實(shí)現(xiàn)

DataGrid，DataGridColumn，DataGridRow，DataGridCell 控件類，控件頭，基于這些類的實(shí)現(xiàn)類；

DataGrid，DataGridColumn，DataGridRow，DataGridCell 相關(guān)事件處理類；

DataGrid，DataGridColumn，DataGridRow，DataGridCell 相關(guān)數(shù)據(jù)類；

調(diào)用示例

我們來(lái)看一下 DataGrid 控件的調(diào)用方式，先看一下 XAML 的簡(jiǎn)單實(shí)現(xiàn)：

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

接著看一下數(shù)據(jù)源的簡(jiǎn)單代碼：

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?Customers() ????{????????return?new?List(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) ????????}); ????} }

看一下運(yùn)行結(jié)果：

總結(jié)

到這里我們就把 Windows Community Toolkit 5.0 中的?DataGrid 概覽和代碼整體結(jié)構(gòu)講解完成了，希望能對(duì)大家更好的理解和使用這個(gè)功能有所幫助。后續(xù)會(huì)對(duì)該控件做系列的詳細(xì)講解。

最后，再跟大家安利一下 WindowsCommunityToolkit 的官方微博：https://weibo.com/u/6506046490,?大家可以通過微博關(guān)注最新動(dòng)態(tài)。

Windows

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。