WPF/MVVM：单一ViewModel适配双视图的实现问题

我来帮你搞定这个问题！你之前的思路是靠不同ViewModel类型让TemplateSelector匹配对应视图，现在合并成一个VM后，类型唯一了Selector自然“懵圈”了。核心思路是给合并后的VM加一个「视图标识」，让Selector能根据这个标识来选对应的视图，具体步骤如下：

1. 改造合并后的ViewModel #

给它加一个用来标记当前视图类型的属性，直接复用你原来的navigationType枚举就行，同时把两个原VM的属性、方法都整合进来：

public class CombinedViewModel : INotifyPropertyChanged
{
    // 视图类型标识，用来告诉Selector该显示哪个视图
    private navigationType _currentViewType;
    public navigationType CurrentViewType
    {
        get => _currentViewType;
        set
        {
            _currentViewType = value;
            OnPropertyChanged();
        }
    }

    // 整合原来两个ViewModel的所有业务属性
    // 比如原ViewA对应的属性：
    public string ViewASpecificData { get; set; }
    // 原ViewB对应的属性：
    public int ViewBCounter { get; set; }

    // INotifyPropertyChanged实现，确保属性变更通知UI
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. 自定义适配的TemplateSelector #

修改Selector的逻辑，不再依赖ViewModel类型，而是读取CurrentViewType属性来选择模板：

public class CombinedViewTemplateSelector : DataTemplateSelector
{
    // 暴露两个模板属性，方便在XAML中绑定对应视图
    public DataTemplate ViewATemplate { get; set; }
    public DataTemplate ViewBTemplate { get; set; }

    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        if (item is CombinedViewModel vm)
        {
            return vm.CurrentViewType switch
            {
                navigationType.ViewA => ViewATemplate,
                navigationType.ViewB => ViewBTemplate,
                _ => base.SelectTemplate(item, container)
            };
        }
        return base.SelectTemplate(item, container);
    }
}

3. 调整XAML配置 #

在Window资源中定义视图模板和Selector，然后给ContentControl指定Selector：

<Window.Resources>
    <!-- 定义两个视图的DataTemplate -->
    <DataTemplate x:Key="ViewATemplate">
        <local:YourViewAUserControl />
    </DataTemplate>
    <DataTemplate x:Key="ViewBTemplate">
        <local:YourViewBUserControl />
    </DataTemplate>

    <!-- 实例化自定义Selector，绑定对应的模板 -->
    <local:CombinedViewTemplateSelector x:Key="CombinedViewSelector"
                                        ViewATemplate="{StaticResource ViewATemplate}"
                                        ViewBTemplate="{StaticResource ViewBTemplate}" />
</Window.Resources>

<!-- 调整ContentControl的绑定和Selector -->
<ContentControl Content="{Binding MainContent}"
                ContentTemplateSelector="{StaticResource CombinedViewSelector}" />

4. 切换视图的方式 #

现在不需要替换MainContent的ViewModel了，只需要修改CombinedViewModel的CurrentViewType属性即可：

// 切换到ViewA
((CombinedViewModel)MainContent).CurrentViewType = navigationType.ViewA;
// 切换到ViewB
((CombinedViewModel)MainContent).CurrentViewType = navigationType.ViewB;

注意事项 #

• 确保两个UserControl的绑定路径都能对应到CombinedViewModel的属性上，因为它们的DataContext现在都是这个合并后的VM了。
• 如果需要，可以给CurrentViewType设置默认值，比如初始化时默认显示ViewA。

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