如何在Xamarin Forms的ViewModel中动态添加ContentPage到TabbedPage

你的核心问题在于TabbedPage的ItemsSource绑定逻辑错误：你试图通过DataTemplate绑定已实例化的ContentPage对象，但TabbedPage的ItemsSource设计用于绑定数据模型集合，而非页面实例集合；同时当前的ItemTemplate仅创建了空的ContentPage，并未关联到BattlePage的内容。

以下是两种可行的修复方案：

方案1：通过DataTemplate直接绑定BattlePage（推荐，符合MVVM） #

这种方式利用数据模板自动生成每个标签页的BattlePage，并将Battle模型作为页面的BindingContext，既保留MVVM结构，又能正确加载页面内容。

步骤1：修改TabbedPage的XAML #

添加BattlePage的命名空间引用，并修改ItemTemplate直接使用BattlePage：

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
            xmlns:viewmodels="clr-namespace:TournamentManager_4.MVVM.ViewModels" 
            xmlns:models="clr-namespace:TournamentManager_4.MVVM.Models"
            xmlns:views="clr-namespace:TournamentManager_4.MVVM.Views" <!-- 新增BattlePage的命名空间 -->
            x:Class="TournamentManager_4.MVVM.Views.RunTournamentPage"
            xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
            android:TabbedPage.ToolbarPlacement="Bottom"
            BarBackgroundColor="#2196F3"
            BarTextColor="White"
            android:TabbedPage.BarItemColor="#66FFFFFF"
            android:TabbedPage.BarSelectedItemColor="White"
            Title="{Binding Name}"
            ItemsSource="{Binding ObsColTabPages}">
    
    <TabbedPage.BindingContext>
        <viewmodels:RunTournamentViewModel/>
    </TabbedPage.BindingContext>

    <TabbedPage.ItemTemplate>
        <DataTemplate x:DataType="models:Battle">
            <!-- 直接引用BattlePage，并将当前Battle对象作为其BindingContext -->
            <views:BattlePage Title="{Binding Round}" BindingContext="{Binding}" />
        </DataTemplate>
    </TabbedPage.ItemTemplate>
</TabbedPage>

步骤2：简化Battle模型 #

移除不需要的CurrentPage属性，专注于数据承载：

public class Battle
{
    public string Round { get; set; }
    // 可以添加其他Battle相关属性，比如参赛选手、比分等
}

步骤3：确保ViewModel填充数据并调用AddTabPage #

在ViewModel构造函数中调用AddTabPage，同时确保Rounds变量有有效值：

public class RunTournamentViewModel : ViewModelBase
{
    public ObservableCollection<Battle> ObsColTabPages { get; set; }
    // 示例：设置轮次数量
    private int Rounds = 3;

    public RunTournamentViewModel()
    {
        ObsColTabPages = new ObservableCollection<Battle>();
        AddTabPage(); // 调用填充方法
    }

    private void AddTabPage()
    {
        for (int i = 0; i < Rounds; i++)
        {
            ObsColTabPages.Insert(0, new Battle()
            {
                Round = GetRoundName(i)
            });
        }
    }

    private string GetRoundName(int index)
    {
        return $"第{index+1}轮"; // 示例返回轮次名称
    }
}

步骤4：完善BattlePage的内容 #

在BattlePage的XAML中添加绑定内容，确保能显示数据：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TournamentManager_4.MVVM.Views.BattlePage">
    <StackLayout Padding="20">
        <Label Text="{Binding Round}" FontSize="Large" FontAttributes="Bold"/>
        <!-- 添加其他Battle相关的UI控件，比如选手列表、比分输入框等 -->
    </StackLayout>
</ContentPage>

方案2：直接向TabbedPage的Children集合添加页面实例 #

如果你需要完全自定义每个BattlePage的实例化逻辑（比如每个页面有不同的初始化参数），可以绕过ItemsSource，直接在页面后台代码中添加页面：

步骤1：修改TabbedPage的XAML #

移除ItemsSource和ItemTemplate：

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
            xmlns:viewmodels="clr-namespace:TournamentManager_4.MVVM.ViewModels" 
            xmlns:models="clr-namespace:TournamentManager_4.MVVM.Models"
            x:Class="TournamentManager_4.MVVM.Views.RunTournamentPage"
            xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
            android:TabbedPage.ToolbarPlacement="Bottom"
            BarBackgroundColor="#2196F3"
            BarTextColor="White"
            android:TabbedPage.BarItemColor="#66FFFFFF"
            android:TabbedPage.BarSelectedItemColor="White"
            Title="{Binding Name}">
    
    <TabbedPage.BindingContext>
        <viewmodels:RunTournamentViewModel/>
    </TabbedPage.BindingContext>
</TabbedPage>

步骤2：在RunTournamentPage的后台代码中添加页面 #

public partial class RunTournamentPage : TabbedPage
{
    public RunTournamentPage()
    {
        InitializeComponent();
        var vm = (RunTournamentViewModel)BindingContext;
        vm.AddTabPage();
        
        // 遍历Battle集合，创建并添加BattlePage
        foreach (var battle in vm.ObsColTabPages)
        {
            var battlePage = battle.CurrentPage;
            battlePage.Title = battle.Round;
            // 可选：将Battle对象设置为BattlePage的BindingContext
            battlePage.BindingContext = battle;
            Children.Add(battlePage);
        }
    }
}

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