MAUI XAML中如何根据选中项类型切换显示模板？

实现步骤 #

1. 创建自定义DataTemplateSelector #

创建继承自DataTemplateSelector的类，重选模板逻辑，根据选中项的接口类型返回对应模板：

public class FooTemplateSelector : DataTemplateSelector
{
    // 绑定IFooA对应的显示模板
    public DataTemplate FooATemplate { get; set; }
    // 绑定IFooB对应的显示模板
    public DataTemplate FooBTemplate { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        // 根据接口类型匹配对应模板
        return item switch
        {
            IFooA => FooATemplate,
            IFooB => FooBTemplate,
            _ => base.OnSelectTemplate(item, container)
        };
    }
}

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

在页面资源中定义IFooA、IFooB的专属模板，再实例化自定义选择器并关联模板：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:你的应用命名空间"
             x:Class="你的应用页面类">
    <ContentPage.Resources>
        <!-- IFooA的显示模板 -->
        <DataTemplate x:Key="FooATemplate">
            <StackLayout Padding="10" Spacing="5">
                <Label Text="当前选中IFooA类型" FontAttributes="Bold" TextColor="Green"/>
                <!-- 可绑定IFooA特有属性，示例：<Label Text="{Binding FooASpecificProp}"/> -->
            </StackLayout>
        </DataTemplate>

        <!-- IFooB的显示模板 -->
        <DataTemplate x:Key="FooBTemplate">
            <StackLayout Padding="10" Spacing="5" BackgroundColor="#F0F8FF">
                <Label Text="当前选中IFooB类型" FontSize="16" TextColor="Blue"/>
                <!-- 可绑定IFooB特有属性，示例：<Label Text="{Binding FooBSpecificProp}"/> -->
            </StackLayout>
        </DataTemplate>

        <!-- 实例化模板选择器，关联上述模板 -->
        <local:FooTemplateSelector x:Key="FooTemplateSelector"
                                   FooATemplate="{StaticResource FooATemplate}"
                                   FooBTemplate="{StaticResource FooBTemplate}"/>
    </ContentPage.Resources>

    <Grid>
        <!-- Picker控件，绑定数据源与选中项 -->
        <Picker ItemsSource="{Binding Items}" 
                ItemDisplayBinding="{Binding Name}"  
                SelectedItem="{Binding SelectedItem}"/>
        
        <!-- ContentPresenter绑定选中项，通过选择器自动切换模板 -->
        <ContentPresenter Content="{Binding SelectedItem}"
                          ContentTemplateSelector="{StaticResource FooTemplateSelector}"
                          Margin="0,60,0,0"/>
    </Grid>
</ContentPage>

关键注意事项 #

• 确保MyViewModel中的SelectedItem属性正确触发OnPropertyChanged，保证Picker选中项变化时，ContentPresenter能实时更新内容与模板。
• 判断接口类型时使用is关键字，因为选中项是实现接口的具体类实例，直接用GetType()无法匹配接口类型。
• 可按需给FooTemplateSelector添加DefaultTemplate属性，处理非IFooA/IFooB类型的兜底场景。

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