Introduction

Flyout represents a control that displays lightweight UI that is either information or requires user interaction. Unlike a dialog, a Flyout can be lightly dismissed by clicking or tapping outside of it, pressing the device’s back button, or pressing the ‘Esc’ key. While a MenuFlyout represents a Flyout that displays a menu of commands.
Step 1
Open a blank app and copy the following XAML code into your grid which will add a Button with MenuFlyout to your plane.
  1. <TextBlock Text="Flyout Menu" FontSize="25"></TextBlock>
  2. <StackPanel>
  3. <StackPanel Margin="10,80,0,0" Orientation="Horizontal">
  4. <TextBlock Text="Flyout Menu" VerticalAlignment="Center" ></TextBlock>
  5. <Button Name="flyoutMenuButton" Content="FlyoutMenu" Margin="10,0,0,0">
  6. <Button.Flyout>
  7. <MenuFlyout Placement="Bottom">
  8. <MenuFlyoutItem Text="Item 1" Click="MenuFlyoutItem_Click"/>
  9. <MenuFlyoutItem Text="Item 2" Click="MenuFlyoutItem_Click"/>
  10. <MenuFlyoutItem Text="Item 3" Click="MenuFlyoutItem_Click"/>
  11. <MenuFlyoutSubItem Text="Item 4">
  12. <MenuFlyoutItem Text="Item 5" Click="MenuFlyoutItem_Click"/>
  13. </MenuFlyoutSubItem>
  14. <MenuFlyoutSubItem Text="Item 6">
  15. <MenuFlyoutItem Text="Item 7" Click="MenuFlyoutItem_Click"/>
  16. <MenuFlyoutItem Text="Item 8" Click="MenuFlyoutItem_Click"/>
  17. </MenuFlyoutSubItem>
  18. <MenuFlyoutItem Text="Item 9" Click="MenuFlyoutItem_Click"/>
  19. </MenuFlyout>
  20. </Button.Flyout>
  21. </Button>
  22. </StackPanel>
  23. <TextBlock Name="selectedItem" Foreground="Green" Margin="10,10,0,0"></TextBlock>
  24. </StackPanel>
Step 2
Copy and paste the following code to the MenuFlyoutItem_Click event on the cs page.
  1. MenuFlyoutItem selectedItemFlyout = sender as MenuFlyoutItem;
  2. selectedItem.Text = "Selected item is " + selectedItemFlyout.Text.ToString();
Step 3
Run your application and clicking on any the corresponding item content will be shown in our assigned Textblock.

Summary

In this article, we learned about MenuFlyout Control For Windows 10.