New UWP Community Toolkit, uwptoolkit

New UWP Community Toolkit, uwptoolkit

Overview

UWP Community Toolkit is a collection of UWP App custom controls, application services, and help methods. It can greatly simplify and guide developers in development. I believe that UWPer is no stranger.

The following is a project overview taken from GitHub. We can see that the toolkit has an ideal influence and update frequency:

You can use VS Package Management to install the UWP Community Toolkit NuGet Package and enter "Microsoft. toolkit lists a collection. The following is an excerpt from the official NuGet package set and description. Which packages can be used as needed:

NuGet Package Name	Description
Microsoft. Toolkit	. NET Standard NuGet package ining common code
Microsoft. Toolkit. Parsers	. NET Standard NuGet package ining cross-platform parsers, such as Markdown and RSS
Microsoft. Toolkit. Services	. NET Standard NuGet package ining cross-platform services
Microsoft. Toolkit. Uwp	Main NuGet package primary des code only helpers such as Colors conversion tool, Storage file handling, a Stream helper class, etc.
Microsoft. Toolkit. Uwp. Communications	Configurations Package-Generate tile, toast, and badge configurations for Windows 10 via code. Supported des intelliisense support to avoid having to use the XML syntax.
Microsoft. Toolkit. Uwp. Communications. Javascript	Notification Packages for JavaScript
Microsoft. Toolkit. Uwp. Services	Services Package-This NuGet package includes des the service helpers for Facebook, LinkedIn, Microsoft Graph, Twitter and more
Microsoft. Toolkit. Uwp. UI	UI Packages-Brushes, XAML converters, Visual tree extensions, and other extensions and helpers for your xaml ui.
Microsoft. Toolkit. Uwp. UI. Animations	Animations and Composition behaviors such as Blur, Fade, Rotate, etc.
Microsoft. Toolkit. Uwp. UI. Controls	XAML Controls such as RadialGauge, RangeSelector, etc.
Microsoft. Toolkit. Uwp. Connectivity	API helpers such as your thlehelper and Networking
Microsoft. Toolkit. Uwp. Development Tools	XAML user controls and services to help developer building their app

For more detailed function descriptions, refer to the official Documentation: Microsoft-UWP Community Toolkit Documentation.

UWP Community Toolkit is also open-source on GitHub: GitHub-Microsoft/UWPCommunityToolkit

If you have any questions about function usage and code implementationUwp-community-toolkitArea questions. If you have new functional requirements, you can submit them at Microsoft Forums Uservoice;

If you want to learn about the UWP Community Toolkit function demonstration, you can also download the UWP Toolkit Sample App in Microsoft Store:

 

Development Experience

Version update

The UWP Community Toolkit was officially launched in July 1.0 and has now undergone more than a dozen iterations. The latest version is V2.2.0 and will be officially released in July.

You can view the Release log of V2.2.0 on the GitHub homepage: UWP Community Toolkit V2.2.0 Release note. according to Release note, V2.2.0 updates are mainly reflected in the following aspects: Controls, Extensions, Helpers, Parsers, Brushes, Animations, Services, Notifications, and Sample App, today, we will also provide a development experience for these major updates.

 

Development Experience

1. Staggered panel

Namespace: Microsoft. Toolkit. Uwp. UI. Controls

The Staggered panel allows the elements in the list to be automatically added to the column with the least space currently occupied. It can be used as the value of ItemsPanelTemplate when writing a style. It is suitable for waterfall streams of information or image applications. You can also adjust the number of columns based on the size of the current view. Let's take a look at the simple XAML implementation and display effect:

In the first figure, test04 is added to test03 instead of test01, which also verifies the above conclusion about the column with the minimum space occupied.

<GridView.ItemTemplate>    <DataTemplate>        <Grid>            <Grid.Background>                <SolidColorBrush Color="{Binding Color}"/>            </Grid.Background>            <Image Source="{Binding Thumbnail}" Stretch="Uniform"/>            <Border Background="#44000000" VerticalAlignment="Top">                <TextBlock Foreground="White" Margin="5,3">                    <Run Text="{Binding Title}"/>                </TextBlock>            </Border>        </Grid>    </DataTemplate></GridView.ItemTemplate><GridView.ItemsPanel>    <ItemsPanelTemplate>        <controls:StaggeredPanel DesiredColumnWidth="135"                                    HorizontalAlignment="Stretch"/>    </ItemsPanelTemplate></GridView.ItemsPanel>

 

2. MarkDownTextBlock

Namespace: Microsoft. Toolkit. Uwp. UI. Controls

The MarkdownTextBlock control provides complete support for parsing and rendering markdown in UWP. You can customize the markdown parser and rendering to ensure a smooth UI experience, complex markdown rules are used even on low-configuration hardware.

Markdown is a very common markup language that helps you write documents or articles: Markdown Wikipedia. You can query the Markdown syntax.

You can view the complete MarkdownTextBlock documentation in MarkdownTextBlock XAML Control.

Next, let's take a look at the analysis and rendering results of a markdown tag, MarkdownTextBlock, and click operations for LInk:

<controls:MarkdownTextBlock    Text="This control was originally written by [Quinn Damerell](https://github.com/QuinnDamerell)             and [Paul Bartrum](https://github.com/paulbartrum) for [Baconit](https://github.com/QuinnDamerell/Baconit),             a popular open source reddit UWP. The control *almost* supports the full markdown syntax, with a focus on super-efficient 
            parsing and rendering. The control is efficient enough to be used in virtualizing lists.            *Note:* For a full list of markdown syntax, see the [official syntax guide](http://daringfireball.net/projects/markdown/syntax).            **Try it live!** Type in the *unformatted text box* above!"    LinkClicked="MarkdownText_LinkClicked"    Margin="6"></controls:MarkdownTextBlock>

 

3. MarkdownDocument

Namespace: Microsoft. Toolkit. Parsers. Markdown

The above shows that the MarkdownTextBlock control parses and renders the markdown tag, and MarkdownDocument is the class responsible for markdown parsing. It can parse MarkdownDocument from the markdown string and then render it to the UI using MarkdownRenderer.

Let's take a look at a simple markdown string (This isMarkdown) Parsing code and result:

This is and Markdown are parsed into two inlines, Type = 'textun ', where the Markdown display Type = 'bold', which is expected to be consistent, Markdown is shown as Bold.

string md = "This is **Markdown**";MarkdownDocument Document = new MarkdownDocument();Document.Parse(md);// Takes note of all of the Top Level Headers.foreach (var element in document.Blocks){    if (element is HeaderBlock header)    {        Console.WriteLine($"Header: {header.ToString()}");    }}

 

4. RangeSelector

RangeSelector is a range Selection control. Unlike ProgressBar, RangeSelector has two upper and lower selection values to determine a selection range. Note that the lower limit is less than or equal to the upper limit. PassRangeMin AndRangeMax To obtain the current range.

<controls:RangeSelector x:Name="RangeSelectorControl"                              Grid.Column="1"                                                            Minimum="0"                              Maximum="100"                              StepFrequency="1"/>

 

5. New XAML Brushes

Namespace: Microsoft. Toolkit. Uwp. UI. Media

Community Toolkit supports 7 image Brushes:

• BackdropBlurBrush-Blurred display objects placed behind them
• BackdropGammaTransferBrush-Modify the color value of the display object placed behind
• BackfropInvertBrush-reversed color of the display objects placed behind
• BackdropSaturaionBrush-adjust the display saturation after placement
• BackdropSepiaBrush-adjust the color of the display object placed behind it
• ImageBlendBrush-image painter, mixed with display objects
• RadialGradientBrush-radial gradient Paint Brush

The writing method is very simple. It is implemented based on the definition of the control Background or Fill. Let's look at a simple example of BackdropBlurBrush. Other users can view it in the Sample App:

    <Border BorderBrush="Black" BorderThickness="1" VerticalAlignment="Center" HorizontalAlignment="Center" Width="400" Height="400">      <Border.Background>        <media:BackdropBlurBrush Amount="3.0" />      </Border.Background>    </Border>

 

6. Added new toast features for My People shoulder tap

For personal network notifications, We will extract an official document to describe:

"My contacts" is a new gesture of putting contacts first. They provide a new way for users to contact people they care about through fast and concise ideographic gestures.

As an alternative to conventional Toast notifications, application developers can now send notifications through the "my contacts" function to provide users with a more personalized experience. This is a new type of Toast sent from contacts fixed to the user taskbar.

When a notification is received, the contact image of the sender is dynamically displayed in the taskbar and the sound is played. This indicates that the "my contacts" notification is being started. Then, the animation or image specified in the load will be displayed for 5 seconds (if the load is an animation that lasts for less than 5 seconds, it will be displayed cyclically until after 5 seconds ).

For more details, and how to correctly integrate contacts and notifications, refer:My People Notification.

This Community Toolkie has added support for the contacts notification class. We can see the Toast template of the Human Pulse class from the official website and test it. The experienceType = 'shouldertap 'indicates that this is a personal notification.

<toast hint-people="mailto:shaom_wp@hotmail.com">    <visual lang="en-US">        <binding template="ToastGeneric">            <text hint-style="body">Toast fallback</text>            <text>Add your fallback toast content here</text>        </binding>        <binding template="ToastGeneric" experienceType="shoulderTap">            <image src="https://winblogs.azureedge.net/win/2018/03/5b7f526e8d08a7e8c9271e6a2de558cd-880x428.jpg"/>        </binding>    </visual></toast>

As you can see, when ToastNotification is triggered, the contacts application receives a notification and displays it. (Because the test is performed on a virtual machine, Windows is not activated ..

In some cases, notifications encoded as "my contacts" are displayed as normal Toast. In the following cases, the "my contacts" notification will be rolled back to Toast:

• The notification cannot be displayed.
• The recipient has not enabled "my contacts" notification.
• The sender's contact is not fixed to the recipient's taskbar.

If the "my contacts" notification is rolled back to Toast, the binding of the second "my contacts" is ignored and only the first binding is used to display Toast. This means that, as described earlier, the rollback load must be provided in the first Toast binding.

 

7. OneDrive Service and Twitter Service Support

In terms of services, Version 2.2 has added support for OneDrive and Twitter services.

• Added MSAL support add. NET Standard support
• Added support to tweets with 280 characters

 

Here, we have finished introducing several important updates of UWP Community Toolkit 2.2. We can further study the new features we actually use in our work. Thank you for your exchange!