MenuFlyout Class

Definition

Represents a flyout that displays a menu of commands.

Equivalent WinUI class: Microsoft.UI.Xaml.Controls.MenuFlyout.

/// [Windows.Foundation.Metadata.Composable(Windows.UI.Xaml.Controls.IMenuFlyoutFactory, Windows.Foundation.Metadata.CompositionType.Public, 65536, Windows.Foundation.UniversalApiContract)]
/// [Windows.Foundation.Metadata.ContractVersion(Windows.Foundation.UniversalApiContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Static(Windows.UI.Xaml.Controls.IMenuFlyoutStatics, 65536, Windows.Foundation.UniversalApiContract)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
/// [Windows.Foundation.Metadata.WebHostHidden]
/// [Windows.UI.Xaml.Markup.ContentProperty(Name="Items")]
class MenuFlyout : FlyoutBase
/// [Windows.Foundation.Metadata.ContractVersion(Windows.Foundation.UniversalApiContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
/// [Windows.Foundation.Metadata.WebHostHidden]
/// [Windows.UI.Xaml.Markup.ContentProperty(Name="Items")]
/// [Windows.Foundation.Metadata.Composable(Windows.UI.Xaml.Controls.IMenuFlyoutFactory, Windows.Foundation.Metadata.CompositionType.Public, 65536, "Windows.Foundation.UniversalApiContract")]
/// [Windows.Foundation.Metadata.Static(Windows.UI.Xaml.Controls.IMenuFlyoutStatics, 65536, "Windows.Foundation.UniversalApiContract")]
class MenuFlyout : FlyoutBase
[Windows.Foundation.Metadata.Composable(typeof(Windows.UI.Xaml.Controls.IMenuFlyoutFactory), Windows.Foundation.Metadata.CompositionType.Public, 65536, typeof(Windows.Foundation.UniversalApiContract))]
[Windows.Foundation.Metadata.ContractVersion(typeof(Windows.Foundation.UniversalApiContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Static(typeof(Windows.UI.Xaml.Controls.IMenuFlyoutStatics), 65536, typeof(Windows.Foundation.UniversalApiContract))]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
[Windows.Foundation.Metadata.WebHostHidden]
[Windows.UI.Xaml.Markup.ContentProperty(Name="Items")]
public class MenuFlyout : FlyoutBase
[Windows.Foundation.Metadata.ContractVersion(typeof(Windows.Foundation.UniversalApiContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
[Windows.Foundation.Metadata.WebHostHidden]
[Windows.UI.Xaml.Markup.ContentProperty(Name="Items")]
[Windows.Foundation.Metadata.Composable(typeof(Windows.UI.Xaml.Controls.IMenuFlyoutFactory), Windows.Foundation.Metadata.CompositionType.Public, 65536, "Windows.Foundation.UniversalApiContract")]
[Windows.Foundation.Metadata.Static(typeof(Windows.UI.Xaml.Controls.IMenuFlyoutStatics), 65536, "Windows.Foundation.UniversalApiContract")]
public class MenuFlyout : FlyoutBase
Public Class MenuFlyout
Inherits FlyoutBase
<MenuFlyout>
  oneOrMoreItems
</MenuFlyout>
Inheritance
Derived
Attributes

Windows 10 requirements

Device family
Windows 10 (introduced in 10.0.10240.0)
API contract
Windows.Foundation.UniversalApiContract (introduced in v1.0)

Examples

Tip

For more info, design guidance, and code examples, see Menus and context menus.

If you have the XAML Controls Gallery app installed, click here to open the app and see the MenuFlyout in action.

This example creates a MenuFlyout class and uses the ContextFlyout property, a property available to most controls, to show the MenuFlyout class as a context menu.

<Rectangle Height="100" Width="100">
  <Rectangle.ContextFlyout>
    <MenuFlyout>
      <MenuFlyoutItem Text="Change color" Click="ChangeColorItem_Click" />
    </MenuFlyout>
  </Rectangle.ContextFlyout>
  <Rectangle.Fill>
    <SolidColorBrush x:Name="rectangleFill" Color="Red" />
  </Rectangle.Fill>
</Rectangle>
private void ChangeColorItem_Click(object sender, RoutedEventArgs e)
{
    // Change the color from red to blue or blue to red.
    if (rectangleFill.Color == Windows.UI.Colors.Red)
    {
        rectangleFill.Color = Windows.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Windows.UI.Colors.Red;
    }
}

The next example is nearly identical, but instead of using the ContextFlyout property to show the MenuFlyout class as a context menu, the example uses the FlyoutBase.ShowAttachedFlyout property to show it as a menu.

<Rectangle
  Height="100" Width="100"
  Tapped="Rectangle_Tapped">
  <FlyoutBase.AttachedFlyout>
    <MenuFlyout>
      <MenuFlyoutItem Text="Change color" Click="ChangeColorItem_Click" />
    </MenuFlyout>
  </FlyoutBase.AttachedFlyout>
  <Rectangle.Fill>
    <SolidColorBrush x:Name="rectangleFill" Color="Red" />
  </Rectangle.Fill>
</Rectangle>
private void Rectangle_Tapped(object sender, TappedRoutedEventArgs e)
{
    FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);
}

private void ChangeColorItem_Click(object sender, RoutedEventArgs e)
{
    // Change the color from red to blue or blue to red.
    if (rectangleFill.Color == Windows.UI.Colors.Red)
    {
        rectangleFill.Color = Windows.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Windows.UI.Colors.Red;
    }
}

This example shows how you can add and remove menu items at runtime based on changing conditions in your app.

<StackPanel Margin="40" Width="220">
    <Rectangle x:Name="Rect1" Height="100" Width="200" 
               Stroke="Black" StrokeThickness="1" Fill="White">
        <Rectangle.ContextFlyout>
            <MenuFlyout x:Name="RectangleColorMenu"/>
        </Rectangle.ContextFlyout>
    </Rectangle>

    <StackPanel>
        <TextBlock TextWrapping="WrapWholeWords"
                   Text="Check colors to include in the menu, then choose a color from the context menu on the rectangle."/>
        <CheckBox Content="Blue" Click="CheckBox_Click" Tag="blue"/>
        <CheckBox Content="Green" Click="CheckBox_Click" Tag="green"/>
        <CheckBox Content="Red" Click="CheckBox_Click" Tag="red"/>
        <CheckBox Content="Yellow" Click="CheckBox_Click" Tag="yellow"/>
    </StackPanel>
</StackPanel>
private void CheckBox_Click(object sender, RoutedEventArgs e)
{
    // Using the Tag property lets you localize the display name
    // without affecting functionality.
    var cb = (CheckBox)sender;
    if (cb.IsChecked == true)
    {
        AddMenuItem(cb.Tag.ToString(), cb.Content.ToString());
    }
    else
    {
        RemoveMenuItem(cb.Content.ToString());
    }
}

private void AddMenuItem(string colorString, string locColorName)
{
    // Set the color.
    Color newColor = Colors.Blue;
    if (colorString == "green")
        newColor = Colors.Green;
    else if (colorString == "red")
        newColor = Colors.Red;
    else if (colorString == "yellow")
        newColor = Colors.Yellow;

    // Create the menu item.
    var newMenuItem = new MenuFlyoutItem();
    newMenuItem.Text = locColorName;
    newMenuItem.Click += (s, e1) =>
    {
        Rect1.Fill = new SolidColorBrush(newColor);
    };

    // Add the item to the menu.
    RectangleColorMenu.Items.Add(newMenuItem);

    // Sort the menu so it's always consistent.
    var orderedItems =  RectangleColorMenu.Items.OrderBy(i => ((MenuFlyoutItem)i).Text).ToList();
    RectangleColorMenu.Items.Clear();
    foreach (var item in orderedItems)
    {
        RectangleColorMenu.Items.Add(item);
    }
}

private void RemoveMenuItem(string locColorName)
{
    // Get any menu items to remove and remove them.
    var items = RectangleColorMenu.Items.Where(i => ((MenuFlyoutItem)i).Text == locColorName);
    foreach (MenuFlyoutItem item in items)
    {
        RectangleColorMenu.Items.Remove(item);
    }
}

Remarks

Tip

For more info, design guidance, and code examples, see Menus and context menus.

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. When set as Button.Flyout, the MenuFlyout displays when the button is tapped or otherwise invoked.

To associate a MenuFlyout with other controls, use the ContextFlyout property that's available on any UIElement.

Notes for previous versions

Note

The ContextFlyout property is not available prior to the Windows 10 Anniversary Update (SDK version 14393). For earlier versions, use the FlyoutBase.AttachedFlyout attached property.

You can use the FlyoutBase.AttachedFlyout attached property to associate a MenuFlyout with other controls. 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:

Version history

Windows version SDK version Value added
1809 17763 ShowAt

Constructors

MenuFlyout()

Initializes a new instance of the MenuFlyout class.

Equivalent WinUI constructor: Microsoft.UI.Xaml.Controls.MenuFlyout.MenuFlyout.

Properties

AllowFocusOnInteraction

Gets or sets a value that indicates whether the element automatically gets focus when the user interacts with it.

Equivalent WinUI property: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.AllowFocusOnInteraction.

(Inherited from FlyoutBase)
AllowFocusWhenDisabled

Gets or sets a value that specifies whether the control can receive focus when it's disabled.

Equivalent WinUI property: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.AllowFocusWhenDisabled.

(Inherited from FlyoutBase)
AreOpenCloseAnimationsEnabled

Gets or sets a value that indicates whether animations are played when the flyout is opened or closed.

Equivalent WinUI property: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.AreOpenCloseAnimationsEnabled.

(Inherited from FlyoutBase)
Dispatcher

Gets the CoreDispatcher that this object is associated with. The CoreDispatcher represents a facility that can access the DependencyObject on the UI thread even if the code is initiated by a non-UI thread.

Equivalent WinUI property: Microsoft.UI.Xaml.DependencyObject.Dispatcher.

(Inherited from DependencyObject)
ElementSoundMode

Gets or sets a value that specifies the control's preference for whether it plays sounds.

Equivalent WinUI property: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.ElementSoundMode.

(Inherited from FlyoutBase)
InputDevicePrefersPrimaryCommands

Gets a value that indicates whether the input device used to open the flyout does not easily open the secondary commands.

Equivalent WinUI property: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.InputDevicePrefersPrimaryCommands.

(Inherited from FlyoutBase)
IsConstrainedToRootBounds

Gets a value that indicates whether the flyout is shown within the bounds of the XAML root.

Equivalent WinUI property: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.IsConstrainedToRootBounds.

(Inherited from FlyoutBase)
IsOpen

Gets a value that indicates whether the flyout is open.

Equivalent WinUI property: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.IsOpen.

(Inherited from FlyoutBase)
Items

Gets the collection used to generate the content of the menu.

Equivalent WinUI property: Microsoft.UI.Xaml.Controls.MenuFlyout.Items.

LightDismissOverlayMode

Gets or sets a value that specifies whether the area outside of a light-dismiss UI is darkened.

Equivalent WinUI property: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.LightDismissOverlayMode.

(Inherited from FlyoutBase)
MenuFlyoutPresenterStyle

Gets or sets the style that is used when rendering the MenuFlyout.

Equivalent WinUI property: Microsoft.UI.Xaml.Controls.MenuFlyout.MenuFlyoutPresenterStyle.

MenuFlyoutPresenterStyleProperty

Identifies the MenuFlyoutPresenterStyle dependency property.

Equivalent WinUI property: Microsoft.UI.Xaml.Controls.MenuFlyout.MenuFlyoutPresenterStyleProperty.

OverlayInputPassThroughElement

Gets or sets an element that should receive pointer input events even when underneath the flyout's overlay.

Equivalent WinUI property: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.OverlayInputPassThroughElement.

(Inherited from FlyoutBase)
Placement

Gets or sets the default placement to be used for the flyout, in relation to its placement target.

Equivalent WinUI property: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.Placement.

(Inherited from FlyoutBase)
ShouldConstrainToRootBounds

Gets or sets a value that indicates whether the flyout should be shown within the bounds of the XAML root.

Equivalent WinUI property: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.ShouldConstrainToRootBounds.

(Inherited from FlyoutBase)
ShowMode

Gets or sets a value that indicates how a flyout behaves when shown.

Equivalent WinUI property: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.ShowMode.

(Inherited from FlyoutBase)
Target

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

Equivalent WinUI property: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.Target.

(Inherited from FlyoutBase)
XamlRoot

Gets or sets the XamlRoot in which this flyout is being viewed.

Equivalent WinUI property: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.XamlRoot.

(Inherited from FlyoutBase)

Methods

ClearValue(DependencyProperty)

Clears the local value of a dependency property.

Equivalent WinUI method: Microsoft.UI.Xaml.DependencyObject.ClearValue.

(Inherited from DependencyObject)
CreatePresenter()

When overridden in a derived class, initializes a control to show the flyout content as appropriate for the derived control. Note: This method has no base class implementation and must be overridden in a derived class.

Equivalent WinUI method: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.CreatePresenter.

(Inherited from FlyoutBase)
GetAnimationBaseValue(DependencyProperty)

Returns any base value established for a dependency property, which would apply in cases where an animation is not active.

Equivalent WinUI method: Microsoft.UI.Xaml.DependencyObject.GetAnimationBaseValue.

(Inherited from DependencyObject)
GetValue(DependencyProperty)

Returns the current effective value of a dependency property from a DependencyObject.

Equivalent WinUI method: Microsoft.UI.Xaml.DependencyObject.GetValue.

(Inherited from DependencyObject)
Hide()

Closes the flyout.

Equivalent WinUI method: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.Hide.

(Inherited from FlyoutBase)
OnProcessKeyboardAccelerators(ProcessKeyboardAcceleratorEventArgs)

Called just before a keyboard shortcut (accelerator) is processed in your app. Invoked whenever application code or internal processes call ProcessKeyboardAccelerators. Override this method to influence the default accelerator handling.

Equivalent WinUI method: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.OnProcessKeyboardAccelerators.

(Inherited from FlyoutBase)
ReadLocalValue(DependencyProperty)

Returns the local value of a dependency property, if a local value is set.

Equivalent WinUI method: Microsoft.UI.Xaml.DependencyObject.ReadLocalValue.

(Inherited from DependencyObject)
RegisterPropertyChangedCallback(DependencyProperty, DependencyPropertyChangedCallback)

Registers a notification function for listening to changes to a specific DependencyProperty on this DependencyObject instance.

Equivalent WinUI method: Microsoft.UI.Xaml.DependencyObject.RegisterPropertyChangedCallback.

(Inherited from DependencyObject)
SetValue(DependencyProperty, Object)

Sets the local value of a dependency property on a DependencyObject.

Equivalent WinUI method: Microsoft.UI.Xaml.DependencyObject.SetValue.

(Inherited from DependencyObject)
ShowAt(DependencyObject, FlyoutShowOptions)

Shows the flyout placed in relation to the specified element using the specified options.

Equivalent WinUI method: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.ShowAt.

(Inherited from FlyoutBase)
ShowAt(FrameworkElement)

Shows the flyout placed in relation to the specified element.

Equivalent WinUI method: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.ShowAt.

(Inherited from FlyoutBase)
ShowAt(UIElement, Point)

Shows the flyout placed at the specified offset in relation to the specified target element.

Equivalent WinUI method: Microsoft.UI.Xaml.Controls.MenuFlyout.ShowAt.

TryInvokeKeyboardAccelerator(ProcessKeyboardAcceleratorEventArgs)

Attempts to invoke a keyboard shortcut (accelerator).

Equivalent WinUI method: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.TryInvokeKeyboardAccelerator.

(Inherited from FlyoutBase)
UnregisterPropertyChangedCallback(DependencyProperty, Int64)

Cancels a change notification that was previously registered by calling RegisterPropertyChangedCallback.

Equivalent WinUI method: Microsoft.UI.Xaml.DependencyObject.UnregisterPropertyChangedCallback.

(Inherited from DependencyObject)

Events

Closed

Occurs when the flyout is hidden.

Equivalent WinUI event: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.Closed.

(Inherited from FlyoutBase)
Closing

Occurs when the flyout starts to be hidden.

Equivalent WinUI event: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.Closing.

(Inherited from FlyoutBase)
Opened

Occurs when the flyout is shown.

Equivalent WinUI event: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.Opened.

(Inherited from FlyoutBase)
Opening

Occurs before the flyout is shown.

Equivalent WinUI event: Microsoft.UI.Xaml.Controls.Primitives.FlyoutBase.Opening.

(Inherited from FlyoutBase)

Applies to

See also