New UWP Community Toolkit

概述

UWP Community Toolkit 是一个 UWP App 自定义控件、应用服务和帮助方法的集合，能够很大程度的简化和指引开发者的开发工作，相信广大 UWPer 并不陌生。

下面是截取自 GitHub 的项目概览，可以看出这个工具包的影响力和更新频率都是比较理想的：

开发者可以通过 VS Package Management 来安装 UWP Community Toolkit NuGet 包，输入“Microsoft.Toolkit”会列出一个集合，下面是摘自官方的 NuGet 包集合和描述，大家根据需求选择使用哪几个包：

NuGet Package Name	Description
Microsoft.Toolkit	.NET Standard NuGet package containing common code
Microsoft.Toolkit.Parsers	.NET Standard NuGet package containing cross-platform parsers, such as Markdown and RSS
Microsoft.Toolkit.Services	.NET Standard NuGet package containing cross-platform services
Microsoft.Toolkit.Uwp	Main NuGet package includes code only helpers such as Colors conversion tool, Storage file handling, a Stream helper class, etc.
Microsoft.Toolkit.Uwp.Notifications	Notifications Package - Generate tile, toast, and badge notifications for Windows 10 via code. Includes intellisense support to avoid having to use the XML syntax.
Microsoft.Toolkit.Uwp.Notifications.Javascript	Notification Packages for JavaScript
Microsoft.Toolkit.Uwp.Services	Services Package - This NuGet package includes 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 BluetoothLEHelper and Networking
Microsoft.Toolkit.Uwp.DeveloperTools	XAML user controls and services to help developer building their app

更详细的功能描述信息可以参考官方文档：

UWP Community Toolkit 同样在 GitHub 开源：

对于功能使用和代码实现有任何的疑问，可以在 Stack Overflow 的 uwp-community-toolkit 专区提问，如有新的功能需求，可以在  提出；

如果大家想先了解一下 UWP Community Toolkit 的功能演示，也可以直接在 Microsoft Store 下载 使用体验：

 

开发体验

版本更新

从 2016 年 8 月份 1.0 版本正式推出，UWP Community Toolkit 到现在已经经历了十几个版本的迭代，目前最新版本是 V2.2.0，2018 年 2 月份正式发布。

大家可以在 GitHub 主页上查看 V2.2.0 的发布日志：. 根据 Release note，V2.2.0 的更新主要体现在 Controls、Extensions、Helpers、Parsers、Brushes、Animations、Services、Notifications 和 Sample App 这几个方面，而今天我们也会针对这几个方面的主要更新做开发体验。

 

开发体验

1. Staggered panel

Namespace: Microsoft.Toolkit.Uwp.UI.Controls

Staggered panel 允许分列列表中的元素被自动添加到当前占用空间最小的那一列，可以在编写样式的时候，作为 ItemsPanelTemplate 的值。它很适合作为信息类或图片类应用的瀑布流来使用，还可以根据当前视图的尺寸来调节列的数量。来看一下简单的 XAML 实现和显示效果：

第一张图中，test04 被添加到 test03 下面，而不是 test01 下面，这也验证了上面关于占用空间最小的列的论断。

<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

MarkdownTextBlock 控件对 markdown 的解析和渲染在 UWP 中做了完整的支持，可以自定义 markdown 解析器和渲染，保证流畅的 UI 体验，即使是在低配置的硬件上使用复杂的 markdown 规则。

Markdown 是一种非常常用的标记语言，对于编写文档或者文章有很大帮助：。关于 Markdown 语法，大家可以去查询，很容易上手。

关于 MarkdownTextBlock 的完整文档，大家可以在 中查看。

下面看一下针对一段 markdown 标记，MarkdownTextBlock 的解析和渲染结果，以及针对 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

上面我们看到 MarkdownTextBlock 控件对 markdown 标记的解析和渲染，而 MarkdownDocument 就是负责 markdown 解析工作的类，它可以从 markdown 字符串解析 MarkdownDocument，然后使用 MarkdownRenderer 来渲染到 UI 中。

来看一下一段简单 markdown 字符串（This is Markdown）的解析代码和结果：

This is 和 Markdown 被解析为两个 Inline，Type = 'TextRun'，其中 Markdown 的 显示 Type = 'Bold'，这个预期的一致，Markdown 显示为加粗。

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 是一个范围选择控件，不同于 ProgressBar，它有上下限两个选择值，确定一个选择区间，注意下限是小于等于上限的。通过 RangeMin 和 RangeMax 来取得当前的区间范围。

<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 共支持 7 种画刷：

• BackdropBlurBrush - 可以把置于后面的显示物模糊化
• BackdropGammaTransferBrush - 修改置于后面的显示物的颜色值
• BackfropInvertBrush - 把置于后面的显示物颜色反转
• BackdropSaturaionBrush - 调整置于后面的显示物饱和度
• BackdropSepiaBrush - 调整置于后面的显示物色调
• ImageBlendBrush - 使用图像的画刷，与显示物混合
• RadialGradientBrush - 径向渐变画刷

书写的方法很简单，都是基于对控件 Background 或 Fill 的定义来实现的，我们来简单看一个 BackdropBlurBrush 的示例，其他的大家可以在 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

关于人脉通知，我们摘录一段官方文档的说明：

“我的人脉”通知是将人脉放在首位的一种新手势。 它们提供了一种新的方式，可让用户通过快速、简洁的表意手势与他们所关心的人员进行联系。

作为常规 Toast 通知的替代方法，应用程序开发人员现在可以通过“我的人脉”功能发送通知，以向用户提供更加个性化的体验。 这是从固定到用户任务栏的联系人发送的一种新型 Toast。

收到通知时，将在任务栏中动态显示发件人的联系人图片并且将播放声音，这表示“我的人脉”通知正在启动。 然后，负载中指定的动画或图像将显示 5 秒钟（如果负载是持续时间少于 5 秒的动画，则将循环显示，直到 5 秒钟过后为止）。

更详细的信息，以及如何正确集成人脉通知，可以参考：.

本次 Community Toolkie 加入了对人脉通知类的支持，我们从官网看到一个人脉类的 Toast 模板，拿来测试一下；其中 experienceType='shoulderTap' 表示这是一个人脉通知。

<toast hint-people="mailto:[e-mail]">
    <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>

可以看到，ToastNotification 触发时，人脉应用收到了通知并显示出来。（因为是在虚拟机做的测试，Windows 并没有激活。。

在某些情况下，编码为“我的人脉”通知的通知将改为显示为常规 Toast。 在以下情况下，“我的人脉”通知将回退到 Toast：

• 通知无法显示
• 收件人未启用“我的人脉”通知
• 发件人的联系人未固定到收件人的任务栏

如果“我的人脉”通知回退到 Toast，则将忽略第二个特定于“我的人脉”的绑定，并且仅使用第一个绑定来显示 Toast。 这意味着，如之前所述，必须在第一个 Toast 绑定中提供回退负载。

 

7. OneDrive Service and Twitter Service Support

服务方面，2.2 版本加入了对 OneDrive 和 Twitter 服务的支持。

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

 

到这里我们就把 UWP Community Toolkit 2.2 版本的几个重要更新介绍完了，后面结合工作中实际用到的新功能可以再做深入的研究，欢迎大家多多交流，谢谢！