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.
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 the Ok button.
  1. myFlyout.Hide();
Step 3
Run your application and click on the button which will pop up a flyout and clicking Ok or clicking anywhere else will also hide it.

Summary

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