Windows Phone 8.1 MenuFlyout错误？

Question

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?

Answer 1

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):

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