AppBarButton.Flyout bad positioning

Question

A have the following CommandBar in my Windows Phone 8.1 (I'm using the Universal template):

    <Page.BottomAppBar>
        <CommandBar>
            <AppBarButton Label="add task" Click="GoToAddTask">
                <AppBarButton.Icon>
                    <SymbolIcon Symbol="Add" />
                </AppBarButton.Icon>
            </AppBarButton>
            <AppBarButton Label="sort by">
                <AppBarButton.Icon>
                    <SymbolIcon Symbol="Sort" />
                </AppBarButton.Icon>
                <AppBarButton.Flyout>
                    <MenuFlyout>
                        <MenuFlyoutItem Command="{Binding SortByDate}" Text="Date" />
                        <MenuFlyoutItem Text="Priority" Command="{Binding SortByPriority}" />
                        <MenuFlyoutItem Text="Name" Command="{Binding SortByName}" />
                    </MenuFlyout>
                </AppBarButton.Flyout>
            </AppBarButton>
            <AppBarButton Label="pin project" Command="{Binding PinProject}">
                <AppBarButton.Icon>
                    <SymbolIcon Symbol="Pin" />
                </AppBarButton.Icon>
            </AppBarButton>
        </CommandBar>
    </Page.BottomAppBar>

The problem is that when the user click the AppBarButton "sort by", the Flyout's bottom edge seems to be stuck to the bottom of the screen behind the AppBar itself. Here is a screenshot:

I checked the Windows 8.1 equivalent and it works fine (as illustrated for example here).

I assumes that the Flyout would be shown above the AppBar itself.

Answer 1

I believe this is a known issue. Instead of putting the MenuFlyout in-line, create it on the click event:

private void AppBarButton_Click(object sender, RoutedEventArgs e)
        {
            MenuFlyout mf = (MenuFlyout)this.Resources["MyFlyout"];

            mf.Placement = FlyoutPlacementMode.Bottom;
            mf.ShowAt(this.root);
        }

See if that works.