Flyout Page not responding - maui

Question

I'm starting understanding .Net MAUI with an online video.
I'm trying to customize a page with 3 buttons, 1 for a counter, 1 for a second page and 1 for a flyoutpage.
Counter and second page are ok, flyout page doesn't display but force the App to exit.
My code for the button that calls the flyout page is this, located in the MainPage.xml.cs :
private void FlyClicked(object sender, EventArgs e)
{
Navigation.PushAsync(new Flyout1());
}
Can anybody explain me the reason of this ?
Many Thanks

Answer 1

According to your description, the Flyout1 should be a FlyoutPage. You can refer to the code below on how to create a FlyoutPage. I test it and it can display it.
Flyout1:
XAML:
<?xml version="1.0" encoding="utf-8" ?>
<FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiAppDualScreen.Flyout1"
xmlns:local="clr-namespace:MauiAppDualScreen"
>
<FlyoutPage.Flyout>
<local:FlyoutMenuPage x:Name="flyoutPage" />
</FlyoutPage.Flyout>
<FlyoutPage.Detail>
<NavigationPage>
<x:Arguments>
<local:MainPage />
</x:Arguments>
</NavigationPage>
</FlyoutPage.Detail>
</FlyoutPage>
Code-behind:
public partial class Flyout1 : FlyoutPage
{
      public Flyout1()
      {
            InitializeComponent();
}
}
The following example shows the definition of the FlyoutMenuPage object, which is of type ContentPage:
XAML:
<?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="MauiAppDualScreen.FlyoutMenuPage"
xmlns:local="clr-namespace:MauiAppDualScreen"
Title="FlyoutMenuPage">
<CollectionView x:Name="collectionView"
x:FieldModifier="public"
SelectionMode="Single">
<CollectionView.ItemsSource>
<x:Array Type="{x:Type local:FlyoutPageItem}">
<local:FlyoutPageItem Title="Contacts"
IconSource="dotnet_bot.png"
TargetType="{x:Type local:MainPage}" />
<local:FlyoutPageItem Title="TodoList"
IconSource="dotnet_bot.png"
TargetType="{x:Type local:MainPage}" />
<local:FlyoutPageItem Title="Reminders"
IconSource="dotnet_bot.png"
TargetType="{x:Type local:MainPage}" />
</x:Array>
</CollectionView.ItemsSource>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="5,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source="{Binding IconSource}" />
<Label Grid.Column="1"
Margin="20,0"
Text="{Binding Title}"
FontSize="20"
FontAttributes="Bold"
VerticalOptions="Center" />
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</ContentPage>
Code-behind:
public partial class FlyoutMenuPage : ContentPage
{
      public FlyoutMenuPage()
      {
            InitializeComponent();
      }
}
The flyout page consists of a CollectionView that's populated with data by setting its ItemsSource property to an array of FlyoutPageItem objects. The following example shows the definition of the FlyoutPageItem class:
public class FlyoutPageItem
{
public string Title { get; set; }
public string IconSource { get; set; }
public Type TargetType { get; set; }
}