Showing Contextual Options in Windows 8.1 Using the MenuFlyout Control

Introduction

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.

Basics

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.

Hands On

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.

New Project
New Project

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
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
Select Object >> MenuFlyout

Next, we will add content to the MenuFlyout control by adding items to the collection.

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
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
Change the text property of the MenuFlyoutItem

Next, we will add a MenyFlyoutSeparator to the collection.

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.

Select ToggleMenuFlyoutItem
Select ToggleMenuFlyoutItem

After adding, the screen will look like the screenshot below.

MenuFlyoutItemBase Collecton Editor: Items
MenuFlyoutItemBase Collecton Editor: Items

Set the Text property to ToggleMenuFlyoutItem sample.

Set the Text property to ToggleMenuFlyoutItem
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.

Summary

 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 vipul.patel@hotmail.com

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read