WinUI TabView根据Tab类型切换ViewModel与布局的实现问题

1. 实现自定义DataTemplateSelector #

WinUI不支持WPF中通过DataType绑定模板的方式，我们可以通过自定义DataTemplateSelector，基于ViewModel的实际类型或ITab接口的TabType属性来匹配对应模板。

public class TabContentTemplateSelector : DataTemplateSelector
{
    public DataTemplate ViewModel1Template { get; set; }
    public DataTemplate ViewModel2Template { get; set; }

    // 核心模板匹配逻辑
    protected override DataTemplate SelectTemplateCore(object item)
    {
        // 方式1：直接判断ViewModel实际类型
        if (item is ViewModel1)
        {
            return ViewModel1Template;
        }
        else if (item is ViewModel2)
        {
            return ViewModel2Template;
        }

        // 方式2：通过ITab的TabType属性判断（耦合更低）
        // if (item is ITab tab)
        // {
        //     return tab.TabType switch
        //     {
        //         TabType.Type1 => ViewModel1Template,
        //         TabType.Type2 => ViewModel2Template,
        //         _ => base.SelectTemplateCore(item)
        //     };
        // }

        return base.SelectTemplateCore(item);
    }

    // WinUI要求必须重写此重载
    protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
    {
        return SelectTemplateCore(item);
    }
}

2. 在XAML中配置模板与选择器 #

先在页面资源中定义不同ViewModel对应的模板，再实例化自定义模板选择器：

<Page.Resources>
    <!-- ViewModel1专属布局模板 -->
    <DataTemplate x:Key="ViewModel1Template">
        <StackPanel Padding="10">
            <TextBlock FontSize="16" Text="ViewModel1 布局" />
            <TextBlock Margin="0,8,0,0" Text="{Binding ViewModel1SpecificProperty}" />
        </StackPanel>
    </DataTemplate>

    <!-- ViewModel2专属布局模板 -->
    <DataTemplate x:Key="ViewModel2Template">
        <StackPanel Padding="10">
            <TextBlock FontSize="16" Text="ViewModel2 布局" />
            <TextBox Margin="0,8,0,0" Text="{Binding ViewModel2SpecificProperty, Mode=TwoWay}" />
        </StackPanel>
    </DataTemplate>

    <!-- 实例化模板选择器，绑定对应模板 -->
    <local:TabContentTemplateSelector x:Key="TabContentSelector"
                                      ViewModel1Template="{StaticResource ViewModel1Template}"
                                      ViewModel2Template="{StaticResource ViewModel2Template}" />
</Page.Resources>

3. 配置TabView的模板与选择器 #

注意区分TabItemTemplate（控制Tab头部显示）和ContentTemplateSelector（控制Tab内容区域），之前显示类名的问题大概率是把选择器错配到了Tab头部，或者内容区域未匹配到模板：

<TabView ItemsSource="{Binding Tabs}">
    <!-- 设置Tab头部的显示模板，绑定ITab的Name属性 -->
    <TabView.TabItemTemplate>
        <DataTemplate>
            <TextBlock Margin="12,0" Text="{Binding Name}" />
        </DataTemplate>
    </TabView.TabItemTemplate>

    <!-- 为内容区域设置模板选择器 -->
    <TabView.ContentTemplateSelector>
        <StaticResource ResourceKey="TabContentSelector" />
    </TabView.ContentTemplateSelector>
</TabView>

4. 排查显示类名的常见问题 #

如果仍出现类名显示，检查以下几点：

• 确认模板选择器的判断逻辑正确，比如item is ViewModel1能准确识别实例（注意ViewModel的访问权限，内部类需调整可见性）。
• 检查XAML中模板选择器的ViewModel1Template和ViewModel2Template是否正确绑定了资源。
• 确认ItemsSource中的元素确实是ViewModel1/ViewModel2的实例，而非仅实现ITab的空对象。

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