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

更详细的功能描述信息可以参考官方文档:Microsoft - UWP Community Toolkit Documentation

UWP Community Toolkit 同样在 GitHub 开源:GitHub - Microsoft/UWPCommunityToolkit

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

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

开发体验

版本更新

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

大家可以在 GitHub 主页上查看 V2.2.0 的发布日志:UWP Community Toolkit V2.2.0 Release note. 根据 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 维基百科。关于 Markdown 语法,大家可以去查询,很容易上手。

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

下面看一下针对一段 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,它有上下限两个选择值,确定一个选择区间,注意下限是小于等于上限的。通过 RangeMinRangeMax 来取得当前的区间范围。

<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 秒钟过后为止)。

更详细的信息,以及如何正确集成人脉通知,可以参考:My People Notification.

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

<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>

可以看到,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 版本的几个重要更新介绍完了,后面结合工作中实际用到的新功能可以再做深入的研究,欢迎大家多多交流,谢谢!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张善友的专栏

Caliburn Micro for Windows Phone 7

Caliburn Micro (caliburnmicro.codeplex.com) 是一个小巧但功能强大的 Caliburn (caliburn.codep...

1928
来自专栏张善友的专栏

Silverlight 2 Beta 1学习资源

Silverlight 2 Beta 1发布了,大家都介绍了怎么去下载安装了,晚上整理了一些资料放上来和大家共享: 1、Silverlight 2 Beta 1...

1797
来自专栏张善友的专栏

mono 3.10.0 正式发布:性能进一步改进

Mono是Xamarin资助的一个项目,是微软的.NET框架的开源实现。它使得使用C#、F#和其他.NET语言进行跨平台开发成为可能。Xamarin在Mono之...

1946
来自专栏jessetalks

极简版ASP.NET Core学习路径及教程

绝承认这是一个七天速成教程,即使有这个效果,我也不愿意接受这个名字。嗯。 视频系列已出: http://www.cnblogs.com/jesse2013/p/...

4267
来自专栏张善友的专栏

MSDN杂志上的Windows Phone相关文章

Windows Phone 7 开发工具和资源 http://msdn.microsoft.com/zh-cn/magazine/gg598932.aspx 在...

2095
来自专栏walterlv - 吕毅的博客

3 Ways to create a window with blurring background on Windows 10

发布于 2018-07-16 11:14 更新于 2018-09...

951
来自专栏张善友的专栏

Visual Studio 2008 Service Pack 1 - BETA发布了

Visual Studio 2008 SP1 提供了对Visual Studio 2008的各项改进,支持SQL Server 2008和ADO.NET的新特性...

2086
来自专栏葡萄城控件技术团队

自学MVC看这里——全网最全ASP.NET MVC 教程汇总

MVC架构已深得人心,微软也不甘落后,推出了Asp.net MVC。小编特意整理博客园乃至整个网络最具价值的MVC技术原创文章,为想要学习ASP.NET MVC...

1.2K7
来自专栏walterlv - 吕毅的博客

Support Horizontal Scrolling of TouchPad in WPF Application

发布于 2017-11-23 14:09 更新于 2018-08...

981
来自专栏张善友的专栏

WPF E 文章汇总

MSDN "WPF/E" (codename) Dev Center : http://msdn2.microsoft.com/en-us/asp.net/bb...

1889

扫码关注云+社区

领取腾讯云代金券