Animation: Tạo Anomation Hiệu ứng bảng với giao diện Login trên Windows Store Apps (C #)

BlankPage5.xaml

Windows Store 2017

<Page
    x:Class="Theory1.BlankPage5"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Theory1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Transitions>
        <TransitionCollection>
            <EdgeUIThemeTransition Edge="Bottom"></EdgeUIThemeTransition>
        </TransitionCollection>
    </Page.Transitions>
    <Grid Background="BlueViolet">
        <StackPanel HorizontalAlignment="Center" Margin="50">
            <Button Name="btnShowPopup" Click="btnShowPopup_Click" Content="Show Popup Flyout"></Button>
            <Button Name="btnBack" Click="btnBack_Click" Content="Back"></Button>
        </StackPanel>
        <Popup x:Name="ppLogin" IsOpen="False">
            <Popup.ChildTransitions>
                <TransitionCollection>
                    <!--<PopupThemeTransition></PopupThemeTransition>-->
                    <PaneThemeTransition></PaneThemeTransition>
                </TransitionCollection>
            </Popup.ChildTransitions>
            <Border x:Name="RootPopupBorder" BorderBrush="Blue" BorderThickness="3" Background="Pink">
                <StackPanel Background="Pink" Height="400" Orientation="Vertical">
                    <StackPanel>
                        <TextBlock HorizontalAlignment="Center" FontSize="25" Foreground="White" Text="Signin with an Account"></TextBlock>
                    </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>
            </Border>
        </Popup>
    </Grid>
</Page>

BlankPage5.xaml.cs

Windows Store 2017

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace Theory1
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class BlankPage5 : Page
    {
        public BlankPage5()
        {
            this.InitializeComponent();
        }

        private void btnShowPopup_Click(object sender, RoutedEventArgs e)
        {
            if (!ppLogin.IsOpen)
            {
                RootPopupBorder.Width = 646;
                ppLogin.HorizontalOffset = 100;
                ppLogin.VerticalOffset = 100;
                ppLogin.IsOpen = true;
            }
            else
                ppLogin.IsOpen = false;
        }

        private void btnBack_Click(object sender, RoutedEventArgs e)
        {
            //TODO
        }
    }
}

RUN DEMO