5

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.

Community
  • 1
  • 1
Jan Kratochvil
  • 2,307
  • 1
  • 21
  • 39
  • Have you verified this is also the case on a phone? – Claus Jørgensen Apr 27 '14 at 21:03
  • Yes, same thing on a physical device. – Jan Kratochvil Apr 27 '14 at 21:13
  • 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 Apr 27 '14 at 21:39
  • It appears it's meant to be supported. [This MSDN topic](http://msdn.microsoft.com/en-us/library/windows/apps/hh465341.aspx) has a discussion on drop-down menus talking about this very use of it. – Andrew Arnott Apr 29 '14 at 04:48
  • 1
    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! http://timgabrhel.com/blog/flyout-on-windows-phone-8-1-runtime/ – Depechie Dec 04 '14 at 09:55
  • This one was irritating, confirmed on a Lumia 1520. Strange thing is it worked for only one flyout added. When more flyouts were added for other AppBarButtons placement went crazy. – Vedran Mandić Dec 15 '14 at 02:19

1 Answers1

7

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.

Tim Heuer
  • 4,301
  • 21
  • 20
  • Ok, thanks, I hope this issue gets fixed, it seems like a basic use case. – Jan Kratochvil May 09 '14 at 07:46
  • In case anyone else gets stuck trying to figure out what "this.root" is pointing at, it needs to be the CommandBar element defined in the XAML, e.g. – Philip Colmer Nov 30 '14 at 10:02
  • for me it works in all the emulators but on Lumia 735, the same problem persists. – Igor Kulman Dec 04 '14 at 09:40
  • This worked great though if I called mf.ShowAt(CommandBar) or even the AppBarButton then it would not work. I needed to call ShowAt on an element of the page and then it would fit above the CommandBar perfectly. – ickydime Apr 21 '15 at 22:24
  • I can confirm I have a user with a Lumia 735 and the problem persists, just like for @IgorKulman. – Philip Colmer Apr 27 '15 at 11:28