Maui FlyoutPage application issue

Question

Hi all

I follow the maui doc topic flyoutpage app
and there's said that this type of application
don't works with Maui shell.

Warning

FlyoutPage is incompatible with .NET MAUI Shell apps, and an exception will be thrown if you attempt to use FlyoutPage in a Shell app. For more information about Shell apps, see Shell

Do Microsoft itself know how to do that.
Because the doc is very confusing.

but when I create a Maui app there's building
also a shell codes.

so how I get rid of that codes

or how I build a flyoutpage project
without a maui shell.

Thank you very much.

Answer 1

Hello,

You need to delete AppShell at first, if you want to use flyoutpage in your applicaiton.

Both FlyoutPage and Shell contain Flyout controls, so the two are not compatible.

You could refer to this official sample to learn how to create a FlyoutPage app: FlyoutPageSample.

Update:

Step1. Create a .Net MAUI App.

Step2. Delete AppShell.xaml from the project.

Step3. Create the FlyoutPageItem class as the documentation.

Step4. Create a .Net MAUI ContentPage(XAML) type page, and name it MyFlyoutPage.xaml.

Step5. Add xmlns:local="clr-namespace:You_Project_Page_NameSpace" into MyFlyoutPage.xaml and modify ContentPage to FlyoutPage in MyFlyoutPage.xaml and MyFlyoutPage.xaml.cs.

Step6. Create .Net MAUI ContentPage(XAML) type pages: FlyoutMenuPage.xaml, NewPage1 and NewPage2.

Step7. Add xmlns:local="clr-namespace:You_Project_Page_NameSpace" into FlyoutMenuPage.xaml

Step8. Add the following code into your MyFlyoutPage.xaml

   <FlyoutPage.Flyout>  
           <local:FlyoutMenuPage x:Name="flyoutPage" />  
       </FlyoutPage.Flyout>  
       <FlyoutPage.Detail>  
           <NavigationPage>  
               <x:Arguments>  
                   <local:MainPage />  
               </x:Arguments>  
           </NavigationPage>  
       </FlyoutPage.Detail>  

Step9. Add the SelectionChanged event into MyFlyoutPage.xaml.cs as the documentation.

Step10. In the FlyoutMenuPage.xaml, please copy the following code into it:

   <CollectionView x:Name="collectionView"  
                       x:FieldModifier="public"  
                       SelectionMode="Single">  
       <CollectionView.ItemsSource>  
           <x:Array Type="{x:Type local:FlyoutPageItem}">  
               <local:FlyoutPageItem Title="Contacts"  
                                         TargetType="{x:Type local:NewPage1}" />  
               <local:FlyoutPageItem Title="TodoList"  
                                         TargetType="{x:Type local:NewPage2}" />  
           </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>  

Step11. Open the App.xaml.cs file, and modify MainPage = new AppShell(); to MainPage = new MyFlyoutPage();.

Then, you could build your first MAUI FlyoutPage App.

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.