Show Popup Control as Flyout in Windows Store Apps Using XAML

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