CODEWITHSUNDEEP
xamlwindows-runtimewindows-phone-8.1win-universal-app
Jan Kratochvil
Jan Kratochvil

Reputation: 2327

AppBarButton.Flyout bad positioning

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.

Upvotes: 5

Views: 5217

Answers (1)

Tim Heuer
Tim Heuer

Reputation: 4301

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.

Upvotes: 7

Related Questions