A new control added in the Windows 8.1 preview is the Flyout control. It is used for temporarily showing some UI based on what the user is doing. It could be, or actually must be, easily dismissed by clicking or tapping outside it. You can attach the Flyout control to a button or use the FlyoutBase.AttachedFlyout attached property on any other framework element. Other than a dialog, the flyout does not create a window and does not block the UI.

Button Flyout

For demonstration purposes I started by creating a new Windows Store application using Blend for Visual Studio 2013 preview and added a button to the grid. I centered the button and changed its contents to “Show Flyout“ .

To add a Flyout to the button right-click on the button in the objects & timeline panel or in the designer and select Add Flyout. The Create FlyoutBase Resource window appears where you can name the resource that will be created. I named the resources ButtonFlyout and hit OK.

In the Objects and Timeline panel you see a Flyout object containing an empty grid. The designer should show a white square next to the button now. Hit F5 to run the application to see what happens with the flyout.

When you tap or click the button when the application runs, you should see a white square slide up from the button. The flyout disappears when you tap or click anywhere. Close the application and switch back to Blend.

The placement of the flyout, which is set to Top by default, can by changed in the properties panel. With the Flyout object is selected have a look at the Properties panel. The Flyout control doesn’t have many properties. The Placement property is used to set the placement of the flyout. The flyout control may be placed aligned to the top, bottom, left, or right of the button. You can also set the placement to Full. A full placement sets the width and height of the flyout to its maximum and centers the flyout on the screen.

The other two properties are the Content of the flyout. This will contain the grid by default, which you can change to whatever you need of course.

If you need to you can change the style for the flyout by adding a style resource to the FlyoutPresenterStyle property. 

Attached flyout

Adding flyouts to button is fun, but not always useful. You often have other controls where you need a little flyout attached to it. To support flyouts on every Framework Element Microsoft included an Attached Flyout. The attached flyout makes use of an AttachedProperty. This enables you to use properties defined in another class on your objects, like the Grid.Column for example.

To show you how to create an attached flyout I added an HyperlinkButton to the designer. You can find this control the easiest by searching in the Assets panel. Just type the first few characters in the appropriate search box and drag the HyperlinkButton to the designer.

With the HypelinkButton selected go over to the Properties panel. Scroll all the way down to the Miscellaneous group. There’s the FlyoutBase.AttachedFlyout property. You can add a Flyout to the AttachedFlyout property by clicking on the New button.

This will show you the Select Object window. This dialog contains all two possible flyouts you can add to your page. Both are inherited from FlyoutBase so you might add custom derivatives if you like. Select the Flyout control for now (I come back to the MenuFlyout in a moment) and click OK.

Other than with the Button you’ll end up with an empty flyout in this case. You’ll have to add a grid and it’s contents by hand. Try adding a Grid with a TextBlock and a Button. Name the button: “FlyoutDemoButton”, and the Flyout itself: “HyperlinkFlyout”.

Unlike the flyout control on the button, that is able to show itself when the button is clicked, this flyout has to be told to show from code. For this you need to handle the tapped or clicked event on the HyperlinkButton. To do this from Blend go to the properties panel with the HyperlinkButton selected and click the little lightning bolt in top right corner of the panel. Look for the Tapped event and double-click in the empty text box next to it. This will generate the event handler for you, opens the code behind file and places the pointer inside the handler. Add the following code to the HyperlinkButton_Tapped method:

FrameworkElement s = sender as FrameworkElement;
Flyout.ShowAttachedFlyout(s);

This code will take the sender, the HyperlinkButton, and uses that as a FrameworkElement. This way it can be passed as parameter to the Flyout.ShowAttachedFlyout method. This method will show the attached flyout on the FrameworkElement.

At some point in the development of your applications you might need to close the flyout though code. If you run the application at this point you notice the flyout does not go away when you click on the button. You need to handle this yourself. To demonstrate this handle the Tapped event on the “FlyoutDemoButton”. In the event handler for this event in the code behind add the following line.

this.HyperlinkFlyout.Hide();

MenuFlyout

As I mentioned earlier there’s also a MenuFlyout. This flyout is added to the framework to make it much simpler to create small popup menus. The MenuFlyout control works in pretty much the same way as the normal flyout, with the difference that is has no content property but contains a list of MenuItems. There are three different kinds of menu items that you can use out of the box:

1. MenuFlyoutItem, a basic item that the user can click to give some command.
2. ToggleMenuFlyoutItem, this menu item is preceded by a checkmark that can be toggled.
3. MenuFlyoutSeparator, a horizontal line to separate items.

Add another Button to the designer and set its contents to “Menu Flyout”. Right-click the button in the designer or the objects and timeline panel and select Add MenuFlyout. This will present you with the same Add FlyoutBase Resource dialog as you’ve seen earlier. Name the resource “MenuFlyout” and click OK.

There are two ways you can add items to the menu. The first one is through the properties panel. To add menu items click the button next to Items (Collection). You can select the type of menu item you would like to add to the menu from the dropdown list at the bottom and add that item by clicking the Add button. You can use the buttons with the arrows to order the items and delete them by clicking on the button with the X. Properties of the menu items can be set on the right side of the dialog. When you are done adding and editing menu items click the OK button to complete adding items and close the dialog.

The second way to add items to the menu is by adding them to the objects & timeline panel. Search for “Flyout” in the assets panel. From the results you can drag the desired item to the menu. The item is added at the location of the blue line.

To handle user actions on the menu items you’ll have to handle the tap events of the menu items. Let’s try that.

Add two MenuFlyoutItems to the flyout menu. Change the Text property of the items to “Item 1” and “Item 2”. Go to the events list and add at Tapped event handler to the first MenuFlyoutItem. Copy the text that is added to the text box from the tapped event to the event handler of the other MenuFlyoutItem, so both are handled by the same event handler.

Switch over to the code behind and add the following code to the event handler for the menu items:

MenuFlyoutItem item = sender as FlyoutMenuItem;
switch(item.Text)
{
    case "Item 1":
        // do something
        break;
    case "Item 2":
        // do something
        break;
}

This code takes the sender of the event as a MenuFlyoutItem and uses a switch statement to decide what to do next based on the text on the items. Of course you can handle events on each menu item separately too if you like.

To get to the checked state of the ToggleMenuFlyoutItem in an event handler, just grab the sender as ToggleMenuFlyoutItem and look for the IsChecked property.

If you are used to work with MVVM in your applications you can use the Command property of the menu items to data bind to you model.

Closing words

I think these Flyouts will make become handy if you need a little message, confirmation or just have the use make a selection. But I sure hope behaviors will be made available in Blend soon so I can write the behaviors necessary to show attached flyouts without writing code in the code behind files.

If you like to read a little more in depth about these controls have a look at the MSDN pages of the Flyout control, MenuFlyout control, MenuFlyoutItem control and ToggleMenuFlyoutItem.

I’m planning on doing a couple more of these introductions on the new Windows 8.1 controls and Blend for Visual Studio 2013 preview. If you like to stay up to date follow me on twitter (@sorskoot) or subscribe to the RSS feed. If you have any question or comments please feel free to contact me or leave it below.