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:

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.



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.