c# - 如何在Windows Phone中更改MenuFlyout的外观？

我大部分时间都在读这篇文章，但我就是不知道如何改变，比如Menuflyout的入口主题转换，就像它出现在日历应用程序中一样。有点像水平转弯，而不是菜单的默认动画。

<MenuFlyout>
   <MenuFlyout.MenuFlyoutPresenterStyle>
       <Style...../>
   </MenuFlyout.MenuFlyoutPresenterStyle>
   <MenuFlyoutItem Text="Test"/>
</MenuFlyout>

C：

 MenuFlyout mf = (MenuFlyout)this.Resources["AddButtonFlyout"];
 mf.Placement = FlyoutPlacementMode.Bottom;
 mf.ShowAt(this.CommandBar);

最佳答案

menuflyout有一个为targettype=“menuflyoutpresenter”设置的标准样式，可以在..\Program Files（x86\Windows Phone Kits\8.1\include\abi\xaml\design\generic.xaml中找到（我不会在此处复制/粘贴，因为它很长）。此样式定义了一个控件模板，您可以修改该模板以设置MenuFlyout在更改为BottomPortrait视觉状态时的行为。
从我在日历应用程序中看到的情况来看，当你打开菜单时，菜单会翻转。在预定义样式中，它首先显示上边框，然后从上到下绘制其余边框。
所以，首先你需要将整个样式复制到你的资源中。然后，您需要找到底部的人像visualstate，并清除故事板中的所有内容，以便能够从头定义您自己的。
我将使用一个平面投影类-它提供了一种三维效果，这是你正在寻找的。我将其添加到centerborder border元素，并将默认值设置为-90。我将其设置为-90，因为这意味着它垂直于屏幕，因此菜单在第一次显示时不可见。

// ... rest of the code
<Border x:Name="CenterBorder" FlowDirection="LeftToRight" BorderBrush="{TemplateBinding Background}">
    <Border.Projection>
        <PlaneProjection RotationX="-90"/>
    </Border.Projection>
// ... rest of the code

下一步（也是最后一步）是在BottomPortrait的visualState中定义新的情节提要，如前所述—它非常简单：

// ... rest of the code
<VisualState x:Name="BottomPortrait">
    <Storyboard>
        <DoubleAnimation Duration="0:0:0.18"
                         To="0"
                         Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)"
                         Storyboard.TargetName="CenterBorder" />
     </Storyboard>
</VisualState>
// ... rest of the code

它只是在很短的时间内将边界从-90度动画化到0度，这使得它通过一个漂亮的翻转动画从不可见变为可见，这正是您所要寻找的。
样式（为了简洁起见，省略了不相关的部分-您应该仍然拥有它们！）：

<Style TargetType="MenuFlyoutPresenter">
    <!-- OTHER PROPERTY SETTERS -->
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="MenuFlyoutPresenter">
                <Border x:Name="OuterBorder" FlowDirection="LeftToRight" BorderBrush="{TemplateBinding BorderBrush}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="PlacementStates">
                            <VisualState x:Name="None" />
                            <VisualState x:Name="TopPortrait">
                                <!-- TOP PORTRAIT STORYBOARD -->
                            </VisualState>
                            <VisualState x:Name="BottomPortrait">
                                <Storyboard>
                                    <DoubleAnimation Duration="0:0:0.18"
                                                     To="0"
                                                     Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)"
                                                     Storyboard.TargetName="CenterBorder" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="LeftLandscape">
                                <!-- LEFT LANDSCAPE STORYBOARD -->
                            </VisualState>
                            <VisualState x:Name="RightLandscape">
                                <!-- RIGHT LANDSCAPE STORYBOARD -->
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border.RenderTransform>
                        <ScaleTransform x:Name="OuterScaleTransform" />
                    </Border.RenderTransform>
                    <Border x:Name="CenterBorder" FlowDirection="LeftToRight" BorderBrush="{TemplateBinding Background}">
                        <Border.Projection>
                            <PlaneProjection RotationX="-90"/>
                        </Border.Projection>
                        <StackPanel x:Name="InnerBorder" FlowDirection="{TemplateBinding FlowDirection}" Background="{TemplateBinding Background}">
                            <StackPanel.RenderTransform>
                                <ScaleTransform x:Name="InnerScaleTransform" />
                            </StackPanel.RenderTransform>
                            <ItemsPresenter x:Name="ItemsPresenter" Margin="{TemplateBinding Padding}" FlowDirection="{TemplateBinding FlowDirection}" />
                        </StackPanel>
                    </Border>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

编辑：
显示菜单最好在框架上完成。

MenuFlyout mf = (MenuFlyout)this.Resources["AddButtonFlyout"];
mf.Placement = FlyoutPlacementMode.Bottom;

Frame fr = Window.Current.Content as Frame;
mf.ShowAt(fr);