WinUI3踩坑记录

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包.