乘风破浪，遇见最美Windows 11之现代Windows桌面应用开发 - Windows UI Library (WinUI)

什么是Windows UI Library (WinUI)

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

image

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的比较

WinUI 3 WinUI 2
WinUI 3随Windows应用SDK提供。 WinUI 2，第2代WinUI，随附于、独立NuGet包并与Windows10及更高版本SDK集成。
UX堆栈和控件库与OS和Windows10及更高版本SDK完全分离，包括UX堆栈的核心框架层、组合层和输入层。 UX堆栈和控件库与OS和Windows10及更高版本SDK紧密耦合。
WinUI 3可用于生成生产就绪的桌面/Win32Windows应用。 WinUI 2不能用于生成桌面/Win32Windows应用。
WinUI 3作为Windows应用SDK框架包的组件提供，在Windows应用SDK Visual Studio扩展(VSIX)中随附Visua Studio项目模板。 WinUI 2的一部分通过操作系统本身（UWP WinRT API的Windows.UI.*系列）提供，一部分作为一个库（“WindowsUI库2”）并在操作系统本身已包含内容的基础上附带其他控件、元素和最新样式。对于WinUI 2，这些功能以可下载的NuGet包的形式提供。但是，UI堆栈的其他重要部分仍内置于OS中，如核心XAML框架层、输入层和组合层。
WinUI 3支持将C#和.NET5用于桌面应用。 WinUI 2仅支持C#和.NETNative应用。
WinUI 3对生产就绪UWP应用的支持目前为预览版。 通过将NuGet包安装到新的或现有UWP项目中，即可将WinUI 2并入生产UWP应用。然后，可以在新应用中直接引用WinUI控件和样式，也可以在现有应用中将“windows.ui.”命名空间引用更新为“microsoft.ui.”来进行引用。
WinUI 3支持基于Chromium的WebView2控件 WinUI 2支持WebView控件
WinUI 3最低支持Windows10 2018年10月更新（版本1809，OS内部版本17763）。 WinUI 2最低支持Windows10创意者更新（版本1703，OS内部版本15063）。

Windows UI 3(WinUI 3)库

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

image

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

image

官方网站

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

image

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/

image

官方示例

a. 对于WinUI 2的示例

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

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

image

b. 对于WinUI 3的示例

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

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

image

环境准备

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稳定版本。

Windows应用SDK版本 Visual Studio 2019 16.9 Visual Studio 2019 16.10 Visual Studio 2019 16.11预览版 Visual Studio 2022 17.0预览版
Windows应用SDK 0.5 工具不可用 提供的工具 工具不可用 工具不可用
Windows应用SDK 0.8 工具不可用 工具不可用 从Visual Studio 2019 16.11预览版3开始可用的工具 自Visual Studio 2022 17.0预览版2(Windows App SDKv0.8.2+起提供的工具)
Windows应用SDK 1.0实验性 工具不可用 工具不可用 从Visual Studio 2019 16.11预览版3开始可用的工具 从Visual Studio 2022 17.0预览版2开始可用的工具

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桌面开发
      image
  • 在安装对话框的"单个组件"选项卡上，"Sdk、库和框架"部分中需要"Windows 10 SDK (10.0.19041.0)"。
    image
  • 在安装对话框的"安装详细信息"窗格中，通用Windows平台开发部分
    • 对Visual Studio 2019而言，需要"C++ (v142)通用Windows平台工具"。
      image
    • 对Visual Studio 2022而言，需要"C++ (v143)通用Windows平台工具"。
      image

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

image

image

或搜索ProjectReunion扩展安装。

image

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)扩展安装。

image

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.

1.0 Preview 3 Downloads Description
Visual Studio 2019 C++ extension Build apps with the Windows App SDK using the C++ extension for Visual Studio 2019
Visual Studio 2019 C# extension Build apps with the Windows App SDK using the C# extension for Visual Studio 2019
Visual Studio 2022 C++ extension Build apps with the Windows App SDK using the C++ extension for Visual Studio 2022
Visual Studio 2022 C# extension Build apps with the Windows App SDK using the C# extension for Visual Studio 2022
Installer and MSIX packages Deploy Windows App SDK with your app using the .exe installer and MSIX packages

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++模板。

image

1.5 启用设备进行开发

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

image

1.6 注册为应用开发人员

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

1.7 其他资源

勤学苦练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即可。

image

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

image

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

image

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

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

image

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

image

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

image

运行效果如下图：

image

尝试旁加载方式打包

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

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

image

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

image

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

image

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

image

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

image

b. 创建应用程序包

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

image

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

image

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

image

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

image

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

image

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

image

c. 第一次安装程序包

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

image

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

image

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

image

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

image

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

image

运行看看。

image

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

image

洞察WinUI项目模板组成部分

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

image

a. "HelloWinUI3"桌面项目

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

image

image

image

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

<?xml version="1.0" encoding="utf-8"?>
<assembly manifestVersion="1.0" xmlns="urn:schemas-microsoft-com:asm.v1">
  <assemblyIdentity version="1.0.0.0" name="HelloWinUI3.app"/>

  <application xmlns="urn:schemas-microsoft-com:asm.v3">
    <windowsSettings>
      <!-- The combination of below two tags have the following effect:
           1) Per-Monitor for >= Windows 10 Anniversary Update
           2) System < Windows 10 Anniversary Update
      -->
      <dpiAware xmlns="http://schemas.microsoft.com/SMI/2005/WindowsSettings">true/PM</dpiAware>
      <dpiAwareness xmlns="http://schemas.microsoft.com/SMI/2016/WindowsSettings">PerMonitorV2, PerMonitor</dpiAwareness>
    </windowsSettings>
  </application>
</assembly>

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

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>net5.0-windows10.0.19041.0</TargetFramework>
    <TargetPlatformMinVersion>10.0.17763.0</TargetPlatformMinVersion>
    <RootNamespace>HelloWinUI3</RootNamespace>
    <ApplicationManifest>app.manifest</ApplicationManifest>
    <Platforms>x86;x64;arm64</Platforms>
    <RuntimeIdentifiers>win10-x86;win10-x64;win10-arm64</RuntimeIdentifiers>
    <UseWinUI>true</UseWinUI>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.ProjectReunion" Version="0.8.4" />
    <PackageReference Include="Microsoft.ProjectReunion.Foundation" Version="0.8.4" />
    <PackageReference Include="Microsoft.ProjectReunion.WinUI" Version="0.8.4" />
    <Manifest Include="$(ApplicationManifest)" />
  </ItemGroup>
</Project>

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

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

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

image

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

image

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

<?xml version="1.0" encoding="utf-8"?>

<Package
  xmlns="http://schemas.microsoft.com/appx/manifest/foundation/windows10"
  xmlns:uap="http://schemas.microsoft.com/appx/manifest/uap/windows10"
  xmlns:rescap="http://schemas.microsoft.com/appx/manifest/foundation/windows10/restrictedcapabilities"
  IgnorableNamespaces="uap rescap">

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

  <Properties>
    <DisplayName>HelloWinUI3 (Package)</DisplayName>
    <PublisherDisplayName>ws</PublisherDisplayName>
    <Logo>Images\StoreLogo.png</Logo>
  </Properties>

  <Dependencies>
    <TargetDeviceFamily Name="Windows.Universal" MinVersion="10.0.17763.0" MaxVersionTested="10.0.19041.0" />
    <TargetDeviceFamily Name="Windows.Desktop" MinVersion="10.0.17763.0" MaxVersionTested="10.0.19041.0" />
  </Dependencies>

  <Resources>
    <Resource Language="x-generate"/>
  </Resources>

  <Applications>
    <Application Id="App"
      Executable="$targetnametoken$.exe"
      EntryPoint="$targetentrypoint$">
      <uap:VisualElements
        DisplayName="HelloWinUI3 (Package)"
        Description="HelloWinUI3 (Package)"
        BackgroundColor="transparent"
        Square150x150Logo="Images\Square150x150Logo.png"
        Square44x44Logo="Images\Square44x44Logo.png">
        <uap:DefaultTile Wide310x150Logo="Images\Wide310x150Logo.png" />
        <uap:SplashScreen Image="Images\SplashScreen.png" />
      </uap:VisualElements>
    </Application>
  </Applications>

  <Capabilities>
    <rescap:Capability Name="runFullTrust" />
  </Capabilities>
</Package>

其中：

  • Identity组是应用的身份、版本号信息。
  • Properties组是应用属性、发布者、开始菜单图标信息。
  • Dependencies组是应用依赖的包组件。
  • Resources组是应用支持的多语言设置，其中x-generate是一个占位的默认值。
  • Applications组是应用的视觉资产设置信息。
  • Capabilities组是应用的兼容设置，这里的runFullTrust就是申请了所有权限。

c. 添加项清单

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

image

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

相关模板清单如下：

模板 语言 说明
空白页(WinUI3) C#和C++ 添加一个XAML文件和定义了新页面的代码文件，该页面派生自WinUI库中的Microsoft.UI.Xaml.Controls.Page类。
空白窗口（桌面版WinUI3） C#和C++ 添加一个XAML文件和定义了新窗口的代码文件，该窗口派生自WinUI库中的Microsoft.UI.Xaml.Window类。
自定义控件(WinUI3) C#和C++ 添加用于创建具有默认样式的模板化控件的代码文件。该模板化控件派生自WinUI库中的Microsoft.UI.Xaml.Controls.Control类。
资源字典(WinUI3) C#和C++ 添加XAML资源的空键控集合。有关详细信息，请参阅ResourceDictionary和XAML资源参考。
资源文件(WinUI3) C#和C++ 添加用于存储应用的字符串和条件资源的文件。可以借助此项对应用程序进行本地化。有关详细信息，请参阅对UI和应用包清单中的字符串进行本地化。
用户控件(WinUI3) C#和C++ 添加XAML文件和用于创建用户控件的代码文件，该用户控件派生自WinUI库中的Microsoft.UI.Xaml.Controls.UserControl类。通常，用户控件封装相关的现有控件并提供其自己的逻辑。

尝试合并两个项目成单项目MSIX

https://docs.microsoft.com/zh-cn/windows/apps/windows-app-sdk/single-project-msix?tabs=csharp-vs2019

通过前面的步骤，我们也知道了，通过项目模板创建解决方案之后，实际上会创建2个项目，一个是HelloWinUI3桌面项目，一个是HelloWinUI3 (Package)打包项目，如何你觉得这样很麻烦，实际上还可以合并成单项目，官方还是提供了一个思路来指导合并。

image

目前来说单项目MSIX仍然是一个预览功能，还不能用于生产环境，而且仅兼容WinUI3，使用单项目MSIX的好处就是，提供了更简洁的项目结构和更直接的开发体验。

a. 安装单项目MSIX的Visual Studio扩展

image

image

image

image

b. 修改"HelloWinUI3"桌面项目的项目描述文件

打开HelloWinUI3.csproj文件，在PropertyGroup节点下追加入内容：

<EnablePreviewMsixTooling>true</EnablePreviewMsixTooling>
<PublishProfile>Properties\PublishProfiles\win10-$(Platform).pubxml</PublishProfile>

image

最终如下：

<PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>net5.0-windows10.0.19041.0</TargetFramework>
    <TargetPlatformMinVersion>10.0.17763.0</TargetPlatformMinVersion>
    <RootNamespace>HelloWinUI3</RootNamespace>
    <ApplicationManifest>app.manifest</ApplicationManifest>
    <Platforms>x86;x64;arm64</Platforms>
    <RuntimeIdentifiers>win10-x86;win10-x64;win10-arm64</RuntimeIdentifiers>
    <UseWinUI>true</UseWinUI>
    <EnablePreviewMsixTooling>true</EnablePreviewMsixTooling>
    <PublishProfile>Properties\PublishProfiles\win10-$(Platform).pubxml</PublishProfile>
</PropertyGroup>

保存。

c. 在"HelloWinUI3"桌面项目的属性页面的调试信息中，将启动改成MsixPackage类型。

这里可能需要保存多次，才能最终设置上，不打紧。

image

d. 搬迁"HelloWinUI3 (Package)"打包项目的全部文件到"HelloWinUI3"桌面项目

image

image

e. 修改"HelloWinUI3"桌面项目的生成配置

接下来，选中"HelloWinUI3"桌面项目，然后进入Visual Studio顶部菜单，生成 => 配置管理器，切换展示所有的"活动解决方案配置"和"活动解决方案平台"的组合可能性，勾选"部署(Deploy)"这个选项。

image

务必确保所有的组合都勾选了。

f. 把"HelloWinUI3"桌面项目设置为启动项目，尝试部署看看，最终效果也是完美。

image

image

g. 移除"HelloWinUI3 (Package)"打包项目

这时候，它对我们来说就没有价值了，可以从解决方案中移除了。

image

现在解决方案就单项目了，干干净净，简简单单。

image

尝试Window11控件新样式

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"

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

    <Grid>
        <ScrollViewer Padding="16" Height="300">
            <StackPanel Orientation="Vertical" HorizontalAlignment="Left">
                <TextBox PlaceholderText="TextBox" Width="200" />
                <Button Content="Standard XAML button" />
                <CheckBox Content="Two-state CheckBox"/>
                <CheckBox Content="Two-state CheckBox" IsChecked="True"/>
                <Slider Width="200"/>
                <muxc:RadioButtons>
                    <x:String>One</x:String>
                    <x:String>Two</x:String>
                    <x:String>Three</x:String>
                </muxc:RadioButtons>
            </StackPanel>
        </ScrollViewer>
    </Grid>
</Window>

实际运行效果：

image

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

若要利用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

image

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

c. 尝试Windows 11样式控件

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

    <Grid>
        <ScrollViewer Padding="16" VerticalAlignment="Center" HorizontalAlignment="Left">
            <StackPanel Orientation="Vertical" HorizontalAlignment="Left">
                <TextBox PlaceholderText="TextBox" Width="200" />
                <Button Content="Standard XAML button" Margin="0,10,0,0"/>
                <CheckBox Content="Two-state CheckBox" Margin="0,10,0,0"/>
                <CheckBox Content="Two-state CheckBox" IsChecked="True" Margin="0,10,0,0"/>
                <Slider Width="200" Margin="0,10,0,0"/>
                <muxc:RadioButtons Margin="0,10,0,0">
                    <x:String>One</x:String>
                    <x:String>Two</x:String>
                    <x:String>Three</x:String>
                </muxc:RadioButtons>
            </StackPanel>
        </ScrollViewer>
    </Grid>
</Window>

d. 部署后运行看看

image

嗯，很不错，果然已经是和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打包项目

image

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

image

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

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

<WindowsPackageType>None</WindowsPackageType>

image

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

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

image

image

image

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

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

image

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

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

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

image

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即可。

image

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

image

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

image

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

image

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

image

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

image

安装WinUI 2的Nuget包

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

image

image

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

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

<Application
    x:Class="HelloWinUI2.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloWinUI2">

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

尝试Window11控件新样式

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

a. 添加WinUI的新页面

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

<Page
    x:Class="HelloWinUI2.WinUiPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:HelloWinUI2"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    mc:Ignorable="d">

    <Grid />
</Page>

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

<Grid>
    <ScrollViewer Padding="16">
        <StackPanel HorizontalAlignment="Left" Orientation="Vertical">
            <TextBox Width="200" PlaceholderText="TextBox" />
            <Button Margin="0,10,0,0" Content="Standard XAML button" />
            <CheckBox Margin="0,10,0,0" Content="Two-state CheckBox" />
            <CheckBox
                Margin="0,10,0,0"
                Content="Two-state CheckBox"
                IsChecked="True" />
            <Slider Width="200" Margin="0,10,0,0" />
            <muxc:RadioButtons Margin="0,10,0,0">
                <x:String>One</x:String>
                <x:String>Two</x:String>
                <x:String>Three</x:String>
            </muxc:RadioButtons>
        </StackPanel>
    </ScrollViewer>
</Grid>

实际运行效果：

image

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

尝试旁加载方式打包

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

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

image

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

image

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

image

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

image

b. 创建应用程序包

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

image

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

image

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

image

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

image

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

image

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

image

c. 第一次安装程序包

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

image

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

image

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

image

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

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

image

运行看看。

image

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

image

参考

posted @ 2021-09-18 11:20  TaylorShi  阅读(3312)  评论(1)  编辑  收藏  举报