WinUI 3學習筆記（1）—— First Desktop App

樓上那個蜀黍發表於2021-06-15
UI筆記APP

隨著Visual Studio 2019 16.10版本的正式釋出，建立WinUI 3的APP對我們來說，已不存在任何的難度。本篇我們就試著來一探究竟，看看WinUI 3 APP到底是個啥玩意，能不能重振Windows桌面開發。
首先讓我們把Visual Studio更新到16.10版本，16.10版本不僅全面支援熱過載、實時視覺化樹和實時屬性資源管理器。同時也不再需要修改Project檔案，以修正 .NET SDK 和 winrt.runtime.dll 的版本不匹配的問題。

在Visual Studio 2019，讓我們找到Blank App, Packaged (WinUI 3 in Desktop)專案模板。如果發現沒有該模板，則需要去以下地址下載安裝。
Project Reunion - Visual Studio Marketplace
或者通過Visual Studio的Manage Extensions進行安裝。

這裡選擇Packaged的Desktop專案，某軟宣告該型別的工程已可以用於生產環境。而For UWP的版本仍是preview階段，至於非Packaged的Desktop專案，還要等到年底才能得到支援。需要注意的是，WinUI3 當前最低支援的Win10版本是1809，然後目標版本是2004。如果小夥伴們發現沒有2004即Build19041的SDK可以選，證明你的Windows10需要升級了。

點選OK後，我們將成功建立第一個WinUI3的APP。開啟解決方案管理器的話，預設的程式碼的結構如下圖。整個解決方案下共有2個工程，作為主體的FirstWinUI3App，以及打包進商店用的FirstWinUI3App(Package)工程。看上去和之前DesktopBridge的打包方式極為相似，但是如果我們去檢查Packages的話，會發現WinUI3引用的libraries都已經歸屬於ProjectReunion專案了。

檢查FirstWinUI3App工程，app.manifest作為Windows APP的傳統配置檔案，支援的OS版本，要不要管理員許可權啟動，都在這裡定義，我們先不去管他。

App.xaml和MainWindow的組合，就是標準的WPF和UWP的開局。其中App.xaml會提供一個ResourceDictionary，來放置Application級別的資源。

<Application
    x:Class="FirstWinUI3App.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FirstWinUI3App">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
                <!-- Other merged dictionaries here -->
            </ResourceDictionary.MergedDictionaries>
            <!-- Other app resources here -->
        </ResourceDictionary>
    </Application.Resources>
</Application>

而在App.xaml.cs中，因為該Desktop工程沒有UWP中的Suspend和Resume等概念，就只overrid了OnLaunched方法，提供了一個類級別的Window物件。從這點來看Dekstop版本的WinUI 3工程，更像WPF。
MainWindow是一個標準的XAML Window物件，在App.xaml.cs的OnLaunched方法中例項化，然後Activate。

        protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs args)
        {
            m_window = new MainWindow();
            m_window.Activate();
        }

        private Window m_window;

當然我們也可以拋開Window物件，像UWP一樣通過Page開局。

        protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs args)
        {
            m_window = new Window();

            var rootFrame = new Frame();
            m_window.Content = rootFrame;
            rootFrame.Navigate(typeof(BlankPage1));

            m_window.Activate()
        }

        private Window m_window;

如果我們開啟MainWindow.xaml檔案，會發現名稱空間依然和十年前如出一轍，可以認為XAML這套東西仍會在將來的很長一段時間記憶體在。我們切換到MainWindow.xaml.cs中，情況和WPF或UWP就稍有不同。名稱空間由WPF的Syste.Windows和UWP的Windows.UI.Xaml被統一為了Microsoft.UI.Xaml。這應該就是WinUI 3的使命，即統一今後Windows 桌面開發的UI。同時我也注意到，除了System這樣的基礎框架類庫外（可以認為這部分與平臺無關，隸屬於.NET 5），Win UI3對Windows runtime API的使用，已經切換到了Windows.Foundation這一名稱空間下，與UWP保持一致。
如果忽略這些細節上的變動，那麼可以認為WinUI 3的Desktop版，就是WPF+UWP混著寫。至於流毒甚久的某軟出一版框架，就要推倒重頭學一次的說法，我個人表示完全是無稽之談，至少從WPF，Sliverlight，UWP到WinUI 3都是平滑過渡。
下面轉到FristWinUI3App(Package)工程，這個打包工程是用於將exe打包成MSIX結構的安裝檔案，上傳到微軟商店用的。以後如果支援非Package版的Desktop開發，該工程則不是必須的。
Dependencies下的Applications節點，包含被打包的FirstWinUI3App的引用，當然這個是自動新增的，不需要我們操心。Images節點下，包含了微軟商店應用程式需要的各種尺寸的圖示和圖片。

最後我們雙擊Package.appxmanifest檔案，可以開啟該檔案對應的編輯器，用以宣告APP的各種能力，設定圖示，標註APP需要向使用者申請的許可權，以及打包的資訊諸如發行商，APP名稱等等。這一塊的內容完全繼承自UWP。

對WinUI 3的第一次探索到此就告一段落。後面我們會在Github上fork Xaml-Controls-Gallery這個repo，並切換到WinUI3分支，來進一步學習WinUI 3是怎麼將現代化的UI帶給Windows Desktop APP的。
本篇示例程式碼：

WinUI3Samples/WinUI3Samples/FirstWinUI3App at main · manupstairs/WinUI3Samples (github.com)

以下連結，是MS Learn上Windows開發的入門課程，單個課程三十分鐘到60分鐘不等，如需補充基礎知識的同學點這裡：

開始使用 Visual Studio 開發 Windows 10 應用

開發 Windows 10 應用程式

編寫首個 Windows 10 應用

建立 Windows 10 應用的使用者介面 (UI)

增強 Windows 10 應用的使用者介面

在 Windows 10 應用中實現資料繫結

相關文章