Post
Ask Question

MenuFlyout Control For Windows 10

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.  


Similar Articles