Question

Windows Phone SDK（WP 8.1）的Flyout控件并不像我预期的那样工作。

无论我如何更改Placement属性，唯一可以改变的是PlacementMode.Full。顶部，底部，左侧和左侧右边仍然将Flyout放在显示器的顶部。还有另一种方法可以在我的页面底部显示Flyout吗？例如，Microsoft的日历应用程序在按下CommandBar的右侧AppBarButton更改视图时具有此确切行为。

Screenshot of the calender app

我尝试了两种方式：

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>

enter image description here

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

Answer 2

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

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上，默认情况下会在屏幕顶部显示一个弹出窗口。您可以将Placement属性更改为FlyoutPlacementMode.Full，以使弹出窗口覆盖全屏。 Top，Bottom，Left和Right值对Windows Phone应用程序没有任何影响。

enter image description here

Windows Phone弹出窗口始终位于顶部

3 个答案: