Lower AppShell Flyout Below Navigation Bar

Question

first time asking a question on here, sorry if I mess up the etiquette.

I am using AppShell in my Xamarin.Forms project and am using a flyout in combination with a tab bar. What I want is for the AppShell flyout to always slide out below the navigation/title bar. Currently it covers the whole screen. I know that I could use a custom view but I like the features and integration of AppShell. For now, I want to try to do this with AppShell.

I've tried a few things like setting the HeightRequest of the flyout and creating an empty header. The Idea will be to keep the buttons in the nav bar always clickable when the side menu is out. Although, I'm starting to think that maybe this isn't possible with AppShell. Thanks!

How it's working now

What I want (never-mind the difference in flyout width)

Answer 1

You could try using SwipeView for this instead.

https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/swipeview

Answer 2

You could use the FlyoutPage instead. On Android, the navigation bar is present at the top of the page and displays a title, an icon, and a button that navigates to the detail page.

1. Create a FlyoutPage to load the MenuPage.

   <FlyoutPage  xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:App10"
         x:Class="App10.Page14"  Title="Navigation Bar"   FlyoutLayoutBehavior="Split">
   <FlyoutPage.Flyout >
    <local:FlyoutMenuPage x:Name="flyoutPage" />
   </FlyoutPage.Flyout>
   <FlyoutPage.Detail>
    <NavigationPage>
        <x:Arguments>
            <local:ContactsPage />
        </x:Arguments>
    </NavigationPage>
   </FlyoutPage.Detail>
   

2. Create a listview to simulate a Flyout of AppShell in FlyoutMenuPage.

     <ListView x:Name="listView" x:FieldModifier="public">
            <ListView.ItemsSource>
                <x:Array Type="{x:Type local:FlyoutPageItem}">
                    <local:FlyoutPageItem Title="Contacts" IconSource="check.png" TargetType="{x:Type local:ContactsPage}" />
                    <local:FlyoutPageItem Title="Reminders" IconSource="circle.png" TargetType="{x:Type local:ReminderPage}" />
                </x:Array>
            </ListView.ItemsSource>
            <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> 
   

Please note, do not forget to set the NavigationPage in App.xaml.cs.

     MainPage = new NavigationPage(new Page14());

For more details about it, you could refer to the code in GitHub. https://github.com/xamarin/xamarin-forms-samples/tree/main/Navigation/FlyoutPage