Xamarin Forms Shell：FlyoutItem 导航动画

Question

我有一个浮动菜单，里面有 3 个页面，但是当我导航到这些页面时，它会显示一个动画，就好像页面是从里到外翻过来的一样。只发生在汉堡菜单上，TabBar 不会发生。

<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

这是你要找的吗

在文档中查看此处。 https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/flyoutpage#navigation-behavior

弹出窗口和详细信息页面之间的导航体验行为取决于平台：

在 iOS 上，详细信息页面随着弹出页面的滑动而向右滑动从左边开始，详细信息页面的左侧部分仍然可见。
在 Android 上，详细信息页面和弹出页面相互重叠。
在 UWP 上，弹出页面从左侧滑过部分详细信息页面，前提是 FlyoutLayoutBehavior 属性设置为弹出框。

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

FlyoutPage 如何管理弹出页面和详细信息页面取决于应用程序是运行在 phone 还是平板电脑上、设备的方向以及 FlyoutLayoutBehavior 的值属性. 属性决定详细信息页面的显示方式。可能的值为：

默认 – 使用平台默认显示页面。
弹出框 – 详细信息页面覆盖或部分覆盖弹出窗口页。
Split – 弹出页面显示在左侧，详细信息页面显示在右边。
SplitOnLandscape – 当设备在横向。
SplitOnPortrait – 设备处于开机状态时使用分屏纵向。

FlyoutLayoutBehaviorxaml 中的示例

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

Xamarin Forms Shell：FlyoutItem 导航动画

Xamarin Forms Shell: FlyoutItem navigate animation

xamarin.forms

xamarin.forms.shell

xamarin.forms-styles