MenuFlyout
MenuFlyout
MenuFlyout
MenuFlyout
Class
Definition
Represents a flyout that displays a menu of commands.
public : class MenuFlyout : FlyoutBase
struct winrt::Windows::UI::Xaml::Controls::MenuFlyout : FlyoutBase
public class MenuFlyout : FlyoutBase
Public Class MenuFlyout Inherits FlyoutBase
<MenuFlyout>
oneOrMoreItems
</MenuFlyout>
- Inheritance
- Attributes
Windows 10 requirements
Device family |
Windows 10 (introduced v10.0.10240.0)
|
API contract |
Windows.Foundation.UniversalApiContract (introduced v1)
|
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.

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:
- 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.
Version history
Windows version | SDK version | Value added |
---|---|---|
1809 | 17763 | ShowAt |
Constructors
MenuFlyout() MenuFlyout() MenuFlyout() MenuFlyout() |
Initializes a new instance of the MenuFlyout class. |
Properties
Methods
Events
Closed Closed Closed Closed |
Occurs when the flyout is hidden. (Inherited from FlyoutBase) |
Closing Closing Closing Closing |
Occurs when the flyout starts to be hidden. (Inherited from FlyoutBase) |
Opened Opened Opened Opened |
Occurs when the flyout is shown. (Inherited from FlyoutBase) |
Opening Opening Opening Opening |
Occurs before the flyout is shown. (Inherited from FlyoutBase) |
See also
Feedback
Loading feedback...