乘风破浪，遇见最美Windows11之现代Windows桌面应用开发–WindowsUILibrary(WinUI)

什么是Windows UI Library (WinUI)

The Windows UI Library (WinUI) is a native user experience (UX) framework for both Windows desktop and UWP applications.

Windows UI库(WinUI)是适用于Windows桌面应用程序和UWP应用程序的本机用户体验(UX)框架。

通过将Fluent Design系统整合到所有体验、控件和样式中，WinUI使用最新的用户界面(UI)模式提供一致、直观且可访问的体验。

通过对桌面应用和UWP应用的支持，可使用WinUI从头构建应用，也可以使用熟悉的语言（例如C++、C#、Visual Basic和Javascript）通过用于Windows的React Native逐步迁移现有的MFC、WinForms或WPF应用。

WinUI 3与WinUI 2的比较

Windows UI 3(WinUI 3)库

WinUI 3是本机UI平台组件，随附Windows应用SDK（与Windows10及更高版本SDK完全分离。）Windows应用SDK提供了一组统一的API和工具，可用于创建面向Windows10及更高版本且可发布到Microsoft Store的生产桌面应用。

Windows应用SDK之前称为Project Reunion。某些资产（如VSIX扩展和NuGet包）仍然使用此代号（它们将在未来的版本中被重命名）。

除了特定版本或资产仍然引用Project Reunion之外，所有文档中均使用Windows应用SDK。

目前Windows应用SDK稳定版已经到了v0.8，而预览版已经到了v1.0试验版，若要从0.8稳定版或预览版更新到1.0试验版可参阅：将现有项目更新到Windows应用 SDK的最新版本

路线图

https://github.com/microsoft/microsoft-ui-xaml/blob/main/docs/roadmap.md

官方网站

https://microsoft.github.io/microsoft-ui-xaml/

a. WinUI 2的发行说明

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

b. WinUI 3的发行说明

https://docs.microsoft.com/windows/apps/windows-app-sdk/stable-channel

官方博客

https://blogs.windows.com/windowsdeveloper/

官方示例

a. 对于WinUI 2的示例

https://www.microsoft.com/p/xaml-controls-gallery/9msvh128x2zt

https://github.com/Microsoft/Xaml-Controls-Gallery/

b. 对于WinUI 3的示例

https://www.microsoft.com/p/winui-3-controls-gallery/9p3jfpwwdzrc

https://github.com/microsoft/Xaml-Controls-Gallery/tree/winui3

环境准备

1.1 检查系统要求

https://docs.microsoft.com/zh-cn/windows/apps/windows-app-sdk/set-up-your-development-environment

a. Visual Studio

是一个全面的集成开发(IDE)，可用于编辑、调试和生成代码，然后发布应用。

b. Windows SDK

可以访问应用程序OS公开的所有Windows API功能。构建Windows应用以及其他类型的组件（如服务和驱动程序）Windows SDK是必需的。默认情况下，Windows SDK随Visual Studio 2019一起安装。

c. Windows应用SDK(Windows App SDK)

是一组开发人员工具，它们表示Windows应用开发平台的下一个演变。Windows应用SDK提供一组统一的API和工具，可供从Windows11到Windows10版本1809上的任何桌面应用以一致的方式使用。

Windows App SDK有以下系统要求：

• Windows10版本1809(版本17763)或更高版本。


• Visual Studio 2019版本16.9或更高版本，并具有以下工作负载和组件：
  
  
  
  • 通用Windows平台开发
  
  
  • 即使只(C++Win32应用，也需要.NET桌面)
  
  
  • 使用C++进行桌面(，即使只是构建.NET应用)
  
  
  
  


• Windows SDK版本2004(内部版本19041)或更高版本。默认情况下，这是随Visual Studio 2019一起安装的。


• 生成.NET应用还需要：
  
  
  
  • 如果使用2019版本16.10Visual Studio .NET5 SDK版本5.0.300或更高版本
  
  
  • .NET5 SDK版本5.0.204（如果使用Visual Studio 2019版本16.9）
  
  
  
  

d. Visual Studio WinUI 3工具的支持

可以在Visual Studio 2019版本16.9、16.10和16.11预览版上生成、运行和部署使用稳定版Windows App SDK构建的应用。还可使用Visual Studio 2022 17.0预览版2及以上版本，通过Windows App SDK v0.8.2及以上版本生成应用。但是，若要利用最新的WinUI3工具功能（如热重载、Live Visual Tree和Live Property Explorer），需要具有Visual Studio 2019版本以及下表中列出的Windows App SDK稳定版本。

1.2 Visual Studio所需工作负荷和组件

https://docs.microsoft.com/zh-cn/windows/apps/windows-app-sdk/set-up-your-development-environment

请确保这些工作负荷和组件随Visual Studio一起安装。 默认情况下，所有这些都处于选中状态。

• 在安装对话框的"工作负荷"选项卡上，需要以下工作负荷：
  
  
  
  • 通用Windows平台开发
  
  
  • 使用C++的桌面开发
  
  
  • .NET桌面开发
    
    
  
  
  
  


• 在安装对话框的"单个组件"选项卡上，"Sdk、库和框架"部分中需要"Windows 10 SDK (10.0.19041.0)"。
  
  


• 在安装对话框的"安装详细信息"窗格中，通用Windows平台开发部分
  
  
  
  • 对Visual Studio 2019而言，需要"C++ (v142)通用Windows平台工具"。
    
    
  
  
  • 对Visual Studio 2022而言，需要"C++ (v143)通用Windows平台工具"。
    
    
  
  
  
  

1.3 启用NuGet包源

请确保系统中已为正式NuGet服务索引启用了NuGet包源https://api.nuget.org/v3/index.json。

在Visual Studio中，选择"工具"->NuGet程序包管理器->程序包管理器-"设置"以打开"选项"对话框。

在"选项"对话框的左窗格中，选择"包源"选项卡，并确保将指向的nuget.org的包源https://api.nuget.org/v3/index.json作为源URL。

1.4 安装适用于Visual Studio的Windows应用SDK扩展

https://github.com/microsoft/ProjectReunion/

Windows应用SDK提供了一组统一的api、项目模板以及用于生成Windows应用的其他工具。此SDK作为Visual Studio扩展(VSIX)提供。可以从两个扩展版本中进行选择：稳定和实验性。

a. 安装稳定版本

The latest release of the Windows App SDK is v0.8 stable. This version is supported for building production desktop apps and shipping them to the Microsoft Store, and includes the following components:

• WinUI 3


• DWriteCore


• MRTCore


• WebView2

https://aka.ms/windowsappsdk/stable-vsix

或搜索ProjectReunion扩展安装。

b. 安装实验性版本(可选)

This is an experimental version of the Microsoft Windows App SDK. It contains features under development that may appear in future releases.

https://aka.ms/windowsappsdk/experimental-vsix

或搜索WindowsAppSDK(Experimental)扩展安装。

c. 安装预览版本(可选)

The preview channel is not supported for use in production environments, and apps that use the preview releases cannot be published to the Microsoft Store.

d. WinUI项目模板

https://docs.microsoft.com/zh-cn/windows/apps/winui/winui3/winui-project-templates-in-visual-studio#project-templates-for-winui-3

新建项目时搜索关键词WinUI进行筛选，即可选择可用的C#或C++模板。

1.5 启用设备进行开发

https://docs.microsoft.com/zh-cn/windows/apps/get-started/enable-your-device-for-development

1.6 注册为应用开发人员

https://developer.microsoft.com/store/register

1.7 其他资源

• 使用单项目MSIX将应用打包


• 开发人员安装脚本


• Windows开发的下载和工具

勤学苦练WinUI3

https://github.com/TaylorShi/HelloWinUI3

创建C#语言Windows平台的"WinUI 3"项目

https://docs.microsoft.com/zh-cn/windows/apps/winui/winui3/create-your-first-winui3-app

打开Visual Studio新建项目，筛选项目模板设置为：C# => Windows => WinUI即可。

选择"打包的空白应用(桌面版WinUI 3)(Blank App, Packaged(WinUI 3 in desktop))"项目类型，然后单击"下一步"按钮。

输入项目名称HelloWinUI3，并设置好本地的存储路径，然后单击"创建"按钮。

在"新式通用Windows平台项目"设置窗体中，选择最低兼容系统版本和最高兼容系统版本。

https://docs.microsoft.com/zh-cn/windows/uwp/updates-and-versions/choose-a-uwp-version?ocid=VSClient_VerX_NewProject_version

点击"确定"按钮，即开始创建WinUI 3的项目，创建成功后，VS会自动打开此项目，如下图：

快捷键Ctrl+F5或点击"本地计算机"按钮看看第一次运行效果，很完美，没有任何报错和异常。

运行效果如下图：

尝试旁加载方式打包

a. 打包之前我们先去创建一个证书

前往HelloWinUI3 (Package)项目，双击Package.appxmanifest这个配置文件，切换到打包设置

点击选择证书按钮，进入证书设置页面

点击创建按钮，创建一个新的证书，并且设置好密码，这里设置一个发布者公用名称吧，我们暂时就用HelloWinUI3

点击确定按钮之后，便会产生新的可用证书。

再次点击确定按钮，退出设置界面，我们可以看到后缀为.pfx的证书就被添加到打包项目中了，而且打包设置也关联上了。

b. 创建应用程序包

在HelloWinUI3 (Package)项目上右键，发布 => 创建应用程序包

这里我们选择"旁加载"模式，如果是要创建发布到Microsoft Store的包，那么就应该选"Microsoft Store"模式，暂时不勾选"启动自动更新"，如果你有相关的Url支撑，可以勾选。

选择签名方法，选中我们刚才的证书，下一步。

版本号这里可以根据需要填写，原则上每次打包都会新增1位，但是我这里暂时先不勾选这个"自动递增"选项，体系结构这里暂时就勾选X86和X64就够了，接下来点击"创建"按钮即可。

创建成功之后，他会提示你创建成功和存储位置。

我们点击这个链接，通过资源管理器打开它，查看到具体的文件。

c. 第一次安装程序包

第一次直接双击.msixbundle文件会提示该安装包不可信任，那是因为我们还没有信任它的证书，所以第一次安装，我们需要右键Install.ps1这个脚本安装。

在Install.ps1上右键，我们使用PowerShell打开它。

第一次安装，它会检测到证书，提示你安装，我们需要回车同意，进入另外一个提权的窗体，输入Y同意安装证书才行。

接下来顺利的话会看到一个进度条闪过，进行安装了，并且提示应用安装成功。

接下来，我们可以前往开始菜单，找到它了。

运行看看。

同时，这时候，你再双击.msixbundle文件运行，你会发现，这时候安装包已经被信任了，这样下次你再打旁加载的程序包，可以直接升级安装了。

洞察WinUI项目模板组成部分

通过前面的WinUI项目模板生成的HelloWinUI3解决方案一共会生成两个项目，一个是HelloWinUI3桌面项目，一个是HelloWinUI3 (Package)打包项目。

a. "HelloWinUI3"桌面项目

在这个项目中，里面的控件和窗体都是派生自Microsoft.UI.Xaml这个命名空间的。

我们可以进一步看看app.manifest文件内容，当前示例的是一个WPF程序的标准模板。






true/PM
PerMonitorV2, PerMonitor





进一步看看HelloWinUI3.csproj文件内容，我们发现他是一个net5.0的程序，并且依赖了Microsoft.ProjectReunion、Microsoft.ProjectReunion.Foundation、Microsoft.ProjectReunion.WinUI这三个组件。


WinExe
net5.0-windows10.0.19041.0
10.0.17763.0
HelloWinUI3
app.manifest


x86;x64;arm64
win10-x86;win10-x64;win10-arm64
true




b. "HelloWinUI3 (Package)"打包项目

这个项目是一个Windows应用程序打包项目，用于把前面的桌面项目打包成MSIX应用包，提供了一种新式部署体验、通过包扩展与Windows 10及更高版本功能集成的功能以及更多其他功能。

正常情况下，这个项目还是解决方案的默认启动项目。

其中Package.appxmanifest文件一般就是打包描述文件，里面可以设置多个维度的打包设置内容，包括应用程序名称、入口点、视觉资产、功能申明、内容URL、打包证书等。

我们看下它背后的实际内容是什么。


Name="1998bb06-0760-406c-afec-ec47e7d20cc6"
Publisher="CN=HelloWinUI3"
Version="1.0.0.0" />



HelloWinUI3 (Package)


ws
Images\StoreLogo.png









Executable="$targetnametoken$.exe"
EntryPoint="$targetentrypoint$">
DisplayName="HelloWinUI3 (Package)"
Description="HelloWinUI3 (Package)"
BackgroundColor="transparent"
Square150x150Logo="Images\Square150x150Logo.png"
Square44x44Logo="Images\Square44x44Logo.png">











其中：

• Identity组是应用的身份、版本号信息。


• Properties组是应用属性、发布者、开始菜单图标信息。


• Dependencies组是应用依赖的包组件。


• Resources组是应用支持的多语言设置，其中x-generate是一个占位的默认值。


• Applications组是应用的视觉资产设置信息。


• Capabilities组是应用的兼容设置，这里的runFullTrust就是申请了所有权限。

c. 添加项清单

在HelloWinUI3桌面项目中后续我们肯定有需求新建项，不管是页面还是控件或者配置文件等等，在其项目上右键，切换到WinUI这个筛选项可以看到所有的WinUI支持的项清单资源。

https://docs.microsoft.com/zh-cn/windows/apps/winui/winui3/winui-project-templates-in-visual-studio#item-templates-for-winui-3

相关模板清单如下：

https://docs.microsoft.com/zh-cn/windows/apps/get-started/build-apps-for-windows

a. 添加WinUI的新页面

新建WinUiWindow.xaml页面，这里运用新命名空间xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

x:Class="HelloWinUI3.WinUiWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:HelloWinUI3"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
mc:Ignorable="d">









One
Two
Three







实际运行效果：

很开心，啥新样式也没有，微软留下了一句话：

若要利用Windows 11的新外观，需使用WinUI 2.7库中的控件。(请注意，WinUI 3.0当前不支持新的视觉样式。)

预览版3支持Windows 11新样式

https://github.com/microsoft/WindowsAppSDK/releases

We've just released the latest version of 1.0 Preview 3 of the Windows App SDK. This is the first version that adds Windows 11 styles to WinUI 3! This release includes new features, bug fixed, and provide access to APIs and features we are intending to include in the next 1.0 stable release that's coming out very soon!

a. 安装Preview 3 For Visual Studio 2022扩展

Windows App SDK Preview 3 For Visual Studio 2022

b. 新建WinUI3项目HelloWinUI3Preview

我们会惊讶发现，现在默认就是创建单项目了，这点很不错。

c. 尝试Windows 11样式控件

x:Class="HelloWinUI3Preview.WinUiWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:HelloWinUI3Preview"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
mc:Ignorable="d">











One
Two
Three







d. 部署后运行看看

嗯，很不错，果然已经是和WinUI 2.7一致的Windows 11新样式了，期待转正，貌似Xaml设计器还没准备好哈。

预览版3尝试不打包模式改造

https://docs.microsoft.com/en-us/windows/apps/winui/winui3/create-your-first-winui3-app?tabs=csharp%2Ccsharp-unpackaged#instructions-for-winui-3-unpackaged-desktop-apps

This release of WinUI 3 is focused on supporting unpackaged apps on x86 and x64. Please view Instructions for WinUI 3 unpackaged desktop apps to configure your WinUI 3 application to support unpackaged deployment. Keep an eye for ARM64 support that will be added in the next stable release.

在Preview 3中，据说开始支持不打包的模式了，这到底是个什么鬼？

a. 新建空白WinUi3打包项目

这里我们弄个项目名，叫HelloWinUI3Unpackaged，这里先按打包的模式建立项目即可

b. 修改项目文件改成打包模式为空

通过Visual Studio Code编辑HelloWinUI3Unpackaged项目的HelloWinUI3Unpackaged.csproj项目文件，在PropertyGroup组的末尾，加上：

None


c. 将原来的项目清单文件从项目中移除

找到package.appxmanifest移除它，并且从文件层面删掉它。

d. 把项目的调式配置文件的模式改掉

找到launchSettings.json文件，把commandName从MsixPackage改成Project。

e. 安装最新版本的Installer和Msix包

• Microsoft.WindowsAppRuntime.Redist.1.0.0.zip

解压之后，把里面的WindowsAppSDK-Installer-x64的WindowsAppRuntimeInstall.exe用管理员模式安装一次。

f. 启动调试，这时候发现可以跑起来了

h. 获奖感言

说实话操作到现在都不知道自己在干嘛，好像是把WinUI从UWP的牢笼里挣脱出来的最后一下，因为我把熟悉的.appxmanifest都给删了，意味着，这不是一个面向商店或者现代打包的应用了，而是一个可以自由组装的文件了，也许这正是微软对开放的承诺兑现吧！

勤学苦练WinUI2

https://github.com/TaylorShi/HelloWinUI2

创建C#语言Windows平台的"WinUI 2"项目

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

打开Visual Studio新建项目，筛选项目模板设置为：C# => Windows => UWP即可。

选择"空白应用(通用Windows)"项目类型，然后单击"下一步"按钮。

输入项目名称HelloWinUI2，并设置好本地的存储路径，然后单击"创建"按钮。

在"新式通用Windows平台项目"设置窗体中，选择最低兼容系统版本(最低要求15063)和最高兼容系统版本(最低要求18362)。

点击"确定"按钮，即开始创建WinUI 2的项目，创建成功后，VS会自动打开此项目，如下图：

快捷键Ctrl+F5或点击"本地计算机"按钮看看第一次运行效果，很完美，没有任何报错和异常。

安装WinUI 2的Nuget包

在项目HelloWinUI2上右键，"管理Nuget程序包"，搜索关键词WinUI，定位到Nuget包Microsoft.UI.Xaml，点击"安装"即可。

接下来，引入下WinUI的主题资源，打开并编辑App.xaml，构建一个ResourceDictionary，引入XamlControlsResources。

https://docs.microsoft.com/zh-cn/windows/apps/design/style/xaml-resource-dictionary












尝试Window11控件新样式

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

a. 添加WinUI的新页面

新建WinUiPage.xaml页面，这里运用新命名空间xmlns:muxc="using:Microsoft.UI.Xaml.Controls"。






我们引入一些新的控件做尝试：









Margin="0,10,0,0"
COntent="Two-state CheckBox"
IsChecked="True" />


One
Two
Three






实际运行效果：

很开心，新样式都有了，这就是WinUI 2的欢乐

尝试旁加载方式打包

a. 打包之前我们先去创建一个证书

前往"HelloWinUI2"项目，双击Package.appxmanifest这个配置文件，切换到"打包"设置

点击选择证书按钮，进入证书设置页面

点击创建按钮，创建一个新的证书，并且设置好密码，这里设置一个发布者公用名称吧，我们暂时就用HelloWinUI2

点击确定按钮之后，便会产生新的可用证书。

b. 创建应用程序包

在"HelloWinUI2"项目上右键，发布 => 创建应用程序包

这里我们选择"旁加载"模式，如果是要创建发布到Microsoft Store的包，那么就应该选"Microsoft Store"模式，暂时不勾选"启动自动更新"，如果你有相关的Url支撑，可以勾选。

选择签名证书，选中我们刚才的证书，下一步。

版本号这里可以根据需要填写，原则上每次打包都会新增1位，但是我这里暂时先不勾选这个"自动递增"选项，体系结构这里暂时就勾选X86、X64、ARM就够了，接下来点击"创建"按钮即可。

创建成功之后，他会提示你创建成功和存储位置。

我们点击这个链接，通过资源管理器打开它，查看到具体的文件。

c. 第一次安装程序包

第一次直接双击.appxbundle文件会提示该安装包不可信任，那是因为我们还没有信任它的证书，所以第一次安装，我们需要右键Install.ps1这个脚本安装。

在Install.ps1上右键，我们使用PowerShell打开它。

第一次安装，它会检测到证书，提示你安装，我们需要回车同意，进入另外一个提权的窗体，输入Y同意安装证书才行。

接下来顺利的话会看到一个进度条闪过，进行安装了，并且提示应用安装成功。

接下来，我们可以前往开始菜单，找到它了。

运行看看。

同时，这时候，你再双击.appxbundle文件运行，你会发现，这时候安装包已经被信任了，这样下次你再打旁加载的程序包，可以直接升级安装了。

参考

• Win11/Win10 UWP 全新开发，微软发布 WinUI 2.7：新增 InfoBadge 信息徽章等


• 春风十里不如你，全新Windows UI 3(WinUI 3) 的第一个实现Project Reunion 0.5


• 乘风破浪，基于XAML岛(Xaml Islands)唤新WPF和WinForm应用，创建现代化应用体验


• Extending the Context Menu and Share Dialog in Windows 11


• 使用单项目MSIX将应用打包


• 开发人员安装脚本


• Windows开发的下载和工具


• Introducing WinUI 3 Preview 1


• WinUI 3 试玩报告


• 使用新式 UWP 组件扩展桌面应用


• Win11/10 全新开发，微软 Windows App SDK 1.0 预览版 3 发布：首支持 Win11 风格，非 MSIX 打包的 WinUI 3 应用部署

原文链接：https://www.cnblogs.com/taylorshi/p/15307941.html