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.

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>

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