.NET Maui：通过单选按钮切换视图的数据源与数据模板

云原生阿岚

2026-8-3

MAUI实现自定义Tab切换（适配多平台）

场景与问题

已在MAUI应用底部实现TabBar全局菜单
需要给每个TabBar标签页顶部加一个可切换子内容的Tab组件
限制：DevExpress TabView不支持Windows，Syncfusion SfTabView暂无许可证，只能用原生组件实现

已经想到用单选按钮模拟Tab切换，但不知道怎么根据选中值（People/Animal/Plant）动态切换页面的数据源和DataTemplate，现有代码结构如下，希望替换StackLayout部分实现动态切换，也欢迎其他替代方案：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Demo"
             xmlns:controls="clr-namespace:Demo.Controls"
             ...>

    <ContentPage.BindingContext>
        <local:PeopleViewModel x:Key="PeopleView" />
        <local:AnimalViewModel x:Key="AnimalView" />
        <local:PlantViewModel x:Key="PlantView" />
    </ContentPage.BindingContext>

    <ContentPage.Resources>
        <DataTemplate x:Key="PeopleTemplate">
            <controls:CardView BorderColor="DarkGray"
                               CardTitle="{Binding Name}"
                               CardDescription="{Binding Description}"
                               ControlTemplate="{StaticResource PeopleCardView}" />
        </DataTemplate>
        <DataTemplate x:Key="AnimalTemplate">
            <controls:CardView BorderColor="DarkGray"
                               CardTitle="{Binding Name}"
                               CardDescription="{Binding Description}"
                               ControlTemplate="{StaticResource AnimalCardView}" />
        </DataTemplate>
        <DataTemplate x:Key="PlantTemplate">
            <controls:CardView BorderColor="DarkGray"
                               CardTitle="{Binding Name}"
                               CardDescription="{Binding Description}"
                               ControlTemplate="{StaticResource PlantCardView}" />
        </DataTemplate>
    </ContentPage.Resources>

    ...

    <StackLayout Margin="10"
                 BindableLayout.ItemsSource="{Binding People}"
                 BindableLayout.ItemTemplate="{StaticResource PeopleTemplate}" />


</ContentPage>

期望效果：

选中People时，StackLayout绑定People数据源和PeopleTemplate
选中Animal时，绑定Animal数据源和AnimalTemplate
选中Plant时，绑定Plant数据源和PlantTemplate

解决方案

方案一：ViewModel驱动的绑定方式（推荐，符合MVVM规范）

1. 重构主ViewModel

创建一个整合型ViewModel，统一管理所有子数据源和当前选中状态：

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace Demo
{
    public class MainTabViewModel : INotifyPropertyChanged
    {
        // 各分类数据源
        public ObservableCollection<PeopleModel> People { get; set; }
        public ObservableCollection<AnimalModel> Animals { get; set; }
        public ObservableCollection<PlantModel> Plants { get; set; }

        // 当前选中的Tab标识
        private string _selectedTab;
        public string SelectedTab
        {
            get => _selectedTab;
            set
            {
                _selectedTab = value;
                OnPropertyChanged();
                // 触发当前数据源和模板的更新
                OnPropertyChanged(nameof(CurrentItemsSource));
            }
        }

        // 动态返回当前选中的数据源
        public IEnumerable CurrentItemsSource
        {
            get
            {
                return SelectedTab switch
                {
                    "People" => People,
                    "Animal" => Animals,
                    "Plant" => Plants,
                    _ => People // 默认显示People
                };
            }
        }

        public MainTabViewModel()
        {
            // 初始化测试数据（实际项目替换为接口请求）
            People = new ObservableCollection<PeopleModel> { new PeopleModel { Name = "张三", Description = "普通人类" } };
            Animals = new ObservableCollection<AnimalModel> { new AnimalModel { Name = "橘猫", Description = "胖成球的猫" } };
            Plants = new ObservableCollection<PlantModel> { new PlantModel { Name = "玫瑰", Description = "带刺的花" } };

            // 默认选中第一个Tab
            SelectedTab = "People";
        }

        // INotifyPropertyChanged实现
        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    // 数据模型示例（根据实际项目调整）
    public class PeopleModel { public string Name { get; set; } public string Description { get; set; } }
    public class AnimalModel { public string Name { get; set; } public string Description { get; set; } }
    public class PlantModel { public string Name { get; set; } public string Description { get; set; } }
}

2. 添加字符串相等转换器

用于将单选按钮的选中状态与ViewModel的SelectedTab绑定：

using System.Globalization;

namespace Demo.Converters
{
    public class StringEqualsConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return string.Equals(value?.ToString(), parameter?.ToString(), StringComparison.OrdinalIgnoreCase);
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return (bool)value ? parameter : null;
        }
    }
}

3. 修改XAML布局

绑定主ViewModel，添加单选按钮组，并通过DataTrigger动态切换模板：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Demo"
             xmlns:converters="clr-namespace:Demo.Converters"
             xmlns:controls="clr-namespace:Demo.Controls"
             x:Class="Demo.MainTabPage">

    <ContentPage.BindingContext>
        <local:MainTabViewModel />
    </ContentPage.BindingContext>

    <ContentPage.Resources>
        <converters:StringEqualsConverter x:Key="StringEqualsConverter"/>
        
        <DataTemplate x:Key="PeopleTemplate">
            <controls:CardView BorderColor="DarkGray"
                               CardTitle="{Binding Name}"
                               CardDescription="{Binding Description}"
                               ControlTemplate="{StaticResource PeopleCardView}" />
        </DataTemplate>
        <DataTemplate x:Key="AnimalTemplate">
            <controls:CardView BorderColor="DarkGray"
                               CardTitle="{Binding Name}"
                               CardDescription="{Binding Description}"
                               ControlTemplate="{StaticResource AnimalCardView}" />
        </DataTemplate>
        <DataTemplate x:Key="PlantTemplate">
            <controls:CardView BorderColor="DarkGray"
                               CardTitle="{Binding Name}"
                               CardDescription="{Binding Description}"
                               ControlTemplate="{StaticResource PlantCardView}" />
        </DataTemplate>
    </ContentPage.Resources>

    <VerticalStackLayout>
        <!-- 单选按钮模拟Tab栏 -->
        <HorizontalStackLayout Margin="10,5" Spacing="10">
            <RadioButton Content="People" 
                         IsChecked="{Binding SelectedTab, Converter={StaticResource StringEqualsConverter}, ConverterParameter=People}"
                         GroupName="CategoryTab"/>
            <RadioButton Content="Animal" 
                         IsChecked="{Binding SelectedTab, Converter={StaticResource StringEqualsConverter}, ConverterParameter=Animal}"
                         GroupName="CategoryTab"/>
            <RadioButton Content="Plant" 
                         IsChecked="{Binding SelectedTab, Converter={StaticResource StringEqualsConverter}, ConverterParameter=Plant}"
                         GroupName="CategoryTab"/>
        </HorizontalStackLayout>

        <!-- 动态切换内容的StackLayout -->
        <StackLayout Margin="10"
                     BindableLayout.ItemsSource="{Binding CurrentItemsSource}">
            <StackLayout.Triggers>
                <DataTrigger TargetType="StackLayout"
                             Binding="{Binding SelectedTab}"
                             Value="People">
                    <Setter Property="BindableLayout.ItemTemplate" Value="{StaticResource PeopleTemplate}"/>
                </DataTrigger>
                <DataTrigger TargetType="StackLayout"
                             Binding="{Binding SelectedTab}"
                             Value="Animal">
                    <Setter Property="BindableLayout.ItemTemplate" Value="{StaticResource AnimalTemplate}"/>
                </DataTrigger>
                <DataTrigger TargetType="StackLayout"
                             Binding="{Binding SelectedTab}"
                             Value="Plant">
                    <Setter Property="BindableLayout.ItemTemplate" Value="{StaticResource PlantTemplate}"/>
                </DataTrigger>
            </StackLayout.Triggers>
        </StackLayout>
    </VerticalStackLayout>
</ContentPage>

方案二：ContentView直接切换（简单直观，适合小型项目）

如果不想修改ViewModel结构，可以直接通过单选按钮的Checked事件切换ContentView的内容：

1. XAML布局

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Demo"
             xmlns:controls="clr-namespace:Demo.Controls"
             x:Name="ThisPage"
             x:Class="Demo.MainTabPage">

    <ContentPage.BindingContext>
        <local:PeopleViewModel x:Key="PeopleView" />
        <local:AnimalViewModel x:Key="AnimalView" />
        <local:PlantViewModel x:Key="PlantView" />
    </ContentPage.BindingContext>

    <ContentPage.Resources>
        <DataTemplate x:Key="PeopleTemplate">
            <controls:CardView BorderColor="DarkGray"
                               CardTitle="{Binding Name}"
                               CardDescription="{Binding Description}"
                               ControlTemplate="{StaticResource PeopleCardView}" />
        </DataTemplate>
        <DataTemplate x:Key="AnimalTemplate">
            <controls:CardView BorderColor="DarkGray"
                               CardTitle="{Binding Name}"
                               CardDescription="{Binding Description}"
                               ControlTemplate="{StaticResource AnimalCardView}" />
        </DataTemplate>
        <DataTemplate x:Key="PlantTemplate">
            <controls:CardView BorderColor="DarkGray"
                               CardTitle="{Binding Name}"
                               CardDescription="{Binding Description}"
                               ControlTemplate="{StaticResource PlantCardView}" />
        </DataTemplate>
    </ContentPage.Resources>

    <VerticalStackLayout>
        <!-- 单选按钮组 -->
        <HorizontalStackLayout Margin="10,5" Spacing="10">
            <RadioButton Content="People" GroupName="CategoryTab" Checked="OnPeopleTabChecked"/>
            <RadioButton Content="Animal" GroupName="CategoryTab" Checked="OnAnimalTabChecked"/>
            <RadioButton Content="Plant" GroupName="CategoryTab" Checked="OnPlantTabChecked"/>
        </HorizontalStackLayout>

        <!-- 内容容器 -->
        <ContentView x:Name="ContentContainer" Margin="10">
            <!-- 默认显示People内容 -->
            <StackLayout BindableLayout.ItemsSource="{Binding Source={StaticResource PeopleView}, Path=People}"
                         BindableLayout.ItemTemplate="{StaticResource PeopleTemplate}" />
        </ContentView>
    </VerticalStackLayout>
</ContentPage>

2. 后台代码实现切换

namespace Demo
{
    public partial class MainTabPage : ContentPage
    {
        public MainTabPage()
        {
            InitializeComponent();
        }

        private void OnPeopleTabChecked(object sender, EventArgs e)
        {
            var vm = (PeopleViewModel)Resources["PeopleView"];
            ContentContainer.Content = new StackLayout
            {
                Margin = new Thickness(10),
                BindableLayout = 
                {
                    ItemsSource = vm.People,
                    ItemTemplate = (DataTemplate)Resources["PeopleTemplate"]
                }
            };
        }

        private void OnAnimalTabChecked(object sender, EventArgs e)
        {
            var vm = (AnimalViewModel)Resources["AnimalView"];
            ContentContainer.Content = new StackLayout
            {
                Margin = new Thickness(10),
                BindableLayout = 
                {
                    ItemsSource = vm.Animal,
                    ItemTemplate = (DataTemplate)Resources["AnimalTemplate"]
                }
            };
        }

        private void OnPlantTabChecked(object sender, EventArgs e)
        {
            var vm = (PlantViewModel)Resources["PlantView"];
            ContentContainer.Content = new StackLayout
            {
                Margin = new Thickness(10),
                BindableLayout = 
                {
                    ItemsSource = vm.Plant,
                    ItemTemplate = (DataTemplate)Resources["PlantTemplate"]
                }
            };
        }
    }
}

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