Xamarin Forms Shell: FlyoutItem navigate animation

Question

I have a floating menu and there are 3 pages in it, but when I navigate to those pages it shows an animation as if the page is coming from the inside out. Only happens with the hamburger menu, with the TabBar that does not happen.

<FlyoutItem Title="Home" Route="HomePage">
    <Tab>
        <ShellContent ContentTemplate="{DataTemplate home:HomePage}" Style="{StaticResource HomePageShell}" />
    </Tab>
    <FlyoutItem.Icon>
        <FontImageSource
            FontFamily="FontAwesome"
            Glyph="{x:Static fontello:FontAwesomeIcon.Home}"
            Color="Black" />
    </FlyoutItem.Icon>
</FlyoutItem>

<FlyoutItem Title="Perfil" Route="PerfilPage">
    <Tab>
        <ShellContent ContentTemplate="{DataTemplate perfil:PerfilPage}" Style="{StaticResource PerfilPageShell}" />
    </Tab>
    <FlyoutItem.Icon>
        <FontImageSource
            FontFamily="FontAwesome"
            Glyph="{x:Static fontello:FontAwesomeIcon.UserCircleO}"
            Color="Black" />
    </FlyoutItem.Icon>
</FlyoutItem>

<FlyoutItem Title="Atención al cliente" Route="SoportePage">
    <Tab>
        <ShellContent ContentTemplate="{DataTemplate soporte:SoportePage}" Style="{StaticResource SoportePageShell}" />
    </Tab>
    <FlyoutItem.Icon>
        <FontImageSource
            FontFamily="Gadgets"
            Glyph="{x:Static metroStudio:GadgetsIcon.HeadphoneMike}"
            Color="Black" />
    </FlyoutItem.Icon>
</FlyoutItem>

Answer 1

Is this what you are looking for.

Look here in the Docs. https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/flyoutpage#navigation-behavior

The behavior of the navigation experience between flyout and detail pages is platform dependent:

• On iOS, the detail page slides to the right as the flyout page slides from the left, and the left part of the detail page is still visible.
• On Android, the detail and flyout pages are overlaid on each other.
• On UWP, the flyout page slides from the left over part of the detail page, provided that the FlyoutLayoutBehavior property is set to Popover.

https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/flyoutpage#control-the-detail-page-layout-behavior

How the FlyoutPage manages the flyout and detail pages depends on whether the application is running on a phone or tablet, the orientation of the device, and the value of the FlyoutLayoutBehavior property. This property determines how the detail page will be displayed. It's possible values are:

• Default – The pages are displayed using the platform default.
• Popover – The detail page covers, or partially covers the flyout page.
• Split – The flyout page is displayed on the left and the detail page is on the right.
• SplitOnLandscape – A split screen is used when the device is in landscape orientation.
• SplitOnPortrait – A split screen is used when the device is in portrait orientation.

Example in xaml for FlyoutLayoutBehavior

<FlyoutPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            x:Class="FlyoutPageNavigation.MainPage"
            FlyoutLayoutBehavior="Popover">
  ...
</FlyoutPage>