WinUI3中如何为不同ViewModel复用通用EditorView视图？

核心思路 #

通过泛型依赖属性+泛型视图实现通用EditorView，既保留强类型ViewModel的绑定能力，解决接口绑定导致的属性更新失效问题，又能复用视图逻辑，新增编辑器时仅需实现ViewModel即可。

步骤实现 #

1. 创建泛型通用视图 EditorView<T>

将原有视图的ViewModel属性改为泛型，限制泛型类型为IEditorViewModel，确保所有传入的ViewModel都具备通用视图所需的属性和方法：

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using YourNamespace.ViewModels; // 替换为你的ViewModel命名空间

public sealed partial class EditorView<T> : UserControl where T : IEditorViewModel
{
    public T EditorViewModel
    {
        get => (T)GetValue(EditorViewModelProperty);
        set => SetValue(EditorViewModelProperty, value);
    }

    public static readonly DependencyProperty EditorViewModelProperty =
        DependencyProperty.Register(
            nameof(EditorViewModel),
            typeof(T),
            typeof(EditorView<T>),
            new PropertyMetadata(default));

    public EditorView(T viewModel)
    {
        this.InitializeComponent();
        EditorViewModel = viewModel;
    }
}

2. 编写通用XAML布局

在EditorView.xaml中，所有UI元素绑定到泛型的EditorViewModel属性，确保通用逻辑复用：

<UserControl
    x:Class="YourNamespace.Views.EditorView`1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:YourNamespace.Views">

    <StackPanel Padding="16">
        <!-- 复用的UserControl，绑定通用ViewModel属性 -->
        <local:EditorHeaderControl 
            Title="{x:Bind EditorViewModel.EditorTitle, Mode=OneWay}"
            StatusIndicator="{x:Bind EditorViewModel.WorkflowStatus, Mode=OneWay}" />
        
        <!-- 其他通用编辑器UI元素 -->
        <Button Content="保存" Command="{x:Bind EditorViewModel.SaveCommand}" />
        <Button Content="取消" Command="{x:Bind EditorViewModel.CancelCommand}" />
    </StackPanel>
</UserControl>

3. 在父页面中使用泛型视图

在需要使用编辑器的页面XAML中，通过x:TypeArguments指定具体的ViewModel类型，完成绑定：

<Page
    x:Class="YourNamespace.Views.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:YourNamespace.Views"
    xmlns:vm="using:YourNamespace.ViewModels">

    <Grid>
        <!-- 使用图标编辑器 -->
        <local:EditorView x:TypeArguments="vm:IconEditorViewModel"
                          EditorViewModel="{x:Bind ViewModel.IconEditorVm, Mode=OneWay}" />
        
        <!-- 使用颜色编辑器 -->
        <local:EditorView x:TypeArguments="vm:ColorEditorViewModel"
                          EditorViewModel="{x:Bind ViewModel.ColorEditorVm, Mode=OneWay}" />
    </Grid>
</Page>

4. 确保ViewModel实现规范

所有ViewModel需继承CommunityToolkit.MVVM的ObservableObject并实现IEditorViewModel接口，保证属性变更通知正常触发：

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

public interface IEditorViewModel
{
    string EditorTitle { get; }
    WorkflowStatus WorkflowStatus { get; }
    IRelayCommand SaveCommand { get; }
    IRelayCommand CancelCommand { get; }
}

public enum WorkflowStatus
{
    Idle,
    Processing,
    Completed,
    Failed
}

public class IconEditorViewModel : ObservableObject, IEditorViewModel
{
    private string _editorTitle = "图标编辑器";
    public string EditorTitle
    {
        get => _editorTitle;
        set => SetProperty(ref _editorTitle, value);
    }

    private WorkflowStatus _workflowStatus = WorkflowStatus.Idle;
    public WorkflowStatus WorkflowStatus
    {
        get => _workflowStatus;
        set => SetProperty(ref _workflowStatus, value);
    }

    public IRelayCommand SaveCommand => new RelayCommand(ExecuteSave);
    public IRelayCommand CancelCommand => new RelayCommand(ExecuteCancel);

    private void ExecuteSave()
    {
        // 保存逻辑
        WorkflowStatus = WorkflowStatus.Processing;
        // 模拟异步操作
        Task.Delay(1000).ContinueWith(_ => WorkflowStatus = WorkflowStatus.Completed);
    }

    private void ExecuteCancel()
    {
        // 取消逻辑
        WorkflowStatus = WorkflowStatus.Idle;
    }
}

方案优势 #

• 新增编辑器时，仅需创建实现IEditorViewModel的ViewModel，无需重复编写视图代码
• 强类型绑定避免了接口绑定导致的属性更新失效问题，WorkflowStatus等状态指示器可正常响应变更
• 完全兼容CommunityToolkit.MVVM的特性，简化ViewModel的属性和命令实现

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