xamarin.formsxamarin.forms.shellxamarin.forms-styles

Xamarin Forms Shell: FlyoutItem navigate animation


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>

Solution

  • 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:

    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:

    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>