Maui - TabbedPage 将选项卡绑定到 ViewModel 导致 NavigationFailed 错误

Question

我遇到了这个问题，希望有人可以帮助解决它。 示例项目下载

**文件：HomePage.xaml ** 如果我在没有 Viewmodel Binding 的情况下使用此 xaml，它可以正常工作：

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:page="clr-namespace:TabbedPageTest.Mvvm.Views"
             xmlns:viewmodels="clr-namespace:TabbedPageTest.Mvvm.ViewModels"
             x:Class="TabbedPageTest.Mvvm.Views.HomePage"
             Title="HomePage"
             x:Name="mainTabPage"
             Shell.NavBarIsVisible="False">

    <page:HomeContentPage Title="Home" />
    <page:SettingsContentPage Title="Settings" />

</TabbedPage>

但是如果我像这样改变它：

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:page="clr-namespace:TabbedPageTest.Mvvm.Views"
             xmlns:viewmodels="clr-namespace:TabbedPageTest.Mvvm.ViewModels"
             x:Class="TabbedPageTest.Mvvm.Views.HomePage"
             Title="HomePage"
             x:Name="mainTabPage"
             Shell.NavBarIsVisible="False"
             ItemsSource="{Binding TabCollection}"
             SelectedItem="{Binding SelectedTab}">

    <TabbedPage.BindingContext>
        <viewmodels:HomePageViewModel/>
    </TabbedPage.BindingContext>

</TabbedPage>

HomePageViewModel：

public partial class HomePageViewModel : BaseViewModel
{
    public HomePageViewModel()
    {
        SetMainTabsTest();
    }

    [ObservableProperty]
    public ObservableCollection<Page> _tabCollection = [];

    [ObservableProperty]
    public Page _selectedTab = null;


    private void SetMainTabsTest()
    {
        TabCollection.Clear();

        TabCollection.Add(
            new HomeContentPage
            {
                Title = "Home"
            });

        TabCollection.Add(
            new SettingsContentPage
            {
                Title = "Settings"
            });

        SelectedTab = TabCollection[0];
    }
}

首页内容页面：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TabbedPageTest.Mvvm.Views.HomeContentPage"
             Title="HomeContentPage">
    <VerticalStackLayout>
        <Label Text="Dummy text for Home Page"/>
    </VerticalStackLayout>
</ContentPage>

设置内容页面：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TabbedPageTest.Mvvm.Views.SettingsContentPage"
             Title="SettingsContentPage">
    <VerticalStackLayout>
        <Label Text="Dummy text for Settings Page"/>
    </VerticalStackLayout>
</ContentPage>

我收到错误消息：Microsoft.UI.Xaml.Controls.Frame.NavigationFailed 未处理。

调试，异常 - 内部异常并询问 Google 但没有结果

Answer 1

TabbedPage 与 .NET MAUI Shell 应用程序不兼容，如果您尝试在 Shell 应用程序中使用 TabbedPage，将会抛出异常。我可以看到你的应用程序是。

另一个问题可能是您的视图模型是瞬态的，这可能会添加页面的新实例，这在某些情况下可能并不理想。