MenuFlyout subitems in Windows 10 Universal apps

MenuFlyout subitems in Windows 10 Universal apps

A very useful new feature has been added to MenuFlyouts in Windows 10 Universal apps: from now on, we can add subitems/submenus, which allows us to group items and open/show them as requested. When mouse is available, the submenu opens on mouse-over event, and when only touch is available it opens on a tap. You can also use keyboard to navigate through items, and open the submenu item sections.

It's really easy to use subitems. Just create a MenuFlyout and add a MenuFlyoutSubItem item wherever you need it. MenuFlyoutSubItem then takes more MenuFlyoutItem items.

Note that that everything here is written using Windows 10 Technical Preview build 10041 and Technical Preview Tools, so things can change.

Here's one example:

<MenuFlyout Placement="Bottom">  
    <MenuFlyoutItem Text="Save" />
    <MenuFlyoutItem Text="Clear" />
    <MenuFlyoutSeparator />
    <MenuFlyoutSubItem Text="Share to">
        <MenuFlyoutItem Text="Facebook" />
        <MenuFlyoutItem Text="Twitter" />
        <MenuFlyoutItem Text="LinkedIn" />
    </MenuFlyoutSubItem>
</MenuFlyout>  

So if you attach it to a button, you get something like this:

<Button VerticalAlignment="Center"  
        HorizontalAlignment="Center"
        Content="Menu"
        Padding="16,4">
    <Button.Flyout>
        <MenuFlyout Placement="Bottom">
            <MenuFlyoutItem Text="Save" />
            <MenuFlyoutItem Text="Clear" />
            <MenuFlyoutSeparator />
            <MenuFlyoutSubItem Text="Share to">
                <MenuFlyoutItem Text="Facebook" />
                <MenuFlyoutItem Text="Twitter" />
                <MenuFlyoutItem Text="LinkedIn" />
            </MenuFlyoutSubItem>
        </MenuFlyout>
    </Button.Flyout>
</Button>  

You can of course add subitems inside subitems

<MenuFlyout Placement="Bottom">  
    <MenuFlyoutItem Text="Save" />
    <MenuFlyoutItem Text="Clear" />
    <MenuFlyoutSeparator />
    <MenuFlyoutSubItem Text="Share to">
        <MenuFlyoutItem Text="Facebook" />
        <MenuFlyoutItem Text="Twitter" />
        <MenuFlyoutItem Text="LinkedIn" />
        <MenuFlyoutSubItem Text="Other">
            <MenuFlyoutItem Text="Reddit" />
            <MenuFlyoutItem Text="Pinterest" />
        </MenuFlyoutSubItem>
    </MenuFlyoutSubItem>
</MenuFlyout>  

Works great everywhere.

Desktop:
MenuFlyoutSubItem on desktop

Phone (mobile):
MenuFlyoutSubItem on mobile

Notice how it's placed differently on phone when there's not enough space on the right!

Conclusion

MenuFlyoutSubItem is a great new feature in MenuFlyouts that I expect will be used quite heavily. Great to see that it was added, as it's often useful to group items in a subitem, especially if they are representing features that are not used often.

Igor Ralic

igor ralic

View Comments
Microsoft Certified Solutions Developer: Windows Store Apps in C#