Windows Phone Flyout 始终保持在顶部

Question

Windows Phone SDK（WP 8.1）的Flyout控件与我的预期不同。

无论我如何更改Placement属性，唯一会变化的是PlacementMode.Full。Top、Bottom、Left和Right仍将Flyout保留在显示器顶部。

是否有其他方法可以在页面底部显示Flyout？例如，Microsoft的日历应用程序在按下CommandBar的右侧AppBarButton更改视图时具有这种确切行为。

我尝试了两种方法：

XAML:
<Page.Resources>
    <Flyout x:Key="MyFlyout">
        <StackPanel>
            <TextBlock Text="Test"/>
        </StackPanel>
    </Flyout>
</Page.Resources>

C#:
Flyout flyout = (Flyout) this.Resources["MyFlyout"];
flyout.Placement = FlyoutPlacementMode.Bottom;
flyout.ShowAt(this.LayoutRoot);

---

XAML:
<Button Content="ShowFlyout">
    <Button.Flyout>
        <Flyout Placement="Bottom">
            <StackPanel>
                <TextBlock Text="Test"/>
            </StackPanel>
        </Flyout>
    </Button.Flyout>
</Button>

- Cort3vl

Answer 1

在您编辑问题并包含屏幕截图后，问题变得更加清晰。

他们使用的是MenuFlyout而不是普通的flyout。

这可以通过以下代码轻松实现：

<Page.BottomAppBar>
    <CommandBar Background="Black" IsOpen="False" IsSticky="False" ClosedDisplayMode="Minimal">
        <CommandBar.PrimaryCommands>
            <AppBarButton x:Name="btnPin" Label="Choose" Icon="Calendar" Foreground="White">
                <Button.Flyout>
                    <MenuFlyout Placement="Top">
                        <MenuFlyoutItem Text="Day" /><MenuFlyoutSeparator/>
                        <MenuFlyoutItem Text="Week" /><MenuFlyoutSeparator/>
                        <MenuFlyoutItem Text="Month" />
                        <MenuFlyoutSeparator/>
                        <MenuFlyoutItem Text="Year" />
                        <MenuFlyoutSeparator/>
                    </MenuFlyout>
                </Button.Flyout>
            </AppBarButton>                
        </CommandBar.PrimaryCommands>
    </CommandBar>
</Page.BottomAppBar>

当然，您可以按照自己的喜好对其进行样式设置。

- Saqib Vaid

---

谢谢，这很棒。有没有办法更改进入转换效果？ 我读了这篇文章，但除了故事板动画外，没有什么真正有用的帮助。但是菜单飞出的进入转换还在。 http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh452703.aspx - Cort3vl

@Cort3vl 最好您新提一个问题，这样社区可以帮助您解决。 - Saqib Vaid

@Cort3vl 此外，如果答案有帮助，请将其标记为答案。 - Saqib Vaid

我正在尝试产生与@Cort3vl相同的结果，我不认为MS正在使用MenuFlyout，您可以在邮件应用程序中看到与日历中的回复按钮相同的行为。当您使用Flyout时，您可以看到应用程序被动画到背景中，这在日历中并非如此。MenuFlyout具有与在列表中按住项目时相同的效果。对我来说，它看起来更像是“自定义”视图。 - StrAbZ

Answer 2

然而有一个简单的解决方法，但似乎并不是最好的方式。您可以创建一个针对FlyoutPresenter的样式并将边距设置为强制Flyout以底部显示，您需要使用将宽度和高度绑定到Margin的转换器，以使该边距根据每个屏幕大小向下移动Flyout到页面。这确实可行，但正如我所说，似乎不是最佳方式。

- apramc

Answer 3

我只是稍微修改了你的代码，让弹出菜单显示在底部。

<Grid>
    <Button x:Name="DeleteButton" Content="Empty cart">
        <Button.Flyout>
            <Flyout Placement="Full">
                <Grid VerticalAlignment="Bottom" >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                    </Grid.RowDefinitions>
                    <TextBlock Grid.Row="1" Style="{StaticResource BaseTextBlockStyle}">
                        All items will be permanently removed from your cart.
                    </TextBlock>
                    <Button Grid.Row="2" Click="DeleteConfirmation_Click" Margin="0">
                        Empty my cart
                    </Button>
                </Grid>                        
            </Flyout>
        </Button.Flyout>
    </Button>
</Grid>

从这篇文章中：http://msdn.microsoft.com/en-us/library/windows/apps/xaml/dn308515.aspx

在Windows Phone上，默认情况下，Flyout会显示在屏幕顶部。您可以更改Placement属性为FlyoutPlacementMode.Full，使Flyout覆盖整个屏幕。在Windows Phone应用程序中，Top、Bottom、Left和Right值没有任何效果。

- Saqib Vaid

---

谢谢你的回复。这不完全是我想要的。我在上面的问题中添加了一张截图。也许他们使用了不同的控件。 - Cort3vl