Xamarin TabbedPage Specified Cast is not valid

Question

I have a TabBar in my AppShell which has five tabs.

Three of these tabs are ContentPages whereas the other two are TabbedPages. All three tabs with ContentPages open fine but the two Tabs with TabbedPages give me 'Specified cast is not valid' error.

AppShell.xaml

<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms" 
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:ReleaseVerificationAndroid.Views"
       Title="ReleaseVerificationAndroid"
       x:Class="ReleaseVerificationAndroid.AppShell">

    <TabBar x:Name="MainTab" Route="HomePage">
        <Tab Title="Home" Icon="icon_home.png">
            <ShellContent Route="HomePage" ContentTemplate="{DataTemplate local:HomePage}"/>
        </Tab>
        <Tab Title="Fingerprints" Icon="icon_fingerprint.png" IsVisible="True">
            <ShellContent Route="FingerprintPage" ContentTemplate="{DataTemplate local:FingerprintPage}"/>
        </Tab>
        <Tab Title="Mugshots" Icon="icon_mugshot.png" IsVisible="True">
            <ShellContent Route="MugshotPage" ContentTemplate="{DataTemplate local:MugshotPage}"/>
        </Tab>
        <Tab Title="Irises" Icon="icon_iris.png" IsVisible="True">
            <ShellContent Route="IrisPage" ContentTemplate="{DataTemplate local:IrisPage}"/>
        </Tab>
        <Tab Title="Result" Icon="icon_feed.png">
            <ShellContent Route="ResultPage" ContentTemplate="{DataTemplate local:ResultPage}"/>
        </Tab>
    </TabBar>

</Shell>

IrisPage.xaml (Tabbed page)

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ReleaseVerificationAndroid.Views.IrisPage"
             Title="{Binding Title}"
             xmlns:local="clr-namespace:ReleaseVerificationAndroid.Views"  
             xmlns:vm="clr-namespace:ReleaseVerificationAndroid.ViewModels">
    <NavigationPage Title="Left Iris" IconImageSource="icon_iris">
        <x:Arguments>
            <local:LeftIrisPage />
        </x:Arguments>
    </NavigationPage>
    <NavigationPage Title="Right Iris" IconImageSource="icon_iris">
        <x:Arguments>
            <local:RightIrisPage />
        </x:Arguments>
    </NavigationPage>
</TabbedPage>

Contents of LeftIrisPage

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:vm="clr-namespace:ReleaseVerificationAndroid.ViewModels"
             x:Class="ReleaseVerificationAndroid.Views.LeftIrisPage">
    <ContentPage.BindingContext>
        <vm:LeftIrisViewModel />
    </ContentPage.BindingContext>
    <ContentPage.Content>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="75"/>
                <RowDefinition Height="*" />
                <RowDefinition Height="60"/>
            </Grid.RowDefinitions>
            <ContentView Grid.Row="0" Padding="0,10,0,0" VerticalOptions="FillAndExpand">
                <Image Source="mentalix_logo.png" VerticalOptions="Center" HeightRequest="48" />
            </ContentView>
            <Frame Grid.Row="1" Margin="10,0,10,10" BackgroundColor="Transparent"
                   BorderColor="#333333"
                   CornerRadius="0"
                   HasShadow="True">
                <ContentView VerticalOptions="CenterAndExpand">
                    <Image VerticalOptions="Center" HeightRequest="500" />
                </ContentView>
            </Frame>
            <Grid Grid.Row="2">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Button Grid.Column="0" Margin="10,0,10,12.5" Text="Scan"
                        Command="{Binding RescanLeftIrisCmd}"
                        BackgroundColor="{StaticResource PrimaryButton}"
                        TextColor="White" />

                <Button Grid.Column="1" Margin="2.5,0,10,12.5" Text="Clear"
                        Command="{Binding ClearLeftIrisCmd}"
                        BackgroundColor="{StaticResource Primary}"
                        TextColor="White" />
            </Grid>

        </Grid>
    </ContentPage.Content>
</ContentPage>

Why would you use a TabbedPage along side with Shell Tabbar/Tab ? — Cfun, Feb 26 '21 at 18:01
I'm trying to create a Nested Tabbed Hierarchy. The five main tabs are Home, Fingerprints, Mugshots, Iris and Results. I want to add two nested tabs for Fingerprints and Irises (left and right each) — Jay, Feb 26 '21 at 18:06
Just making sure we are on same page, I'm not nesting TabbedPages inside a TabbedPage but adding a TabbedPage inside a TabBar ContentPage. If that is not possible, what are alternatives? — Jay, Feb 26 '21 at 18:12

Cfun · Accepted Answer · 2022-05-02T21:21:18.773

Since your main goal is to nest Tabbed Pages and use Shell at the same time, you might be interested by TabView from Xamarin Community ToolKit package. For now you can nest and lazy load as much as you want BUT for now it supports only Views not pages. In the future it is likely to support Page type as well, you can try converting your page to a ContentView if possible for you.

Docs https://learn.microsoft.com/en-us/xamarin/community-toolkit/views/tabview

Repo https://github.com/xamarin/XamarinCommunityToolkit

Related questions Xamarin forms selected tab top border

Xamarin TabbedPage Specified Cast is not valid

1 Answers1