Windows Phone Flyout始终保持最佳状态

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

无论我如何更改Placement Property,唯一改变的是PlacementMode.Full。 顶部,底部,左侧和右侧仍然保持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> 

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

他们正在使用的是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> 

在这里输入图像说明

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

有一个简单的解决方法,但它并不是最好的方式。 您可以创建一个定位为FlyoutPresenter的样式,并设置边距以强制Flyout在底部显示,您需要将边距与占用屏幕宽度和高度的转换器绑定,并设置边距以将展开的向下移动到每个屏幕大小的页面。 它确实有用,但正如我所说,似乎并不是最好的办法。

我只是修改了一下你的代码来展示底部的弹出窗口。

 <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,使弹出窗口覆盖整个屏幕。 在Windows Phone应用程序中,“上”,“下”,“左”和“右”值没有任何影响。

在这里输入图像说明在这里输入图像说明