Windows apps
Collapse the table of content
Expand the table of content

Flyout

Note  Pre-Release Content: This topic is currently being adapted to apply to both Windows 8.1 and Windows Phone (code-named "Blue"). To view the Windows 8.1 version of this topic, click here.

A sample of what a standard flyout control looks like

Control description

A flyout is a lightweight popup that is used to temporarily show UI that is related to what the user is currently doing. It can be used to show a menu, reveal a hidden control, show more details about an item, or ask the user to confirm an action. You should only show a flyout in response to a user tap or click. A flyout is always dismissed when the user taps outside of it.

Usage guidance

Use flyouts to show UI that you don't want on the screen all the time. A user can dismiss a flyouts at any time.

Always position a flyout next to its point of invocation. If the user taps a button in the app bar to bring up a flyout, then the flyout should appear next to the toolbar button. If the flyout relates to selected text, it should appear next to the text. When you implement a flyout you position it by specifying the object to which you want it anchored and the side of the object on which it should appear.

Examples

A screenshot that illustrates the standard flyout control

Related APIs

WinJS.UI.Flyout object

Flyout class

Guidelines for flyouts

 

 

Show:
© 2017 Microsoft