MenuFlyout Control For Windows 10

Flyout represents a control that displays lightweight UI that is either information, or requires user interaction. Unlike a dialog, a Flyout can be light 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 in in the cs page.  
  1. MenuFlyoutItem selectedItemFlyout = sender as MenuFlyoutItem;  
  2. selectedItem.Text = "Selected item is " + selectedItemFlyout.Text.ToString();  

Step 3: Run your application and by clicking on any the corresponding item content will be shown in our assigned Textblock.