WPF中TabControl选中指定标签时如何动态展示对应自定义View

需补充的核心内容 #

你当前只配置了TabControl的标签头部渲染规则，缺少标签内容区域的渲染逻辑，需要补充2部分：

1. 闭合你当前遗漏的</TabControl.ItemTemplate>标签
2. 添加TabControl.ContentTemplate定义选中标签后内容区域的加载规则

方案1（通过类型动态创建View实例） #

你需要先实现一个类型转实例的转换器，代码如下：

public class TypeToInstanceConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is not Type type) return null;
        return Activator.CreateInstance(type);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

在页面资源中注册转换器：

<Window.Resources>
    <local:TypeToInstanceConverter x:Key="TypeToInstanceConverter"/>
</Window.Resources>

修改后的完整TabControl代码：

<TabControl ItemsSource="{Binding Tabs}"
            TabStripPlacement="Left"
            SelectedIndex="{Binding SelectedIndex}">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Name}"/>
        </DataTemplate>
    </TabControl.ItemTemplate>
    <!-- 新增内容模板 -->
    <TabControl.ContentTemplate>
        <DataTemplate>
            <ContentControl DataContext="{Binding ViewModel()}">
                <ContentControl.Content>
                    <Binding Path="TypeView" Converter="{StaticResource TypeToInstanceConverter}"/>
                </ContentControl.Content>
            </ContentControl>
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

方案2（隐式DataTemplate匹配，更符合MVVM规范） #

如果你已经在资源中注册了ViewModel和对应View的隐式数据模板（示例如下）：

<Window.Resources>
    <DataTemplate DataType="{x:Type vm:PersonalSettingViewModel}">
        <view:PersonalSettingView/>
    </DataTemplate>
    <DataTemplate DataType="{x:Type vm:AboutSettingViewModel}">
        <view:AboutSettingView/>
    </DataTemplate>
</Window.Resources>

不需要额外转换器，ContentTemplate可以简化为：

<TabControl.ContentTemplate>
    <DataTemplate>
        <ContentControl Content="{Binding ViewModel()}"/>
    </DataTemplate>
</TabControl.ContentTemplate>

内容的提问来源于stack exchange，提问作者alexei.sorokin