I have a simple AppShell menu and would like to position the Logout option towards the end of the page. I tried using a MenuFlyoutSeparator but I feel like that leaves some distinct space but may differ in devices with different heights so it won’t be exact.
How would I position the Logout towards the bottom? Maybe right above the FlyoutFooter
<FlyoutItem Title="Students" Icon="student">
<ShellContent ContentTemplate="{DataTemplate Students:StudentsPage}" Route="StudentsPage" />
</FlyoutItem>
<FlyoutItem Title="Teachers" Icon="teacher">
<ShellContent ContentTemplate="{DataTemplate Teachers:TeachersPage}" Route="TeachersPage" />
</FlyoutItem>
<FlyoutItem Title="Staff" Icon="staff">
<ShellContent ContentTemplate="{DataTemplate Staff:SStaffPage}" Route="StaffPage" />
</FlyoutItem>
<MenuFlyoutSeparator></MenuFlyoutSeparator>
<MenuFlyoutSeparator></MenuFlyoutSeparator>
<MenuFlyoutSeparator></MenuFlyoutSeparator>
<MenuItem Text="Logout" IconImageSource="logout"></MenuItem>
0
You can take the Logout as the Shell.FlyoutFooter.
Specifically, FlyoutFooter will always appear at the bottom of the flyout, with its appearance being defined by an object that can be set with the Shell.FlyoutFooter bindable property.
Here I set the FlyoutFooter to ContentView as an example:
AppShell.xaml:
<Shell ...>
<Shell.FlyoutFooter>
<controls:FlyoutFooter />
</Shell.FlyoutFooter>
</Shell>
FlyoutFooter.xaml:
<ContentView ...>
<StackLayout>
<Button Text="Logout" clicked=""/>
</StackLayout>
</ContentView>
You can freely define the appearance of the Logout in the ContentView, you can refer to Flyout footer for more details.
3