Menu​Flyout Menu​Flyout Menu​Flyout Menu​Flyout 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
Attributes
Windows 10 requirements
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.

Menu flyout control

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:

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"/>
Value
Style Style Style Style

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.

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.
Parameters
targetElement
UIElement UIElement UIElement UIElement

The element to use as the flyout's placement target.

point
Point Point Point Point

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

See Also