Show Popup Control as Flyout in Windows Store Apps Using XAML

In this article we going to learn how to open a PopUp Control in a Flyout manner in Windows Store Apps using XAML.

Flyouts are great at showing a UI that you don't want on the screen all the time. The user can close a Flyout at any time by simply tapping or clicking outside of it, or by pressing ESC. If users are in control of bringing up a new UI, they must also be in control of dismissing it. When the user makes a selection in the Flyout, the Flyout should be dismissed. To learn more please follow this link:

Here I will show you an example of using a PopUp control and open it as a Flyout control on the screen in Windows Store Apps.

Followed these Steps.

Step 1

Create a Blank application of Windows Store using XAML.

Step 2

In the MainPage.XAML page write following coding.










    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">


            <StackPanel HorizontalAlignment="Center" Margin="0,50,0,0">

                <Button Content="Show Popup Flyout" Click="ShowFlyoutPopup" />


            <Popup x:Name="logincontrol1" IsOpen="False" IsLightDismissEnabled="True">



                        <PaneThemeTransition />



                <Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" BorderThickness="2" Background="{StaticResource ApplicationPageBackgroundThemeBrush}" x:Name="RootPopupBorder">

                    <StackPanel Orientation="Vertical" Background="Pink" Height="400"  x:Name="pop" >


                            <TextBlock Text="Sign In With an Account"  HorizontalAlignment="Center" Foreground="White" FontSize="25" Margin="0,20,0,0" />


                        <StackPanel Orientation="Horizontal" Margin="0,50" HorizontalAlignment="Center">

                            <TextBlock Text="Email Id" Margin="10" Foreground="White" FontSize="25" />

                            <TextBox x:Name="id" IsSpellCheckEnabled="True" Height="40" Margin="13,1" Width="408" InputScope="EmailSmtpAddress" >



                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">

                            <TextBlock Text="Password" Foreground="White"  FontSize="25" />

                            <PasswordBox  x:Name="pwd"  IsPasswordRevealButtonEnabled="True" Height="40" Margin="5,1"  Width="408"/>


                        <StackPanel Orientation="Horizontal" Margin="0,30" HorizontalAlignment="Center">

                            <Button x:Name="loginclick"  Foreground="White"   Width="100" Content="Login"/>

                            <Button x:Name="cancel"    Foreground="White"  Width="100" Content="Cancel" />


                        <StackPanel HorizontalAlignment="Center">

                            <TextBlock Text=" Sign Up with a new Account" FontSize="25"/>








In the above coding we take a button to show the Popup control.

To use the animate like Flyout in the Popup control here I use trasition property of Popup control.



         <PaneThemeTransition />



I also use the IsLightDismissEnabled property of the PopUp control. Setting this property gives you the light dismissing behavior of when a user gestures away from your Popup content (either by tapping or clicking on another UI) and your Popup will automatically close.


Step 3

Here is the code of MainPage.cs file in which I open the PopUp control in the button click event:

private void ShowFlyoutPopup(object sender, RoutedEventArgs e)


    if (!logincontrol1.IsOpen)


        RootPopupBorder.Width = 646;                                                         
        logincontrol1.HorizontalOffset =
Window.Current.Bounds.Width - 550;

        logincontrol1.VerticalOffset = Window.Current.Bounds.Height - 1000;

        logincontrol1.IsOpen = true;



The above code will have to perform these measurements depending on the structure of the apps.

Note: The UI guidelines for a proper "Settings" Flyout are such that it should fill the height of the current Window and be either narrow (346px) or wide (646px).

Step 4

Now, build your app and Run it.


Click on the button. You will see that the Popup is opened as a Flyout from the right side of the windows screen with animated properties.


Similar Articles