UWP社区新工具包：XAML画刷体验

在UWP社区新工具包的V2.2.0版本中，XAML Brushes功能新增了7种画刷，分别是BackdropBlurBrush、BackdropGammaTransferBrush、BackdropInvertBrush、BackdropSaturaionBrush、BackdropSepiaBrush、ImageBlendBrush和RadialGradientBrush。这些画刷均继承自XamlCompositionBrushBase，使用CompositionBrush进行区域绘制，并结合Win2D库中的不同效果实现。本文将详细分析每种画刷的源代码和使用方法，并展示其在实际应用中的效果展示。

概述

上一篇 New UWP Community Toolkit 文章中，我们对 V2.2.0 版本的重要更新做了简单回顾。接下来会针对每个重要更新，结合 SDK 源代码和调用代码详细讲解。

本篇我们会针对 XAML Brushes 做详细分享。

Source:  https://github.com/Microsoft/UWPCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI/Media

Doc: https://docs.microsoft.com/zh-cn/windows/uwpcommunitytoolkit/

Namespace: Microsoft.Toolkit.Uwp.UI.Media;  Nuget: Microsoft.Toolkit.Uwp.UI

下面是 Nuget 安装时的一些重要信息：

我们看到依赖项中，除了 UAP（Windows 10 SDK）和 Microsoft.Toolkit.Uwp，还有一个依赖项是 Win2D.uwp，这和我们今天分享的内容有很紧密的关联。

Win2D 相信广大 UWPer 都不陌生了，UWP 图形渲染方面非常常用的库，引用一段官方介绍吧：

Source: https://github.com/Microsoft/Win2D

Doc: http://microsoft.github.io/Win2D/html/Introduction.htm

Sample App: https://www.microsoft.com/store/apps/9NBLGGGXWT9F

代码分析

XAML Brushes 是 V2.2.0 版本新增加的功能，目前共支持 7 种画刷，它们都继承自 XamlCompositionBrushBase，一个创建 XAML Brushes 的基类，使用 CompositionBrush 来绘制一个区域；而实现效果都是用了 Win2D 中不同的 Effect。

XamlCompositionBrushBase Doc: https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.media.xamlcompositionbrushbase

下面我们依次做代码分析和功能体验。由于源代码篇幅较长，我们只截取关键部分。

1. BackdropBlurBrush 

下面是 BackdropBlurBrush 中创建画刷的源代码，大家也可以在 Git 中查看：

Source: https://github.com/Microsoft/UWPCommunityToolkit/blob/master/Microsoft.Toolkit.Uwp.UI/Media/BackdropBlurBrush.cs

BackdropBlurBrush 使用的是 Win2D 中的 GaussianBlurEffect

Doc: http://microsoft.github.io/Win2D/html/T_Microsoft_Graphics_Canvas_Effects_GaussianBlurEffect.htm

</gradientstop></radialgradientbrush></border.background></border></grid>

总结

到这里我们就把 UWP Community Toolkit V2.2.0 中实现的 7 种画刷介绍完了，我们更多的从源代码的实现和 SDK 的简单实用角度来分析，如果大家有兴趣，可以多尝试每种画刷里的参数设置不同值时的效果；如果工作中上面 7 种画刷不满足需求，也可以在 Win2D 寻找更多种类的画刷去封装实现。

欢迎大家多多交流，有任何疑问或建议，欢迎留言告诉我，谢谢！

今天关于《UWP社区新工具包：XAML画刷体验》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！