Windows Phone飞出始终保持在最前面

问题描述

Windows Phone SDK(WP 8.1)的Flyout控件无法正常运行.

The Flyout control of the Windows Phone SDK (WP 8.1) doesn't work as I expected.

无论我如何更改Placement属性，唯一会改变某些东西的就是PlacementMode.Full.顶部，底部，左侧和左侧仍将弹出按钮保持在显示屏顶部.还有另一种方法可以在页面底部显示弹出框吗?例如，Microsoft的日历应用程序在通过按CommandBar的右侧AppBarButton更改视图时具有这种确切的行为.

No matter how I change the Placement Property, the only thing that changes something is PlacementMode.Full.Top, Bottom, Left & Right still keep the Flyout on top of the Display.Is there another way to show the Flyout at the bottom of my Page? For example the calender app from Microsoft has this exact behaviour while changing the view by pressing the right AppBarButton of the CommandBar.

这是我尝试过的两种方法:

Here are two ways I tried:

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>

推荐答案

在编辑问题以包括屏幕截图之后，它变得更加清晰.

After you edited the question to include the screen shot it becomes much more clear.

他们正在使用的是MenuFlyout，而不仅仅是普通的弹出按钮.

What they are using is a MenuFlyout rather than just a normal flyout.

这可以很容易地如下面的代码所示:

This can be easily as in the code below :

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

当然，您可以根据需要对其进行样式设置.

Ofcourse you can style it the way you want it.

这篇关于Windows Phone飞出始终保持在最前面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！