InvalidCastException using FlyoutPage

Question

Hi,

I've implemented a FlyoutPage using the Microsoft Learn example (https://learn.microsoft.com/fr-fr/xamarin/xamarin-forms/app-fundamentals/navigation/flyoutpage). It works when I set my FlyoutPage as the entry point of my application, but when I'm trying to access it using the App Shell, it throws me a InvalidCastException.

FlyoutPage :

   <FlyoutPage xmlns="http://xamarin.com/schemas/2014/forms"  
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
               xmlns:local="clr-namespace:WoWAPITest.Views"  
               x:Class="WoWAPITest.Views.MainFlyoutPage"  
               FlyoutLayoutBehavior="Popover"  
               Shell.TabBarIsVisible="False">  
       <FlyoutPage.Flyout>  
           <local:MainFlyoutMenuPage x:Name="flyoutMenu" />  
       </FlyoutPage.Flyout>  
       <FlyoutPage.Detail>  
           <TabbedPage xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"  
                       android:TabbedPage.ToolbarPlacement="Bottom">  
               <local:AchievPage Title="Haut-faits" IconImageSource="icon_about.png"/>  
               <local:ReputPage Title="Réputations" IconImageSource="icon_feed.png"/>  
           </TabbedPage>  
       </FlyoutPage.Detail>  
   </FlyoutPage>  

Flyout Page Item (used below) :

   public class FlyoutPageItem  
   {  
           public string Title { get; set; }  
           public string IconSource { get; set; }  
           public Type TargetType { get; set; }  
   }  

**Flyout Menu : **

   <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
                xmlns:local="clr-namespace:WoWAPITest.Views"  
                xmlns:cmp="clr-namespace:WoWAPITest.Components"  
                x:Class="WoWAPITest.Views.MainFlyoutMenuPage"  
                Padding="0,40,0,0"  
                IconImageSource="hamburger.png"  
                Title="Personal Organiser">  
       <StackLayout>  
           <ListView x:Name="listView" x:FieldModifier="public">  
               <ListView.ItemsSource>  
                   <x:Array Type="{x:Type cmp:FlyoutPageItem}">  
                       <cmp:FlyoutPageItem Title="Personnage" IconSource="stickman.png" TargetType="{x:Type local:CharDataPage}" />  
                   </x:Array>  
               </ListView.ItemsSource>  
               <ListView.Header>  
                   <StackLayout HeightRequest="200" BackgroundColor="{StaticResource Third}">  
                       <Image Source="wow_logo.png" VerticalOptions="Start" HorizontalOptions="CenterAndExpand"/>  
                   </StackLayout>  
               </ListView.Header>  
               <ListView.ItemTemplate>  
                   <DataTemplate>  
                       <ViewCell>  
                           <Grid Padding="5,10">  
                               <Grid.ColumnDefinitions>  
                                   <ColumnDefinition Width="30"/>  
                                   <ColumnDefinition Width="*" />  
                               </Grid.ColumnDefinitions>  
                               <Image Source="{Binding IconSource}" />  
                               <Label Grid.Column="1" Text="{Binding Title}" />  
                           </Grid>  
                       </ViewCell>  
                   </DataTemplate>  
               </ListView.ItemTemplate>  
           </ListView>  
       </StackLayout>  
   </ContentPage>  

The xaml.cs files are empty, except the InitializeComponent. I've set a breakpoint at MainFlyoutPage.InitializeComponent() to see what's wrong, but the InitializeComponent passes without raising any exception. The exception appears when at the end of my constructor :

   public partial class MainFlyoutPage : FlyoutPage  
   {  
           public MainFlyoutPage()  
           {  
               InitializeComponent();  
           } // Exception is thrown here - "InvalidCastException : The specified cast is not valid."  
   }  

I really don't know where the problem is. Could you help me? ^^

Answer 1

FlyoutPage and the Shell Flyout are not the same thing. Instead of Shell.Current you should be using Application.Current.MainPage.