微軟在 Windows 10 Version 1809 上正式發布了新的 UI 框架，命名為 WinUI 3，
這已經是微軟發布的第不知道多少個 UI 框架了，但是微軟宣稱它將支持原生 C++ 和 Win32 應用，這引起了我的注意，因為微軟已經很久沒有為 Win32 提供新的技術了，
架構
按微軟的說法，WinUI 3 是同時為 Win32 和 UWP 程式提供支持的，也就是說它應該允許獨立運行在 Win32 框架上，不受 UWP 的權限管理限制，
對于 C++ 開發者，WinUI 3 借助 C++/WinRT 有完全的原生 C++ 支持，而不需要 C++/CX 或 C++/CLI 這樣劍走偏鋒的設計，這無疑對 GCC 或 Clang 上編譯 WinUI 3 留下了可能，作為開發者，著實不希望微軟帶領技術走向分裂，
對于 UI 設計，WinUI 3 繼承了 UWP 程式的 XAML 技術，為用戶提供了 Fluent 風格的控制元件和互動體驗，也就是說在核心的 UI 開發方式上，還是和 UWP 保持一致的，只是控制元件風格有所改變，但是 WinUI 3 不受 UWP 復雜的權限約束限制，可以說對 Win32 開發者十分友好了，
開發
開發環境
開發前按照微軟檔案配置安裝環境，
Install tools for developing apps for Windows 10 and Windows 11
模板工程
開發環境搭建好后，通過工程模板
使用 Visual Studio 的 WinUI 3 創建模板創建工程，
WinUI 3 project templates in Visual Studio
以 C++/WinUI 3 為例，工程創建后，資源管理器中有不少專案，這里先關注兩個重要的 xaml 項，其他檔案的用途后續再研究，
App.xaml 描述了 Windows 應用的基本屬性，App.xaml.h 和 App.xaml.cpp 實作了 WinRT 主應用類，這里封裝了程式入口函式，
void App::OnLaunched(LaunchActivatedEventArgs const&)
{
window = make<MainWindow>();
window.Activate();
}
入口很簡單，創建主視窗并激活，
MainWindow.xaml 描述了應用的主視窗界面，MainWindow.xaml.h 和 MainWindow.xaml.cpp 實作了主視窗類，這里封裝了視窗事件回呼，
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<Button x:Name="myButton" Click="myButton_Click">Click Me</Button>
</StackPanel>
主視窗描述了一個居中的堆疊布局，里面有一個按鈕 myButton，
void MainWindow::myButton_Click(IInspectable const&, RoutedEventArgs const&)
{
myButton().Content(box_value(L"Clicked"));
}
主視窗類也很簡單，當按鈕 myButton 點擊時，替換其內容文本，
我們回頭看 MainWindow 的定義，
struct MainWindow : MainWindowT<MainWindow>
{
MainWindow();
int32_t MyProperty();
void MyProperty(int32_t value);
void myButton_Click(
Windows::Foundation::IInspectable const& sender,
Microsoft::UI::Xaml::RoutedEventArgs const& args);
};
和傳統的 Win32 UI 技術不同，MainWindow 類并沒有訊息處理函式，也無需處理訊息回圈，但是這個 myButton_Click 函式是如何和 MainWindow.xaml 中描述的 myButton 按鈕系結在一起呢？
追蹤 myButton_Click 函式的呼叫，可以發現呼叫者在 MainWindow.xaml.g.h 檔案中，這個檔案正是 C++/WinRT 對 MainWindow.xaml 描述的物件生成的 C++ 代碼，微軟在符合 C++ 17 標準的前提下，通過使用大量新的語言特性，將 WinRT API 封裝到頭檔案模板庫中，供開發者使用，
編譯運行模板工程，
測驗了下這個視窗，無論是執行速度、字體渲染還是高 DPI 縮放都處理的很不錯，不得不說，微軟在技術實力和設計大框架上一直都讓人很佩服（笑），
添加頁面
下面我們添加一個自己頁面，在工程中插入一個新的 WinUI 3 空白頁 RootPage.xaml，
界面和代碼參考微軟提供的 XAML 控制元件演示工程，
Xaml-Controls-Gallery
<NavigationView x:Name="RootNavigation">
<NavigationView.MenuItems>
<NavigationViewItem Icon="Play" Content="Menu Item1" Tag="SamplePage1" />
<NavigationViewItem Icon="Save" Content="Menu Item2" Tag="SamplePage2" />
<NavigationViewItem Icon="Refresh" Content="Menu Item3" Tag="SamplePage3" />
<NavigationViewItem Icon="Download" Content="Menu Item4" Tag="SamplePage4" />
</NavigationView.MenuItems>
<Frame x:Name="RootFrame"/>
</NavigationView>
在 Page 中描述一個側邊導航欄，和一個主頁面框架，作為應用的基礎結構，
void App::OnLaunched(LaunchActivatedEventArgs const&)
{
window = make<MainWindow>();
auto rootPage = make<RootPage>();
window.Content(rootPage);
window.Activate();
}
在入口函式中，把創建的頁面物件塞進視窗中，一個簡單的應用就搭好了，
布局、控制元件、頁面路由和事件互動等話題在下一篇中討論，
參考
- [1] Windows UI Library (WinUI) 3
- [2] Dino.C：WinUI 3 試玩報告
作者：Lyin.CC
著作權：本文采用「CC BY 4.0」知識共享許可協議進行許可，
地址：https://www.cnblogs.com/lyincc/p/cpp-winui-3-note-01.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/423518.html
標籤：其他
下一篇：深入聊一下const關鍵字