1

I have an Page AppBar that contains an CommandBar in this command bar I have AppBar Buttons that when on clicked open a MenuFlyout like below:

<AppBarButton Icon="World" Label="Maps" ToolTipService.ToolTip="Map Providers!" IsCompact="True">
                    <AppBarButton.Flyout>
                        <MenuFlyout>
                            <MenuFlyoutItem Click="mapProviderMenuFlyoutItem_Click">Unison Maps</MenuFlyoutItem>
                            <MenuFlyoutItem Click="mapProviderMenuFlyoutItem_Click">Google Maps</MenuFlyoutItem>
                            <MenuFlyoutItem Click="mapProviderMenuFlyoutItem_Click">Bing Maps</MenuFlyoutItem>
                            <MenuFlyoutItem Click="mapProviderMenuFlyoutItem_Click">OpenStreetMap</MenuFlyoutItem>
                            <MenuFlyoutItem Click="mapProviderMenuFlyoutItem_Click">OpenCycleMap</MenuFlyoutItem>
                            <MenuFlyoutItem Click="mapProviderMenuFlyoutItem_Click">OCM Transport</MenuFlyoutItem>
                            <MenuFlyoutItem Click="mapProviderMenuFlyoutItem_Click">OCM Landscape</MenuFlyoutItem>
                            <MenuFlyoutItem Click="mapProviderMenuFlyoutItem_Click">MapQuest OSM</MenuFlyoutItem>
                        </MenuFlyout>
                    </AppBarButton.Flyout>
                </AppBarButton>

The first button works great, it shows all menu items in the menu flyout, however the other buttons are stripping out menu items as the MenuFlyout is not large enough to display all results.

The above code can be added multiple times in the project and results in the same bug.

Does anyone have a solution for this?

Xela
  • 2,322
  • 1
  • 17
  • 32

1 Answers1

0

EDIT: it appears to be a known bug. See this answer for a workaround.

I don't think MenuFlyout is designed for use with an AppBarButton. It's more suitable as a longpress menu on a ListViewItem. In any case, I've never seen MenuFlyout used on an AppBarButton in any official Microsoft apps. Usually they'd use ListPickerFlyout instead.

For example, you could use the following XAML:

<Page
    x:Class="App7.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    DataContext="{Binding RelativeSource={RelativeSource Self}}">

    <Page.BottomAppBar>
        <CommandBar>
            <AppBarButton Icon="World" Label="Maps" ToolTipService.ToolTip="Map Providers!" IsCompact="True">
                <AppBarButton.Flyout>
                    <ListPickerFlyout ItemsSource="{Binding MapProviders}" />
                </AppBarButton.Flyout>
            </AppBarButton>
        </CommandBar>
    </Page.BottomAppBar>

    <Grid></Grid>
</Page>

with code behind:

public sealed partial class MainPage : Page
{
    public List<string> MapProviders { get; private set; }

    public MainPage()
    {
        this.InitializeComponent();
        this.NavigationCacheMode = NavigationCacheMode.Required;

        MapProviders = new List<string>
        {
            "Unison Maps",
            "Google Maps",
            "Bing Maps",
            "OpenStreetMap",
            "OpenCycleMap",
            "OCM Transport",
            "OCM Landscape",
            "MapQuest OSM"
        };
    }
}

to produce a flyout like this (which is scrollable):

enter image description here

Of course, this is a very simplified example and you could set the ItemsSource by other means.

Community
  • 1
  • 1
Decade Moon
  • 32,968
  • 8
  • 81
  • 101
  • Microsoft does it to add a context menu to there app buttons. http://msdn.microsoft.com/en-us/library/windows/apps/xaml/jj150602.aspx. A windows store app behaves correctly a windows phone 8.1 app does not. It seems like a bug to me. – Xela Sep 22 '14 at 20:45
  • Your current method is what I used prior but I wanted my make my Windows Phone 8.1 app more universal and share more code with its tablet counterpart. – Xela Sep 22 '14 at 20:49
  • If you want to share code you can try PopupMenu class. It also suits for ContextMenu but it is not customisable. http://compiledexperience.com/blog/posts/positioning-popup-menus-in-windows-8-metro/ - this is sample (should work for universal apps too). – Валера Галанин Sep 23 '14 at 16:17