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.

Step 1: Open a blank app and add Button and Flyout Control with a Textblock and button to it either from the toolbox or by copying the following XAML code into your grid.

  1. <TextBlock Text="Flyout Control" FontSize="20"></TextBlock>  
  2. <StackPanel>  
  3.     <StackPanel Margin="20,30,0,0" Orientation="Horizontal">  
  4.         <TextBlock Text="Simple Flyout" VerticalAlignment="Center"></TextBlock <Button Name="myFlyoutButton" Content="Flyout" Margin="15,0,0,0">  
  5.         <Button.Flyout>  
  6.             <Flyout x:Name="myFlyout">  
  7.                 <StackPanel>  
  8.                     <TextBlock Text="This is a sample flyout"></TextBlock>  
  9.                     <Button Name="innerflyoutButton" HorizontalAlignment="Right" Click="innerFlyoutButton_Click">Ok</Button>  
  10.                 </StackPanel>  
  11.             </Flyout>  
  12.         </Button.Flyout>  
  13.         </Button>  
  14.     </StackPanel>  
  15. </StackPanel>  

 

 

Step 2: Copy and paste the following code to the innerFlyoutButton_Click event in the cs page to hide the Flyout by clicking Ok button.
  1. myFlyout.Hide();  

Step 3: Run your application and click on the button which will pop up a flyout and by clicking Ok or clicking anywhere else will also hide it. 

 

Next Recommended Readings