乘风破浪，遇见最美Windows 11之现代Windows桌面应用开发 - 探索WinUI 2.x系列

背景

Windows 11带来了全新设计的开始菜单、任务栏、设置、资源管理器、搜索、侧边工具栏、微软商店，并且自内测以来，微软对内置的应用陆续进行了更新，包括画图、记事本、计算器、闹钟和时钟、照片、截图和草图、电影和电视。

他们都有一个共同的特征，披上了Windows 11新流畅设计外衣，大幅提高了Windows应用的审美高度。

通过App Packager Viewer这个小工具，我们可以清晰地查看到他们的背后都依赖了一个包为Microsoft.UI.Xaml.2.x

WinUI，是Windows GUI解决方案进化的产物

它并非腾空而出，而是脱胎于微软打磨了6年之久的Windows通用应用平台，常简称为UWP。

UWP是伴随Windows 10操作系统发布的面向Windows终端设备的通用应用开发解决方案，新的通用平台允许新类型的Windows10通用应用真正实现一次编写、一套业务逻辑和统一的用户界面。
应用在统一的Win10商店中将只会有一个安装包，而它将适用于所有Win10设备。

从Windows 10 v1809开始，微软将UWP技术的UX框架剥离出来将原有的“UWP + Windows SDK”的组合，进化成“Windows SDK + Windows App SDK + WinUI”的组合。

WinUI现在是桌面应用和通用应用共同的UX框架，通过将流畅设计系统整合到所有体验、控件和样式中，使用最新的用户界面模式提供一致、直观且可访问的体验。

发行

https://docs.microsoft.com/zh-cn/windows/apps/winui/winui2/release-notes/

WinUI包括两个NuGet包：

• Microsoft.UI.Xaml：适用于UWP应用的控件和FluentDesign。这是主WinUI包。
• Microsoft.UI.Xaml.Core.Direct：用在中间件组件中的低级别API。

实践

https://github.com/TaylorShi/HelloWinUI2.x

https://docs.microsoft.com/zh-cn/windows/apps/winui/winui2/getting-started

创建解决方案HelloWinUI2

dotnet new sln -o HelloWinUI2

cd .\HelloWinUI2\

创建UWP项目demoForWinUI2

explorer.exe .

选择C#语言-Windows平台-UWP类型，选中空白应用(通用Windows)模板，创建名为demoForWinUI2的项目。

如果你打算使用Microsoft.UI.Xaml v2.7包，那么最低版本要求 >= 10.0.15063.0，目标版本要求 >= 10.0.18362.0

所以这里我们最低版本选15063，目标版本就选看到的最高版本19041了。

创建成功

运行一次

安装WinUI的Nuget包

https://www.nuget.org/packages/Microsoft.UI.Xaml

截止到写作时，最新稳定版是v2.7，预览版到了v2.8了

dotnet add package Microsoft.UI.Xaml

这种DotNet-CLI的方式暂时对UWP还不支持哈，放弃。

Install-Package Microsoft.UI.Xaml

或者在demoForWinUI2项目上右键，选择"管理Nuget程序包"，直接搜索Microsoft.UI.Xaml进行安装吧。

安装完毕之后，我们会看到多了一个包Microsoft.UI.Xaml，还有个叫Microsoft.UI.Xaml.Markup的winmd组件依赖，它位于"Windows SDK 10.0.19041.0"里面。

根据使用指引，我们还需要把WinUI的主题资源加到UWP项目里面来，我们打开App.xaml，把Microsoft.UI.Xaml.Controls的Xaml控件资源加载进来。

如果你已经有其他资源了，应该使用MergedDictionaries来添加，举例为：

通过我们需要把Microsoft.UI.Xaml.Controls的Xaml控件资源放在多组自定义样式资源的最前面，因为Xaml的加载机制会按顺序覆盖同Key的资源的，这样可以避免其他自定义资源被覆盖掉。

在.xaml.cs文件中，如果需要使用到Microsoft.UI.Xaml的资源，需要引入Using项：

using MUXC = Microsoft.UI.Xaml.Controls;

在.xaml文件中，如果需要使用到Microsoft.UI.Xaml的资源，需要引入Xml项：

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

使用WinUI样式Mica

https://docs.microsoft.com/zh-cn/windows/apps/design/style/mica

在Windows 11上新增了一种云母(Mica) 材质，它通过提取用户桌面背景的颜色来获取颜色，适合作为应用背景来增加沉浸感。

在UWP里面，基于Microsoft.UI.Xaml包启用云母(Mica) 材质非常简单，它实际上是一直存在的底层背景，我们只需要告诉应用，让它呈现出来即可。

打开MainPage.xaml，在Page在根节点指定BackdropMaterial.ApplyToRootOrPageBackground属性为True

运行看看效果，哈，果然是想要的效果。

参考

• https://github.com/microsoft/microsoft-ui-xaml
• https://www.nuget.org/packages/Microsoft.UI.Xaml/
• https://www.fuget.org/packages/Microsoft.UI.Xaml
• WinUI 2.8