Show Popup Control as Flyout in Windows Store Apps Using XAML

In this article we are going to learn how to display an animated Popup control like Flyout in Windows Store Apps.

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:

http://msdn.microsoft.com/en-us/library/windows/apps/hh465341.aspx

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.

<Page

    x:Class="popupcontrol.BlankPage1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:popupcontrol"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

 

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <Grid>

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

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

            </StackPanel>

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

                <Popup.ChildTransitions>

                    <TransitionCollection>

                        <PaneThemeTransition />

                    </TransitionCollection>

                </Popup.ChildTransitions>

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

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

                        <StackPanel>

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

                        </StackPanel>

                        <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" >

                            </TextBox>

                        </StackPanel>

                        <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>

                        <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>

                        <StackPanel HorizontalAlignment="Center">

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

                        </StackPanel>

                    </StackPanel>

                </Border>

            </Popup>

        </Grid>

    </Grid>

</Page>

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.

<Popup.ChildTransitions>

     <TransitionCollection>

         <PaneThemeTransition />

     </TransitionCollection>

</Popup.ChildTransitions>

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.

IsLightDismissEnabled="True"

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.

Create-PopUp-Flyout-In-Windows-Store-Apps.jpg

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.

Flyout-Animate-PopUp-Control-In-Windows-Store-Apps.jpg