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>

Answer 1

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://docs.microsoft.com/en-us/xamarin/community-toolkit/views/tabview

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

Related questions Xamarin forms selected tab top border