question

01195804 avatar image
0 Votes"
01195804 asked WenyanZhang-MSFT commented

How I set header and footer to FlyoutPage ?

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>

dotnet-maui
· 3
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

When I customized the Menu Page is not look ok with the Detail page?
Can you give sample code how is can be done?

0 Votes 0 ·

You can take the code in this thread=>
https://github.com/dotnet/maui/issues/7398
Thanks in advance.

0 Votes 0 ·

I'm not clear how that means "it is not look ok". I check your sample, there is a Grid in your MenuPage, you could try to define 4 rows, first one for the header, second one for your listview, third one for your logout button, and the last one for your footer. About Grid, refer to https://docs.microsoft.com/en-us/dotnet/maui/user-interface/layouts/grid If you want to go to detail page by clicking header/footer, try to add a tap gesture .
In the ShowNormalState() method, I see you add the comment " // show the menu flyout (this seems to be a bug in MAUI right now, you cant change the value) ". In Android the flyout menu can be show when I set IsPresented to true ( this.IsPresented = true;) . but if I only set this property in XAML, it doesn't work. On Windows, it doesn't work whatever I set this property in XAML or not.
Note: Please update your VS to the latest preview version
You could re-open the issue and follow the progress in GitHub : https://github.com/dotnet/maui/issues/7398


0 Votes 0 ·

1 Answer

WenyanZhang-MSFT avatar image
0 Votes"
WenyanZhang-MSFT answered

Hello @01195804,

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://docs.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.


5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.