WinUI 3（MVVM）中如何正确显示带输入的ContentDialog

一、解决ViewModel无法打开ContentDialog的问题 #

ViewModel里不能直接操作UI控件，这是MVVM的核心原则。解决思路是让View层负责对话框的显示逻辑，ViewModel只触发打开指令，常用两种实现方式：

方案1：用CommunityToolkit.Mvvm的Messenger（最省心的主流方案） #

这是WinUI生态中MVVM消息传递的常用工具，步骤简单清晰：

1. 定义消息类（需要传参数可添加对应属性）

public class OpenAddSongDialogMessage { }

2. 在LibraryViewModel中发送打开对话框的消息

using CommunityToolkit.Mvvm.Messaging;

public class LibraryViewModel : ObservableObject
{
    public ICommand OpenAddSongDialogCommand => new RelayCommand(() =>
    {
        WeakReferenceMessenger.Default.Send(new OpenAddSongDialogMessage());
    });
}

3. 在LibraryPage后台代码中监听消息，负责实际打开对话框

using CommunityToolkit.Mvvm.Messaging;

public sealed partial class LibraryPage : Page
{
    public LibraryViewModel ViewModel { get; }

    public LibraryPage()
    {
        InitializeComponent();
        ViewModel = new LibraryViewModel();
        // 注册消息监听
        WeakReferenceMessenger.Default.Register<OpenAddSongDialogMessage>(this, (_, __) =>
        {
            _ = OpenAddSongDialogAsync();
        });
    }

    private async Task OpenAddSongDialogAsync()
    {
        var dialog = new ContentDialog
        {
            Title = "添加歌曲",
            Content = new LibraryAddSongControl(),
            PrimaryButtonText = "保存",
            CloseButtonText = "取消",
            XamlRoot = this.XamlRoot // 直接获取页面的XamlRoot
        };

        var result = await dialog.ShowAsync();
        if (result == ContentDialogResult.Primary)
        {
            // 获取对话框内的ViewModel并调用添加方法
            if (dialog.Content is LibraryAddSongControl control && control.DataContext is LibraryAddSongViewModel vm)
            {
                await vm.AddSongAsync();
            }
        }
    }
}

方案2：注入Dialog服务（适合大型项目的解耦需求） #

如果项目规模较大，需要把对话框逻辑抽离成独立服务，可定义接口实现解耦：

public interface IDialogService
{
    Task<ContentDialogResult> ShowAddSongDialogAsync();
}

public class DialogService : IDialogService
{
    private readonly XamlRoot _xamlRoot;

    public DialogService(XamlRoot xamlRoot) => _xamlRoot = xamlRoot;

    public async Task<ContentDialogResult> ShowAddSongDialogAsync()
    {
        var dialog = new ContentDialog
        {
            Title = "添加歌曲",
            Content = new LibraryAddSongControl(),
            PrimaryButtonText = "保存",
            CloseButtonText = "取消",
            XamlRoot = _xamlRoot
        };
        return await dialog.ShowAsync();
    }
}

在页面中实例化服务并传入ViewModel：

public sealed partial class LibraryPage : Page
{
    public LibraryViewModel ViewModel { get; }

    public LibraryPage()
    {
        InitializeComponent();
        var dialogService = new DialogService(this.XamlRoot);
        ViewModel = new LibraryViewModel(dialogService);
    }
}

public class LibraryViewModel : ObservableObject
{
    private readonly IDialogService _dialogService;

    public LibraryViewModel(IDialogService dialogService) => _dialogService = dialogService;

    public ICommand OpenAddSongDialogCommand => new RelayCommand(async () =>
    {
        var result = await _dialogService.ShowAddSongDialogAsync();
        if (result == ContentDialogResult.Primary)
        {
            // 可通过让DialogService返回ViewModel等方式获取输入数据
        }
    });
}

二、解决TextBox绑定属性为空的问题 #

TextBox默认在失去焦点时才更新绑定源，点击对话框保存按钮时，TextBox可能还未失焦，导致ViewModel中的属性为空。两种解决办法：

方法1：实时同步绑定（简单直接） #

在XAML中给每个TextBox添加UpdateSourceTrigger=PropertyChanged，输入内容时立刻同步到ViewModel：

<TextBox Header="歌曲名" Text="{x:Bind ViewModel.SongName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
<TextBox Header="歌手" Text="{x:Bind ViewModel.Artist, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />

方法2：保存前手动更新绑定（适合需延迟校验的场景） #

如果不想实时同步，可在点击保存前强制更新所有TextBox的绑定源：

// 在LibraryPage的OpenAddSongDialogAsync方法中
if (result == ContentDialogResult.Primary)
{
    if (dialog.Content is LibraryAddSongControl control)
    {
        // 递归遍历控件内所有TextBox，更新绑定源
        foreach (var textBox in FindVisualChildren<TextBox>(control))
        {
            textBox.GetBindingExpression(TextBox.TextProperty)?.UpdateSource();
        }

        if (control.DataContext is LibraryAddSongViewModel vm)
        {
            await vm.AddSongAsync();
        }
    }
}

// 辅助方法：查找所有子控件中的TextBox
private IEnumerable<T> FindVisualChildren<T>(DependencyObject parent) where T : DependencyObject
{
    for (int i = 0; i < VisualTreeHelper.GetChildrenCount(parent); i++)
    {
        var child = VisualTreeHelper.GetChild(parent, i);
        if (child is T t) yield return t;
        foreach (var grandChild in FindVisualChildren<T>(child)) yield return grandChild;
    }
}

三、SQLite存储处理（LibraryAddSongViewModel） #

确保AddSong方法能获取到同步后的属性，再执行SQLite存储逻辑：

public class LibraryAddSongViewModel : ObservableObject
{
    private string _songName;
    public string SongName
    {
        get => _songName;
        set => SetProperty(ref _songName, value);
    }

    private string _artist;
    public string Artist
    {
        get => _artist;
        set => SetProperty(ref _artist, value);
    }

    private readonly ISqliteService _sqliteService;

    public LibraryAddSongViewModel(ISqliteService sqliteService) => _sqliteService = sqliteService;

    public async Task AddSongAsync()
    {
        // 属性已同步，直接使用即可
        if (string.IsNullOrWhiteSpace(SongName))
            throw new ArgumentException("歌曲名不能为空");

        var song = new Song
        {
            Name = SongName,
            Artist = Artist
        };

        await _sqliteService.InsertSongAsync(song);
    }
}

内容的提问来源于stack exchange，提问作者Andi