MenuFlyout
MenuFlyout
MenuFlyout
MenuFlyout
Class
Definition
Represents a flyout that displays a menu of commands.
public : class MenuFlyout : FlyoutBase, IMenuFlyout, IMenuFlyout2public class MenuFlyout : FlyoutBase, IMenuFlyout, IMenuFlyout2Public Class MenuFlyout Inherits FlyoutBase Implements IMenuFlyout, IMenuFlyout2// This API is not available in Javascript.
<MenuFlyout>
oneOrMoreItems
</MenuFlyout>
- Inheritance
-
MenuFlyoutMenuFlyoutMenuFlyoutMenuFlyout
- Attributes
| Device family |
Windows 10 (introduced v10.0.10240.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v1)
|
Inherited Members
Inherited properties
Inherited methods
Inherited events
Remarks
MenuFlyout temporarily displays a list of commands or options related to what the user is currently doing.

Use a Flyout control to display single items and a MenuFlyout control to show a menu of items. For more info, see Menus and context menus.
A MenuFlyout control can be used as the value of the Button.Flyout property. This is usually set in XAML as part of a UI definition of the page. Button is the only control that has a dedicated Flyout property. To associate a MenuFlyout with other controls, use the FlyoutBase.AttachedFlyout attached property. When set as Button.Flyout, the MenuFlyout displays when the button is tapped or otherwise invoked. When a MenuFlyout is assigned to other UI elements using FlyoutBase.AttachedFlyout, you must call either the ShowAt method or the static ShowAttachedFlyout method to display the flyout.
In addition to the members listed above, there are other members of the base class FlyoutBase that are often used in typical MenuFlyout scenarios:
- FlyoutBase.AttachedFlyout: an attached property that associates a MenuFlyout with a particular UI element (this can be any FrameworkElement derived class).
- ShowAttachedFlyout: a static method that can determine whether a flyout is already associated with a UI element through a FlyoutBase.AttachedFlyout usage. If so, the method calls ShowAt internally, using the FrameworkElement that you specified.
Constructors
MenuFlyout() MenuFlyout() MenuFlyout() MenuFlyout()
Initializes a new instance of the MenuFlyout class.
public : MenuFlyout()public MenuFlyout()Public Sub New()// This API is not available in Javascript.
Properties
Items Items Items Items
Gets the collection used to generate the content of the menu.
public : IVector<MenuFlyoutItemBase> Items { get; }public IList<MenuFlyoutItemBase> Items { get; }Public ReadOnly Property Items As IList<MenuFlyoutItemBase>// This API is not available in Javascript.
<MenuFlyout>
oneOrMoreItems
</MenuFlyout>
- Value
- IVector<MenuFlyoutItemBase> IList<MenuFlyoutItemBase> IList<MenuFlyoutItemBase> IList<MenuFlyoutItemBase>
The collection that is used to generate the content of the menu, if it exists; otherwise, null. The default is an empty collection.
- See Also
MenuFlyoutPresenterStyle MenuFlyoutPresenterStyle MenuFlyoutPresenterStyle MenuFlyoutPresenterStyle
Gets or sets the style that is used when rendering the MenuFlyout.
public : Style MenuFlyoutPresenterStyle { get; set; }public Style MenuFlyoutPresenterStyle { get; set; }Public ReadWrite Property MenuFlyoutPresenterStyle As Style// This API is not available in Javascript.
<MenuFlyout MenuFlyoutPresenterStyle="resourceReferenceToStyle"/>
The style that is used when rendering the MenuFlyout.
Remarks
The TargetType value to use for the Style must be MenuFlyoutPresenter (not MenuFlyout).
You can't style a MenuFlyout directly. Instead, you apply a style to the MenuFlyoutPresenter that provides the visuals for the flyout. You can also style MenuFlyoutItem and ToggleMenuFlyoutItem (they are controls) and you can use implicit styles to do so. Or, you can set UI-related properties on the MenuFlyoutItem and ToggleMenuFlyoutItem items directly.
- See Also
MenuFlyoutPresenterStyleProperty MenuFlyoutPresenterStyleProperty MenuFlyoutPresenterStyleProperty MenuFlyoutPresenterStyleProperty
Identifies the MenuFlyoutPresenterStyle dependency property.
public : static DependencyProperty MenuFlyoutPresenterStyleProperty { get; }public static DependencyProperty MenuFlyoutPresenterStyleProperty { get; }Public Static ReadOnly Property MenuFlyoutPresenterStyleProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the MenuFlyoutPresenterStyle dependency property.
Methods
ShowAt(UIElement, Point) ShowAt(UIElement, Point) ShowAt(UIElement, Point) ShowAt(UIElement, Point)
Shows the flyout placed at the specified offset in relation to the specified target element.
public : void ShowAt(UIElement targetElement, Point point)public void ShowAt(UIElement targetElement, Point point)Public Function ShowAt(targetElement As UIElement, point As Point) As void// This API is not available in Javascript.
The element to use as the flyout's placement target.
The point at which to offset the flyout from the specified target element.
Examples
To position the menu relative to a UI element, specify the element and offset.
MenuFlyout.ShowAt(element, new Point(0,0);
To position the menu relative to the application window, set the targetElement parameter to null.
MenuFlyout.ShowAt(null, new Point(x, y));
Remarks
When you call this method to show a MenuFlyout, it automatically renders outside the application window if possible and required.
Some properties might not flow as expected, such as FlowDirection. To ensure correct flow, you can set the flow direction in the MenuFlyoutPresenter The MenuFlyoutPresenter must be set before the MenuFlyout is first shown.
- See Also