Windows Community Toolkit 4.0

Overview

Windows Community Toolkit 4.0 at the beginning of 2018 months August: Windows Community Toolkit 4.0 release note. 4.0 version compared to 3.0, added the DataGrid and other controls, the Sample APP supports the Fluent design and light and dark two styles, fixed the left control BUG, next we mainly look at the implementation of the DataGrid control.

The DataGrid control is a control that can display multiple rows of multiple columns of data, and I believe you have a touch in the development of a platform such as Silverlight WPF, which is ideal for displaying data tables, which can be completely text content, or include buttons in your data. In addition, the control supports filtering, grouping and other operational requirements.

Because the DataGrid control involves more complex functions, the amount of code is also relatively large, we will be divided into several articles to explain in detail. In this article, we will first describe the overall implementation and use of the DataGrid control.

The following is an example and Code/doc address for the Windows Community Toolkit sample App:

Windows Community Toolkit Doc-datagrid

Windows Community Toolkit Source Code-datagrid

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

Development process

Code Structure Analysis

In this article, we will first analyze the overall code structure of the DataGrid, and follow a few articles to analyze each important class and method implementation. Take a look at the code structure of the DataGrid:

As you can see, the code structure of the DataGrid is an entire Project, and it can be embodied on Nuget. Then take a look at the composition of several folders and the important classes:

1. Collectionviews

Collectionviews is the data part of the DataGrid and you can see that CollectionView is the base class, Enumerablecollectionview and Listcollectionview inherit from it, The two classes represent a collection of enum classes, respectively, and a collection of list classes. These two classes will be used when the DataGrid gets the data source.

2. Utilities

Utilities is the base class of the DataGrid control and a collection of helper classes, which can be seen involving bindings, numeric equality (proximity) judgments, extended functionality, index value mappings, keyboard helper classes, value ranges, type helper classes, UI settings helper classes, validation classes, visual state classes, and memory management listener classes We will explain in detail the key implementations of each class in the following sections.

3. DataGrid

The most important implementation of the DataGrid control is in the DataGrid folder, with a total of more than 50 classes. We can take a look at the approximate function of the class here, followed by a detailed explanation of each class's code implementation:

• Automation-datagrid UIA Implementation
• Datagrid,datagridcolumn,datagridrow,datagridcell control classes, control headers, and implementation classes based on these classes;
• Datagrid,datagridcolumn,datagridrow,datagridcell related event processing class;
• Datagrid,datagridcolumn,datagridrow,datagridcell related data classes;

Invoke Example

Let's take a look at how the DataGrid control is called, and see the simple implementation of XAML first:

xmlns:controls= "Using:Microsoft.Toolkit.Uwp.UI.Controls" <  x:name= "DataGrid1"     Height= "  Margin= "     autogeneratecolumns= "True"    ItemsSource= "{x:bind Myviewmodel.customers}"/>

Then take a look at the simple code of the data source:

 Public classcustomer{ PublicString FirstName {Get;Set; }  PublicString LastName {Get;Set; }  PublicString Address {Get;Set; }  PublicBoolean IsNew {Get;Set; }  PublicCustomer (String firstName, String lastName, string address, Boolean isnew) { This. FirstName =FirstName;  This. LastName =LastName;  This. Address =address;  This. IsNew =isnew; }     Public StaticList<customer>Customers () {return NewList<customer> (Newcustomer[4] {            NewCustomer ("A.","Zero",                 "North Third Street, Apartment",                 false),             NewCustomer ("B."," One",                 "West Fifth Street, Apartment",                 false),            NewCustomer ("C."," Both",                 "Seventh East Street, Apartment",                 true),            NewCustomer ("D.","three",                 "Ninth Street, Apartment",                 true)        }); }}

Look at the results of the operation:

Summarize

Here we will explain the DataGrid overview and code overall structure in Windows Community Toolkit 4.0, and hopefully it will help you understand and use this feature better. The control is followed by a series of detailed explanations.

Finally, with everyone Amway Windowscommunitytoolkit official micro-blog:weibo.com/u/6506046490, You can follow the latest news through Weibo.

Heartfelt thanks to Windowscommunitytoolkit for the outstanding work of the authors, thanks to each contributor, Thank much, all Windowscommunitytoolkit AUTHORS!!!