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



Related Articles

Downloads

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Instead of only managing projects organizations do need to manage value! "Doing the right things" and "doing things right" are the essential ingredients for successful software and systems delivery. Unfortunately, with distributed delivery spanning multiple disciplines, geographies and time zones, many organizations struggle with teams working in silos, broken lines of communication, lack of collaboration, inadequate traceability, and poor project visibility. This often results in organizations "doing the …

  • With JRebel, developers get to see their code changes immediately, fine-tune their code with incremental changes, debug, explore and deploy their code with ease (both locally and remotely), and ultimately spend more time coding instead of waiting for the dreaded application redeploy to finish. Every time a developer tests a code change it takes minutes to build and deploy the application. JRebel keeps the app server running at all times, so testing is instantaneous and interactive.

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds