C++/WinUI3技术笔记(一)

编程

微软在 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.hApp.xaml.cpp 实现了 WinRT 主应用类,这里封装了程序入口函数。

void App::OnLaunched(LaunchActivatedEventArgs const&)

{

window = make<MainWindow>();

window.Activate();

}

入口很简单,创建主窗口并激活。

MainWindow.xaml 描述了应用的主窗口界面,MainWindow.xaml.hMainWindow.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

以上是 C++/WinUI3技术笔记(一) 的全部内容, 来源链接: utcz.com/z/520193.html

回到顶部