如何在MAUI Shell中基于集合动态生成多标签页？求XAML/C#实现方案

方法一：XAML绑定集合实现 #

这种方式类似ListView的绑定逻辑，通过ViewModel提供页面集合，在XAML中用DataTemplate定义标签页模板。

1. 定义页面数据模型与ViewModel

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

namespace YourAppNamespace
{
    public class PageItem
    {
        public string Title { get; set; }
        public string Icon { get; set; }
        public Type PageType { get; set; }
    }

    public class MainViewModel : INotifyPropertyChanged
    {
        private ObservableCollection<PageItem> _tabPages;
        public ObservableCollection<PageItem> TabPages
        {
            get => _tabPages;
            set
            {
                _tabPages = value;
                OnPropertyChanged();
            }
        }

        public MainViewModel()
        {
            // 模拟从数据源加载页面配置，可替换为API/本地存储数据
            TabPages = new ObservableCollection<PageItem>
            {
                new PageItem { Title = "首页", Icon = "home.png", PageType = typeof(HomePage) },
                new PageItem { Title = "消息", Icon = "message.png", PageType = typeof(MessagePage) },
                new PageItem { Title = "我的", Icon = "profile.png", PageType = typeof(ProfilePage) }
            };
        }

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

2. 在AppShell.xaml中绑定集合

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:YourAppNamespace"
       x:Class="YourAppNamespace.AppShell">

    <Shell.BindingContext>
        <local:MainViewModel />
    </Shell.BindingContext>

    <!-- 绑定TabBar的ItemsSource到集合，用DataTemplate生成每个标签页 -->
    <TabBar ItemsSource="{Binding TabPages}">
        <TabBar.ItemTemplate>
            <DataTemplate>
                <ShellContent Title="{Binding Title}"
                              Icon="{Binding Icon}">
                    <local:DynamicPageLoader PageType="{Binding PageType}" />
                </ShellContent>
            </DataTemplate>
        </TabBar.ItemTemplate>
    </TabBar>

</Shell>

3. 实现动态页面加载器

用于根据PageType实例化对应页面：

using Microsoft.Maui.Controls;

namespace YourAppNamespace
{
    public class DynamicPageLoader : ContentView
    {
        public static readonly BindableProperty PageTypeProperty =
            BindableProperty.Create(nameof(PageType), typeof(Type), typeof(DynamicPageLoader), propertyChanged: OnPageTypeChanged);

        public Type PageType
        {
            get => (Type)GetValue(PageTypeProperty);
            set => SetValue(PageTypeProperty, value);
        }

        private static void OnPageTypeChanged(BindableObject bindable, object oldValue, object newValue)
        {
            var loader = (DynamicPageLoader)bindable;
            if (newValue is Type pageType && typeof(Page).IsAssignableFrom(pageType))
            {
                // 实例化页面并加载内容
                var page = (Page)Activator.CreateInstance(pageType);
                loader.Content = page.Content;
            }
        }
    }
}

方法二：C#代码动态创建 #

直接在Shell的构造函数中遍历集合，手动创建TabBar和ShellContent。

using Microsoft.Maui.Controls;

namespace YourAppNamespace
{
    public partial class AppShell : Shell
    {
        public AppShell()
        {
            InitializeComponent();

            var tabBar = new TabBar();
            // 模拟集合数据，可替换为实际数据源
            var tabPages = new List<PageItem>
            {
                new PageItem { Title = "首页", Icon = "home.png", PageType = typeof(HomePage) },
                new PageItem { Title = "消息", Icon = "message.png", PageType = typeof(MessagePage) },
                new PageItem { Title = "我的", Icon = "profile.png", PageType = typeof(ProfilePage) }
            };

            foreach (var item in tabPages)
            {
                // 实例化页面
                var page = (Page)Activator.CreateInstance(item.PageType);
                // 创建ShellContent并添加到TabBar
                var shellContent = new ShellContent
                {
                    Title = item.Title,
                    Icon = item.Icon,
                    Content = page
                };
                tabBar.Items.Add(shellContent);
            }

            // 将TabBar添加到Shell的Items集合
            Items.Add(tabBar);
        }
    }
}

关键说明 #

• 若需动态更新标签页，使用ObservableCollection作为集合类型，更新集合时Shell会自动同步UI。
• 页面类型需确保无参构造函数，若需传参可使用Activator.CreateInstance的重载方法。
• 若要实现侧边栏菜单的动态生成，只需将TabBar替换为FlyoutItem，绑定逻辑一致。

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