Windows Phone Flyout stays always on top

Question

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.

Screenshot of the calender app

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>

score 1 · Accepted Answer · answered Sep 17 '14 at 05:49

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>

enter image description here

Ofcourse you can style it the way you want it.

answered Sep 17 '14 at 05:49

Saqib Vaid

412
6
23

Thanks man, this is cool. Is there a way to change the entrance transition? I read this article, but apart from the storyboard animation there was nothing that really helped. But still the entrance Transition that is part of the MenuFlyout stays. http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh452703.aspx – Cort3vl Sep 18 '14 at 11:52
@Cort3vl Better you add a new question for this so the community can help on this. – Saqib Vaid Sep 21 '14 at 06:14
@Cort3vl Moreover if the answer has helped please mark it as answer. – Saqib Vaid Sep 21 '14 at 06:15
1

I'm trying to produce the same result as @Cort3vl, and I don't think MS is using a MenuFlyout, you can see the same behavior as in Calendar in the Email app (in tapping the reply button). When you use a Flyout you can see the app being animated to the background, which is not the case in calendar. The MenuFlyout as the same effect as when you keep you finger on an item in a list. For me it looks like more a "Custom" view. – StrAbZ Nov 06 '14 at 10:13

score 1 · Answer 2 · answered Jul 15 '15 at 15:06

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.

score 0 · Answer 3 · answered Sep 15 '14 at 05:04

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.

enter image description here

Thanks for your reply. This is not quite what I wanted. I added a screenshot to my question above. Maybe they used a different control. — Cort3vl, Sep 16 '14 at 12:02

Windows Phone Flyout stays always on top

3 Answers3

Linked