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:

Flyout positioning

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.

Interesting, I wonder if AppBarButton.Flyout were meant to be supported in this release. I suggest you raise the issue on Microsoft Connect, and not on Stack Overflow. — Claus Jørgensen
It appears it's meant to be supported. This MSDN topic has a discussion on drop-down menus talking about this very use of it. — Andrew Arnott
By the way if you want the real standard ( like the mail app ) and have the flyout at the base of the screen above the appbar take a look at Tim's solution! timgabrhel.com/blog/flyout-on-windows-phone-8-1-runtime — Depechie

Tim Heuer Tim Heuer · Accepted Answer · 2014-05-07T16:19:46

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.

AppBarButton.Flyout bad positioning

1 Answers