WinUI 3學習筆記(1)—— First Desktop App

樓上那個蜀黍 發表於 2021-06-15

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

WinUI 3學習筆記(1)—— First Desktop App

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

WinUI 3學習筆記(1)—— First Desktop App

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

WinUI 3學習筆記(1)—— First Desktop App

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

WinUI 3學習筆記(1)—— First Desktop App

檢查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節點下,包含了微軟商店應用程式需要的各種尺寸的圖示和圖片。

WinUI 3學習筆記(1)—— First Desktop App

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

WinUI 3學習筆記(1)—— First Desktop App

對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 應用中實現資料繫結