Maui FlyoutPage application issue

Haviv Elbsz 2,071 Reputation points
2022-10-23T10:51:20.69+00:00

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.

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,695 questions
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
11,092 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 45,026 Reputation points Microsoft Vendor
    2022-10-25T01:49:45.24+00:00

    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.


Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.