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应用程序中,“上”,“下”,“左”和“右”值没有任何影响。