Windows 8.1 introduces a bunch of new APIs to support common use cases. To customize user interaction with the application, Windows 8.1 provides the MenuFlyout control, which allows application developers to build applications that can show contextual menus for the user to choose from.
The MenuFlyout control is used to show options that are relevant to what the user is currently doing. In the classic Windows world, this would amount to the context menu, which provides users with options related to what the user is currently doing.
The MenuFlyout control resides in the Windows.UI.Xaml.Controls namespace. The control displays a menu of commands and displays a lightweight UI. It can be dismissed by clicking/tapping outside of it and needs to be displayed in response to a user tap/click.
The contents of the menu can be defined by adding one or more of the following objects to the MenuFlyout:
- MenuFlyoutItem – This object is used to represent an action that can to be taken immediately.
- ToggleMenuFlyoutItem – This object is used to represent an option that can be toggled (switched on and off) .
- MenuFlyoutSeparator – This object is used to separate one or more MenuFlyoutItems and/or ToggleMenuFlyoutItems.
A MenuFlyout can be attached to most common controls like a Button.
We will build a simple Windows 8.1 application that demonstrates use of MenuFlyout control. You will need a Windows 8.1 OS with Visual Studio 2013 RC1 installed.
Create a new Visual Studio 2013 application called Windows8.1MenuFlyoutDemo.
MenuFlyouts are typically associated with controls such as Buttons. In this demo, we will add a button to which we will associate the MenuFlyout control.
Add a button titled “Work In Progress”.
Open the properties window and search for the Flyout property.
Properties >> Flyout
Click on the New button next to the Flyout property.
In the “Select Object” window, select MenuFlyout and click OK.
Select Object >> MenuFlyout
Next, we will add content to the MenuFlyout control by adding items to the collection.
Adding items to the collection
Click on the “…” button next to the Items property.
The MenuFlyoutItemBase Collection Editor pops up.
MenuFlyoutItemBase Collection Editor
To add MenuFlyoutItem to the collection, select MenuFlyOutItem from the dropdown and click Add.
A MenuFlyoutItem is added to the collection.
Change the text property of the MenuFlyoutItem to “MenuFlyoutItem sample”.
Change the text property of the MenuFlyoutItem
Next, we will add a MenyFlyoutSeparator to the collection.
Add a MenyFlyoutSeparator to the collection
Select MenuFlyoutSeparator in the dropdown and click Add.
Finally, we will add a ToggleMenuFlyoutItem to the collection. Select ToggleMenuFlyoutItem and click Add.
After adding, the screen will look like the screenshot below.
MenuFlyoutItemBase Collecton Editor: Items
Set the Text property to ToggleMenuFlyoutItem sample.
Set the Text property to ToggleMenuFlyoutItem
Our application is now ready. When you run the application and and click on the button, you will notice that the MenuFlyout control is rendered as below.
Where to Use MenuFlyout Controls
MenuFlyout controls are to be used where you want to provide users with context-sensitive options.
In this article, we learned about the MenuFlyout control. I hope you have found the information useful. You can download the sample code listing below.
About the author
Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at [email protected]