Windows Phone Flyout stays always on top

问题

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

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>

回答1:

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

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.

回答2:

There is a simple workaround, however it doesn't look to be the best way tho. You can create a Style targeting FlyoutPresenter and set the margin to force the Flyout to be shown in the botton, you need to bind the Margin with a converter that takes the width and height of your screen and sets the margin to move the flyout down to the page for every screen size. It does work, but as I said, doesn't seem to be the best way.

回答3:

I just modified your code a little bit to show the flyout on the bottom.

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

From this article : http://msdn.microsoft.com/en-us/library/windows/apps/xaml/dn308515.aspx

On Windows Phone, a Flyout is shown at the top of the screen by default. You can change the Placement property to FlyoutPlacementMode.Full to make the flyout cover the full screen. The Top, Bottom, Left, and Right values don't have any effect in Windows Phone apps.

来源：https://stackoverflow.com/questions/25832971/windows-phone-flyout-stays-always-on-top