1.概述:
先来看看官方对WinUI3解释:
WinUI 3 是本机 UI 平台组件,随附 Windows 应用 SDK(与 Windows SDK 完全分离)。 Windows 应用 SDK 提供了一组统一的 API 和工具,可用于创建面向 Windows 10 及更高版本且可发布到 Microsoft Store 的生产桌面应用。
相信使用WinUI3的朋友,大多有WPF的开发经验。下面将WinUI3和WPF做一点简单对比,让大家了解两者之间的差别:
从应用的组成来看:WinUI3(后续用“它”替代)是包含一个Window和多个Page组成的,WPF通常是多窗口。
从代码结构来看:它仍然是采用XAML+C#的前后端模式,同样也支持MVVM绑定。
从界面美观来看:它的界面相较于WPF而言更加简洁、友好。
1.1 安装
WinUI3官方扩展,请前往官网下载扩展并安装,再次重启Visual Studio,创建项目就可以看见WinUI3的项目模板了。
2.主要内容:
通过简单的对比可知,它和WPF非常相似,下面讲讲我在开发时遇到与WPF开发不太一致的“坑”。
2.1 Xaml预览
大家创建WinUI3项目后,是否发现与WPF的最大差异:没有Xaml预览界面。这里需要启动调试模式,即可动态修改UI界面。
2.2 Frame
Frame只能导航到Page页面,如果是窗口则会出现异常,无法导航。
ContentFrame.Navigate(pageType, null, new SlideNavigationTransitionInfo()
{ Effect = slideNavigationTransitionEffect }); // 这里ContentFrame是Frame的X:Name
2.3 ContentDialog
WinUI3提供的消息框,与WPF不同的是该消息框提供了遮罩层并在屏幕中央显示。但在xaml或window使用时,需要传入XamlRoot,否则会抛出异常。这里的Root需要从具体的控件或者窗体获取,可以拿到主窗体的XamlRoot传入。
public static async Task<ContentDialogResult> ShowXamlAsync(XamlRoot root, string message, string title = "xxx")
{
ContentDialog dialog = new()
{
Title = title,
Content = message,
PrimaryButtonText = "确定",
CloseButtonText = "取消",
XamlRoot = root
};
ContentDialogResult result = await dialog.ShowAsync();
return result;
}
ps:同一时刻只能有一个ContentDialog消息框,WinUI3不支持同时有多消息框的。我认为这点就有点难受,大家可以自定义消息框。
2.4 跨线程调用UI控件
很多时候我们需要在子线程中更新UI线程的控件,WPF是通过Dispatcher.Invoke()或App.Current…Dispatcher.Invoke()调用的,WinUI3却不太相同。具体代码如下:
DispatcherQueue.TryEnqueue(()=>{
Hide(); // 这里的Hide()是我隐藏ContentDialog的方法,大家可以任意替换UI操作
});
如果需要在ViewModel或其他非控件、窗体中跨线程调用UI控件,请使用你要更新的窗体的DispatcherQueue。例如:MainWindow.DispatcherQueue.TryEnqueue();
2.5 数据绑定
在WPF中,通常是通过{Binding xxx}来实现绑定的。但在WinUI3中,保留了WPF的绑定方式外提供了{x:Bind yyy}的方式来绑定。示例代码如下:
<control:DataGrid ItemsSource="{x:Bind ParamList, Mode=OneWay}" ScrollViewer.VerticalScrollBarVisibility="Auto" />
这里我给DataGrid的ItemsSource绑定了一个集合,在WPF中如果我们不使用如下代码来绑定DataContext,你通过F12是跳转不过去的,没有产生映射。但WinUI3可以直接跳转,我认为这里相对于WPF的交互是有提升的(ps:具体的实现逻辑还没研究过)。
d:DataContext="{d:DesignInstance Type=local:ParamListPage}"
ps:当你的绑定需要从后台动态修改前端控件,需要设置Mode为OneWay,否则更新不生效,WPF默认单向绑定(后台修改影响前台,前台修改不会影响后台)。
补充一句:WinUI3没有DataGrid控件,需要手动添加CommunityToolkit.WinUI.UI.Controls.DataGrid的Nuget包.