lundi 25 juin 2018

UWP/XAML using PopupThemeTransition / PopOutThemeAnimation / PopInThemeAnimation to animate elements coming in and out of your app

In UWP we have this great control called Popup this control can allow you to quickly and cleanly have element pop in and pop out of your view. Also we will look at how to do more of less the same thing with only a Grid.

In this post I wont go into details about the popup control itselft however if you are interested in getting more information msdn is the best place to look.

First we are going to create our simple popup element, make sure that you set the IsOpen property to false (this will hide your popup),  IsLightDismissEnabled to true will mean that if the user clicks outside of the popup it will disappear.

Here is what the XAML can look like:

        <Popup
            x:Name="PopupFromBottom"
            Grid.Row="0"
            Width="459"
            Height="90"
            Margin="20,0,20,20"
            VerticalAlignment="Bottom"
            IsLightDismissEnabled="True"
            IsOpen="False"/>

To add transition to when the popup will be shown we will add ChildTransitions:

 <Popup.ChildTransitions>
      <TransitionCollection>
           <PopupThemeTransition FromVerticalOffset="100" />
      </TransitionCollection>
 </Popup.ChildTransitions>

This will add an animation, the popup will come from the bottom with a translation of 100px. If you have wanted a Horizontal translation then you could have used FromHorizontalOffset.

For this popup to be displayed all you need is to set the IsOpen to true :

 PopupFromBottom.IsOpen = true;

Now if we wanted the popup to hide it self after 3 seconds all we would need to add is a wait of 3 seconds and again change the IsOpen to false as follows:

 //show
PopupFromBottom.IsOpen = true;

//wait 3 sec
await Task.Delay(TimeSpan.FromSeconds(3));

//close 
PopupFromBottom.IsOpen = false;

In the previous example we used the default popup control which allowed us to use the lightdismiss and directly attach the PopupThemeTransition animations to the popup.  However we always have custome cases where we need custome code and sometimes the default controls just wont cut it.  NOw we are going to see how to use a Grid as a popup.

first we are going to create our Grid as follows:

<Grid
            x:Name="GridPopup"
            Grid.Row="0"
            Width="459"
            Height="90"
            Margin="20,0,20,20"
            VerticalAlignment="Bottom"
            Background="LightGray"
            Opacity="0" />

Next we are going to add storyboards and use PopInThemeAnimation and PopOutThemeAnimation
to pop in and pop out our grid.  Here is the Storyboard XAML code:

 <Storyboard x:Name="PopOutStoryboard">
            <PopOutThemeAnimation SpeedRatio="2" TargetName="GridPopup" />
 </Storyboard>
 <Storyboard x:Name="PopInStoryboard">
            <PopInThemeAnimation
                FromVerticalOffset="150"
                SpeedRatio="0.3"
                TargetName="GridPopup" />
            <DoubleAnimation
                d:IsOptimized="True"
                Storyboard.TargetName="GridPopup"
                Storyboard.TargetProperty="Opacity"
                To="1"
                Duration="0" />
 </Storyboard>

and now to easily call this code all we need to do:

        private void OpenStoryboard_Click(object sender, RoutedEventArgs e)
        {
            PopInStoryboard.Begin();
        }

        private void CloseStoryboard_Click(object sender, RoutedEventArgs e)
        {
            PopOutStoryboard.Begin();
        }

And there you are! You can find the full code here.