Windows Phone Flyout 始终位于首位

Question

Windows Phone SDK (WP 8.1) 的 Flyout 控件无法正常工作。

无论我如何更改 Placement 属性，唯一改变的就是 PlacementMode.Full。 顶部、底部、左侧和右侧仍将弹出按钮保持在显示屏顶部。 还有其他方法可以在我的页面底部显示弹出窗口吗？例如，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>

Answer 1

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

他们使用的是 MenuFlyout，而不仅仅是普通的弹出窗口。

这可以很容易地在下面的代码中：

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

当然，你可以按照你想要的方式来设计它。

Answer 2

有一个简单的解决方法，但它看起来并不是最好的方法。 您可以创建一个针对 FlyoutPresenter 的 Style 并设置边距以强制 Flyout 在底部显示，您需要将 Margin 与一个转换器绑定，该转换器获取屏幕的宽度和高度并设置边距以将弹出窗口向下移动到每个屏幕尺寸的页面。它确实有效，但正如我所说，这似乎不是最好的方法。

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 以使弹出窗口覆盖全屏。 Top、Bottom、Left 和 Right 值在 Windows Phone 应用程序中没有任何影响。