Skip to main content

MenuFlyout

A MenuFlyout allows you to host a simple menu as the flyout for a control. You might use this as an alternative to the ContextMenu.

The properties of a menu flyout are the same as for a Flyout.

Example​

This is a simple example of the menu flyout:

<Button xmlns="https://github.com/avaloniaui"
        Content="Button"
        HorizontalAlignment="Center">
  <Button.Flyout>
    <MenuFlyout>
      <MenuItem Header="Open"/>
      <MenuItem Header="-"/>
      <MenuItem Header="Close"/>        
    </MenuFlyout>
  </Button.Flyout>
</Button>
Preview
Loading Avalonia Preview...
info

Note the <Separator/> element will not work in a menu flyout. To make a separator line, use a <MenuItem> element with the header set to '-' as shown above.

With Commands and Icons​

<Button Content="Actions">
    <Button.Flyout>
        <MenuFlyout>
            <MenuItem Header="Open" Command="{Binding OpenCommand}">
                <MenuItem.Icon>
                    <PathIcon Data="{StaticResource open_regular}" />
                </MenuItem.Icon>
            </MenuItem>
            <MenuItem Header="-" />
            <MenuItem Header="Delete" Command="{Binding DeleteCommand}"
                      CommandParameter="{Binding SelectedItem}" />
        </MenuFlyout>
    </Button.Flyout>
</Button>

Dynamic MenuFlyout​

This is an example for a MenuFlyout that is created dynamically during runtime based on a collection MyMenuItems with items of type MyMenuItemViewModel.

<Button Content="Button">
  <Button.Flyout>
    <MenuFlyout ItemsSource="{Binding MyMenuItems}">
      <MenuFlyout.ItemContainerTheme>
        <ControlTheme TargetType="MenuItem" BasedOn="{StaticResource {x:Type MenuItem}}" 
          x:DataType="l:MyMenuItemViewModel">

          <Setter Property="Header" Value="{Binding Header}"/>
          <Setter Property="ItemsSource" Value="{Binding Items}"/>
          <Setter Property="Command" Value="{Binding Command}"/>
          <Setter Property="CommandParameter" Value="{Binding CommandParameter}"/>
          
        </ControlTheme>
      </MenuFlyout.ItemContainerTheme>
    </MenuFlyout>
  </Button.Flyout>
</Button>

Placement​

You can control where the flyout appears relative to its target control by setting the Placement property. This property accepts a FlyoutPlacementMode value, which includes options such as Top, Bottom, Left, Right, TopEdgeAlignedLeft, TopEdgeAlignedRight, BottomEdgeAlignedLeft, BottomEdgeAlignedRight, and others.

<Button Content="Options">
    <Button.Flyout>
        <MenuFlyout Placement="BottomEdgeAlignedLeft">
            <MenuItem Header="Settings"/>
            <MenuItem Header="About"/>
        </MenuFlyout>
    </Button.Flyout>
</Button>

If you do not set Placement, the flyout uses a default position determined by the control it is attached to.

See also​

On this page