How I set header and footer to FlyoutPage ?

Question

Hi,
How I set header and footer to FlyoutPage ?

FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="FlyoutExample.Views.MyRootPage"
xmlns:views="clr-namespace:FlyoutExample.Views"
IsPresented="True" >

<!-- This is the panel that flies out from the side. You can make it stay open by setting "IsPresented=True"-->
<FlyoutPage.Flyout >
    <views:MenuPage x:Name="MyMenuPage" />
</FlyoutPage.Flyout>

<!-- The 'Detail' page means the main part of the app. -->
<FlyoutPage.Detail>
    <!-- We will use a NavigationPage as the root of the detail area. This will let you navigate to LoginPage/MainPage/HistoryPage/etc  -->
    <NavigationPage NavigationPage.HasNavigationBar="False">
        <x:Arguments>
            <views:DashboardPage />
        </x:Arguments>
    </NavigationPage>
</FlyoutPage.Detail>

</FlyoutPage>

Answer 1

Hello @Dani_S ,

Usually, we can set Flyout header and footer by setting <Shell.FlyoutHeader> and <Shell.FlyoutFooter>. I noticed that you are using FlyoutPage , and set the MenuPage as the flyout.
FlyoutPage is incompatible with .NET MAUI Shell apps, and an exception will be thrown if you attempt to use FlyoutPage in a Shell app, refer to https://learn.microsoft.com/en-us/dotnet/maui/user-interface/pages/flyoutpage

So, you have to add a customized control in your MenuPage, so that it looks like the header and footer.

Best Regards,
Wenyan Zhang

---

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.