什么是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系統(tǒng)整合到所有體驗、控件和樣式中，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的一部分通過操作系統(tǒng)本身（UWP WinRT API的Windows.UI.*系列）提供，一部分作為一個庫（“WindowsUI庫2”）并在操作系統(tǒng)本身已包含內容的基礎上附帶其他控件、元素和最新樣式。對于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創(chuàng)意者更新（版本1703，OS內部版本15063）。

Windows UI 3(WinUI 3)庫

WinUI 3是本機UI平臺組件，隨附Windows應用SDK（與Windows10及更高版本SDK完全分離。）Windows應用SDK提供了一組統(tǒng)一的API和工具，可用于創(chuàng)建面向Windows10及更高版本且可發(fā)布到Microsoft Store的生產桌面應用。

Windows應用SDK之前稱為Project Reunion。某些資產（如VSIX擴展和NuGet包）仍然使用此代號（它們將在未來的版本中被重命名）。

除了特定版本或資產仍然引用Project Reunion之外，所有文檔中均使用Windows應用SDK。

目前Windows應用SDK穩(wěn)定版已經到了v0.8，而預覽版已經到了v1.0試驗版，若要從0.8穩(wěn)定版或預覽版更新到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的發(fā)行說明

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

b. WinUI 3的發(fā)行說明

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

環(huán)境準備

1.1 檢查系統(tǒng)要求

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

a. Visual Studio

是一個全面的集成開發(fā)(IDE)，可用于編輯、調試和生成代碼，然后發(fā)布應用。

b. Windows SDK

可以訪問應用程序OS公開的所有Windows API功能。構建Windows應用以及其他類型的組件（如服務和驅動程序）Windows SDK是必需的。默認情況下，Windows SDK隨Visual Studio 2019一起安裝。

c. Windows應用SDK(Windows App SDK)

是一組開發(fā)人員工具，它們表示Windows應用開發(fā)平臺的下一個演變。Windows應用SDK提供一組統(tǒng)一的API和工具，可供從Windows11到Windows10版本1809上的任何桌面應用以一致的方式使用。

Windows App SDK有以下系統(tǒng)要求：

Windows10版本1809(版本17763)或更高版本。
Visual Studio 2019版本16.9或更高版本，并具有以下工作負載和組件：

通用Windows平臺開發(fā)
即使只(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預覽版上生成、運行和部署使用穩(wěn)定版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穩(wěn)定版本。

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一起安裝。 默認情況下，所有這些都處于選中狀態(tài)。

在安裝對話框的"工作負荷"選項卡上，需要以下工作負荷：

通用Windows平臺開發(fā)
使用C++的桌面開發(fā)
.NET桌面開發(fā)

在安裝對話框的"單個組件"選項卡上，"Sdk、庫和框架"部分中需要"Windows 10 SDK (10.0.19041.0)"。

在安裝對話框的"安裝詳細信息"窗格中，通用Windows平臺開發(fā)部分

對Visual Studio 2019而言，需要"C++ (v142)通用Windows平臺工具"。

對Visual Studio 2022而言，需要"C++ (v143)通用Windows平臺工具"。

1.3 啟用NuGet包源

請確保系統(tǒng)中已為正式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提供了一組統(tǒng)一的api、項目模板以及用于生成Windows應用的其他工具。此SDK作為Visual Studio擴展(VSIX)提供。可以從兩個擴展版本中進行選擇：穩(wěn)定和實驗性。

a. 安裝穩(wěn)定版本

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.

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

新建項目時搜索關鍵詞WinUI進行篩選，即可選擇可用的C#或C++模板。

1.5 啟用設備進行開發(fā)

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

1.6 注冊為應用開發(fā)人員

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

1.7 其他資源

使用單項目MSIX將應用打包
開發(fā)人員安裝腳本
Windows開發(fā)的下載和工具

勤學苦練WinUI3

https://github.com/TaylorShi/HelloWinUI3

創(chuàng)建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，并設置好本地的存儲路徑，然后單擊"創(chuàng)建"按鈕。

在"新式通用Windows平臺項目"設置窗體中，選擇最低兼容系統(tǒng)版本和最高兼容系統(tǒng)版本。

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

點擊"確定"按鈕，即開始創(chuàng)建WinUI 3的項目，創(chuàng)建成功后，VS會自動打開此項目，如下圖：

快捷鍵Ctrl+F5或點擊"本地計算機"按鈕看看第一次運行效果，很完美，沒有任何報錯和異常。

運行效果如下圖：

嘗試旁加載方式打包

a. 打包之前我們先去創(chuàng)建一個證書

前往HelloWinUI3 (Package)項目，雙擊Package.appxmanifest這個配置文件，切換到打包設置

點擊選擇證書按鈕，進入證書設置頁面

點擊創(chuàng)建按鈕，創(chuàng)建一個新的證書，并且設置好密碼，這里設置一個發(fā)布者公用名稱吧，我們暫時就用HelloWinUI3

點擊確定按鈕之后，便會產生新的可用證書。

再次點擊確定按鈕，退出設置界面，我們可以看到后綴為.pfx的證書就被添加到打包項目中了，而且打包設置也關聯(lián)上了。

b. 創(chuàng)建應用程序包

在HelloWinUI3 (Package)項目上右鍵，發(fā)布 => 創(chuàng)建應用程序包

這里我們選擇"旁加載"模式，如果是要創(chuàng)建發(fā)布到Microsoft Store的包，那么就應該選"Microsoft Store"模式，暫時不勾選"啟動自動更新"，如果你有相關的Url支撐，可以勾選。

選擇簽名方法，選中我們剛才的證書，下一步。

版本號這里可以根據需要填寫，原則上每次打包都會新增1位，但是我這里暫時先不勾選這個"自動遞增"選項，體系結構這里暫時就勾選X86和X64就夠了，接下來點擊"創(chuàng)建"按鈕即可。

創(chuàng)建成功之后，他會提示你創(chuàng)建成功和存儲位置。

我們點擊這個鏈接，通過資源管理器打開它，查看到具體的文件。

c. 第一次安裝程序包

第一次直接雙擊.msixbundle文件會提示該安裝包不可信任，那是因為我們還沒有信任它的證書，所以第一次安裝，我們需要右鍵Install.ps1這個腳本安裝。

在Install.ps1上右鍵，我們使用PowerShell打開它。

第一次安裝，它會檢測到證書，提示你安裝，我們需要回車同意，進入另外一個提權的窗體，輸入Y同意安裝證書才行。

接下來順利的話會看到一個進度條閃過，進行安裝了，并且提示應用安裝成功。

接下來，我們可以前往開始菜單，找到它了。

運行看看。

同時，這時候，你再雙擊.msixbundle文件運行，你會發(fā)現，這時候安裝包已經被信任了，這樣下次你再打旁加載的程序包，可以直接升級安裝了。

洞察WinUI項目模板組成部分

通過前面的WinUI項目模板生成的HelloWinUI3解決方案一共會生成兩個項目，一個是HelloWinUI3桌面項目，一個是HelloWinUI3 (Package)打包項目。

a. "HelloWinUI3"桌面項目

在這個項目中，里面的控件和窗體都是派生自Microsoft.UI.Xaml這個命名空間的。

我們可以進一步看看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文件內容，我們發(fā)現他是一個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及更高版本功能集成的功能以及更多其他功能。

正常情況下，這個項目還是解決方案的默認啟動項目。

其中Package.appxmanifest文件一般就是打包描述文件，里面可以設置多個維度的打包設置內容，包括應用程序名稱、入口點、視覺資產、功能申明、內容URL、打包證書等。

我們看下它背后的實際內容是什么。

<?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組是應用屬性、發(fā)布者、開始菜單圖標信息。
Dependencies組是應用依賴的包組件。
Resources組是應用支持的多語言設置，其中x-generate是一個占位的默認值。
Applications組是應用的視覺資產設置信息。
Capabilities組是應用的兼容設置，這里的runFullTrust就是申請了所有權限。

c. 添加項清單

在HelloWinUI3桌面項目中后續(xù)我們肯定有需求新建項，不管是頁面還是控件或者配置文件等等，在其項目上右鍵，切換到WinUI這個篩選項可以看到所有的WinUI支持的項清單資源。

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

相關模板清單如下：

模板	語言	說明
空白頁(WinUI3)	C#和C++	添加一個XAML文件和定義了新頁面的代碼文件，該頁面派生自WinUI庫中的Microsoft.UI.Xaml.Controls.Page類。
空白窗口（桌面版WinUI3）	C#和C++	添加一個XAML文件和定義了新窗口的代碼文件，該窗口派生自WinUI庫中的Microsoft.UI.Xaml.Window類。
自定義控件(WinUI3)	C#和C++	添加用于創(chuàng)建具有默認樣式的模板化控件的代碼文件。該模板化控件派生自WinUI庫中的Microsoft.UI.Xaml.Controls.Control類。
資源字典(WinUI3)	C#和C++	添加XAML資源的空鍵控集合。有關詳細信息，請參閱ResourceDictionary和XAML資源參考。
資源文件(WinUI3)	C#和C++	添加用于存儲應用的字符串和條件資源的文件。可以借助此項對應用程序進行本地化。有關詳細信息，請參閱對UI和應用包清單中的字符串進行本地化。
用戶控件(WinUI3)	C#和C++	添加XAML文件和用于創(chuàng)建用戶控件的代碼文件，該用戶控件派生自WinUI庫中的Microsoft.UI.Xaml.Controls.UserControl類。通常，用戶控件封裝相關的現有控件并提供其自己的邏輯。

嘗試合并兩個項目成單項目MSIX

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

通過前面的步驟，我們也知道了，通過項目模板創(chuàng)建解決方案之后，實際上會創(chuàng)建2個項目，一個是HelloWinUI3桌面項目，一個是HelloWinUI3 (Package)打包項目，如何你覺得這樣很麻煩，實際上還可以合并成單項目，官方還是提供了一個思路來指導合并。

目前來說單項目MSIX仍然是一個預覽功能，還不能用于生產環(huán)境，而且僅兼容WinUI3，使用單項目MSIX的好處就是，提供了更簡潔的項目結構和更直接的開發(fā)體驗。

a. 安裝單項目MSIX的Visual Studio擴展

對于Visual Studio 2019來說，安裝：Single-project MSIX Packaging Tools for VS 2019

對于Visual Studio 2022來說，安裝：Single-project MSIX Packaging Tools for VS 2022

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

打開HelloWinUI3.csproj文件，在PropertyGroup節(jié)點下追加入內容：

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

最終如下：

<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類型。

這里可能需要保存多次，才能最終設置上，不打緊。

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

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

接下來，選中"HelloWinUI3"桌面項目，然后進入Visual Studio頂部菜單，生成 => 配置管理器，切換展示所有的"活動解決方案配置"和"活動解決方案平臺"的組合可能性，勾選"部署(Deploy)"這個選項。

務必確保所有的組合都勾選了。

f. 把"HelloWinUI3"桌面項目設置為啟動項目，嘗試部署看看，最終效果也是完美。

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

這時候，它對我們來說就沒有價值了，可以從解決方案中移除了。

現在解決方案就單項目了，干干凈凈，簡簡單單。

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

實際運行效果：

很開心，啥新樣式也沒有，微軟留下了一句話：

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

我們會驚訝發(fā)現，現在默認就是創(chuàng)建單項目了，這點很不錯。

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. 部署后運行看看

嗯，很不錯，果然已經是和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

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組的末尾，加上：

<WindowsPackageType>None</WindowsPackageType>

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. 啟動調試，這時候發(fā)現可以跑起來了

h. 獲獎感言

說實話操作到現在都不知道自己在干嘛，好像是把WinUI從UWP的牢籠里掙脫出來的最后一下，因為我把熟悉的.appxmanifest都給刪了，意味著，這不是一個面向商店或者現代打包的應用了，而是一個可以自由組裝的文件了，也許這正是微軟對開放的承諾兌現吧！

勤學苦練WinUI2

https://github.com/TaylorShi/HelloWinUI2

創(chuàng)建C#語言Windows平臺的"WinUI 2"項目

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

打開Visual Studio新建項目，篩選項目模板設置為：C# => Windows => UWP即可。

選擇"空白應用(通用Windows)"項目類型，然后單擊"下一步"按鈕。

輸入項目名稱HelloWinUI2，并設置好本地的存儲路徑，然后單擊"創(chuàng)建"按鈕。

在"新式通用Windows平臺項目"設置窗體中，選擇最低兼容系統(tǒng)版本(最低要求15063)和最高兼容系統(tǒng)版本(最低要求18362)。

點擊"確定"按鈕，即開始創(chuàng)建WinUI 2的項目，創(chuàng)建成功后，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

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

實際運行效果：

很開心，新樣式都有了，這就是WinUI 2的歡樂

嘗試旁加載方式打包

a. 打包之前我們先去創(chuàng)建一個證書

前往"HelloWinUI2"項目，雙擊Package.appxmanifest這個配置文件，切換到"打包"設置

點擊選擇證書按鈕，進入證書設置頁面

點擊創(chuàng)建按鈕，創(chuàng)建一個新的證書，并且設置好密碼，這里設置一個發(fā)布者公用名稱吧，我們暫時就用HelloWinUI2

點擊確定按鈕之后，便會產生新的可用證書。

b. 創(chuàng)建應用程序包

在"HelloWinUI2"項目上右鍵，發(fā)布 => 創(chuàng)建應用程序包

這里我們選擇"旁加載"模式，如果是要創(chuàng)建發(fā)布到Microsoft Store的包，那么就應該選"Microsoft Store"模式，暫時不勾選"啟動自動更新"，如果你有相關的Url支撐，可以勾選。

選擇簽名證書，選中我們剛才的證書，下一步。

版本號這里可以根據需要填寫，原則上每次打包都會新增1位，但是我這里暫時先不勾選這個"自動遞增"選項，體系結構這里暫時就勾選X86、X64、ARM就夠了，接下來點擊"創(chuàng)建"按鈕即可。

創(chuàng)建成功之后，他會提示你創(chuàng)建成功和存儲位置。

我們點擊這個鏈接，通過資源管理器打開它，查看到具體的文件。

c. 第一次安裝程序包

第一次直接雙擊.appxbundle文件會提示該安裝包不可信任，那是因為我們還沒有信任它的證書，所以第一次安裝，我們需要右鍵Install.ps1這個腳本安裝。

在Install.ps1上右鍵，我們使用PowerShell打開它。

第一次安裝，它會檢測到證書，提示你安裝，我們需要回車同意，進入另外一個提權的窗體，輸入Y同意安裝證書才行。

接下來順利的話會看到一個進度條閃過，進行安裝了，并且提示應用安裝成功。

接下來，我們可以前往開始菜單，找到它了。

運行看看。

同時，這時候，你再雙擊.appxbundle文件運行，你會發(fā)現，這時候安裝包已經被信任了，這樣下次你再打旁加載的程序包，可以直接升級安裝了。

參考

Win11/Win10 UWP 全新開發(fā)，微軟發(fā)布 WinUI 2.7：新增 InfoBadge 信息徽章等
春風十里不如你，全新Windows UI 3(WinUI 3) 的第一個實現Project Reunion 0.5
乘風破浪，基于XAML島(Xaml Islands)喚新WPF和WinForm應用，創(chuàng)建現代化應用體驗
Extending the Context Menu and Share Dialog in Windows 11
使用單項目MSIX將應用打包
開發(fā)人員安裝腳本
Windows開發(fā)的下載和工具
Introducing WinUI 3 Preview 1
WinUI 3 試玩報告
使用新式 UWP 組件擴展桌面應用
Win11/10 全新開發(fā)，微軟 Windows App SDK 1.0 預覽版 3 發(fā)布：首支持 Win11 風格，非 MSIX 打包的 WinUI 3 應用部署

總結

以上是生活随笔為你收集整理的乘风破浪，遇见最美Windows 11之现代Windows桌面应用开发 Windows UI Library (WinUI)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。