Avalonia：是否有同时支持桌面与WebAssembly的模态对话框现成方案？

现成兼容方案 #

直接使用Avalonia 11及以上版本内置的MessageDialog，它原生支持桌面（Windows/macOS/Linux）和WebAssembly平台，无需额外第三方NuGet包，调用逻辑和WPF的MessageBox一致，可直接配置YES/NO选项：

using Avalonia.Controls;
using Avalonia.Controls.Dialogs;

// 在代码后台或ViewModel中调用
var result = await MessageBox.Show(
    parentWindow,
    "确认执行此操作？",
    "提示",
    MessageBoxButton.YesNo,
    MessageBoxIcon.Question
);

if (result == MessageBoxResult.Yes)
{
    // 执行确认逻辑
}
else
{
    // 执行取消逻辑
}

自定义跨平台实现建议 #

如果需要个性化样式或特殊交互逻辑，可以自行实现兼容双平台的对话框：

1. 构建自定义对话框UserControl #

设计包含标题、提示文本、YES/NO按钮的UserControl，使用Avalonia自适应布局控件（如Grid、StackPanel）确保跨平台显示一致性，绑定按钮命令用于回调结果。

2. 封装跨平台对话框服务 #

实现统一的服务类，分别处理桌面和WASM平台的模态显示逻辑：

• 桌面端：将UserControl嵌入Window，通过ShowDialog显示模态窗口，自动继承系统模态特性。
• WASM端：使用Popup控件承载对话框，配合半透明遮罩层实现模态效果（阻止底层交互）。

简化版代码示例：

using Avalonia;
using Avalonia.Controls;
using Avalonia.Media;
using CommunityToolkit.Mvvm.Input;

// 对话框服务接口
public interface IDialogService
{
    Task<bool> ShowYesNoDialog(string title, string message, Window owner);
}

// 具体实现
public class DialogService : IDialogService
{
    public async Task<bool> ShowYesNoDialog(string title, string message, Window owner)
    {
        var dialog = new YesNoDialog
        {
            Title = title,
            Message = message
        };

        bool dialogResult = false;
        dialog.YesCommand = new RelayCommand(() =>
        {
            dialogResult = true;
            dialog.Close();
        });
        dialog.NoCommand = new RelayCommand(() =>
        {
            dialogResult = false;
            dialog.Close();
        });

        if (OperatingSystem.IsBrowser())
        {
            // WASM端：用Popup+遮罩实现模态
            var popup = new Popup
            {
                Child = dialog,
                PlacementMode = PlacementMode.Center,
                IsOpen = true
            };

            // 添加全屏遮罩
            var overlay = new Border
            {
                Background = Brushes.Black.WithOpacity(0.5),
                Width = owner.Bounds.Width,
                Height = owner.Bounds.Height
            };

            // 将遮罩和popup加入视觉树
            if (owner.Content is Grid rootGrid)
            {
                rootGrid.Children.Add(overlay);
                rootGrid.Children.Add(popup);
            }
            else
            {
                owner.Content = new Grid
                {
                    Children = { owner.Content, overlay, popup }
                };
            }

            await dialog.WaitForClose();

            // 清理资源
            if (owner.Content is Grid grid)
            {
                grid.Children.Remove(overlay);
                grid.Children.Remove(popup);
            }
        }
        else
        {
            // 桌面端：用Window显示模态对话框
            var dialogWindow = new Window
            {
                Content = dialog,
                WindowStartupLocation = WindowStartupLocation.CenterOwner,
                SizeToContent = SizeToContent.WidthAndHeight,
                CanResize = false,
                Title = title
            };
            await dialogWindow.ShowDialog(owner);
        }

        return dialogResult;
    }
}

// 自定义YesNoDialog UserControl核心逻辑
public class YesNoDialog : UserControl
{
    public static readonly StyledProperty<string> TitleProperty =
        AvaloniaProperty.Register<YesNoDialog, string>(nameof(Title));
    public static readonly StyledProperty<string> MessageProperty =
        AvaloniaProperty.Register<YesNoDialog, string>(nameof(Message));

    public string Title
    {
        get => GetValue(TitleProperty);
        set => SetValue(TitleProperty, value);
    }

    public string Message
    {
        get => GetValue(MessageProperty);
        set => SetValue(MessageProperty, value);
    }

    public ICommand YesCommand { get; set; }
    public ICommand NoCommand { get; set; }

    private TaskCompletionSource<bool> _closeTcs;

    public Task WaitForClose()
    {
        _closeTcs = new TaskCompletionSource<bool>();
        return _closeTcs.Task;
    }

    public void Close()
    {
        _closeTcs?.SetResult(true);
        if (Parent is Window window) window.Close();
        else if (Parent is Popup popup) popup.IsOpen = false;
    }
}

注意事项 #

• 确保使用Avalonia 11.0及以上版本，WASM平台的模态控件支持在该版本后更加稳定。
• WASM端实现时需注意视觉树的资源清理，避免内存泄漏。
• 结合MVVM框架（如CommunityToolkit.Mvvm）可将对话框服务注入ViewModel，实现业务逻辑与UI解耦。

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