C++/WinUI 3 技术笔记（一）

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

微软在 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(); }

在入口函数中，把创建的页面对象塞进窗口中，一个简单的应用就搭好了。