UWP Development, Transition

UWP (Universal Windows Platform) is a platform for developing applications that run on Windows 10 and later.
One of the powerful features of UWP is the ‘Transition’ effects that create smooth visual elements and user interactions.
Transition effects make screen transitions, state changes of elements, and user feedback more intuitive and enjoyable within the app.
In this course, we will explore the concept of transition effects in UWP, the types of various transition effects, and how to implement them in practice.

Importance of Transition Effects

Transition effects play a crucial role in enhancing user experience (UX). They visually convey information to users and
help them understand what changes are taking place within the app. For example, using animations during screen transitions enables
users to easily track which elements moved from where to where.
This is an essential method for implementing a user-friendly interface.

Basic Transition Effects in UWP

UWP allows the use of various transition effects. Here are a few representative transition effects:

  • FadeInTransition: An effect where an element gradually appears
  • FadeOutTransition: An effect where an element gradually disappears
  • SlideInTransition: An effect where an element slides in from a specific direction
  • SlideOutTransition: An effect where an element slides out to a specific direction
  • ScaleTransform: An effect that adjusts the size of an element

How to Apply Transition Effects in UWP

Now, let’s take a step-by-step look at how to apply transition effects in UWP.
Create a new UWP project using Visual Studio and follow the example code below.

1. Create a Project

Create a new UWP app project in Visual Studio. Set the project name to “TransitionDemo”.

2. Set up the XAML File

Open the MainPage.xaml file and add basic UI elements. Place the elements you want to apply transition effects to inside a Grid. 

<Page
    x:Class="TransitionDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TransitionDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid x:Name="LayoutRoot">
        <Button x:Name="FadeButton" Content="Fade In" Click="FadeButton_Click"></Button>
        <Rectangle x:Name="MyRectangle" Width="200" Height="200" Fill="Blue" Opacity="0" 
                    VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </Grid>
</Page>

3. Write Transition Effect Code

Open the MainPage.xaml.cs file and add a Click event handler for the FadeButton.
This handler implements the effect of the blue rectangle gradually appearing by applying the transition effect. 

using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media.Animation;

namespace TransitionDemo
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void FadeButton_Click(object sender, RoutedEventArgs e)
        {
            DoubleAnimation fadeInAnimation = new DoubleAnimation();
            fadeInAnimation.From = 0; // Initial opacity
            fadeInAnimation.To = 1;   // Final opacity
            fadeInAnimation.Duration = new Duration(TimeSpan.FromSeconds(2)); // Animation duration

            Storyboard storyboard = new Storyboard();
            storyboard.Children.Add(fadeInAnimation);
            Storyboard.SetTarget(fadeInAnimation, MyRectangle); // Set animation target
            Storyboard.SetTargetProperty(fadeInAnimation, "Opacity"); // Set animation property

            storyboard.Begin(); // Start the animation
        }
    }
}

4. Run the App

Now, run the app and click the “Fade In” button to see the rectangle gradually appearing.
This is how we learned to apply transition effects in UWP. Additionally, let’s implement some other transition effects briefly.

Implementing Various Transition Effects

Now let’s add SlideInTransition and SlideOutTransition to implement more diverse transition effects. 

<Button x:Name="SlideButton" Content="Slide In" Click="SlideButton_Click"></Button>
<Button x:Name="SlideOutButton" Content="Slide Out" Click="SlideOutButton_Click"></Button>

5. SlideIn Transition

private void SlideButton_Click(object sender, RoutedEventArgs e)
{
    MyRectangle.RenderTransform = new TranslateTransform { X = -200 }; // Set initial position
    DoubleAnimation slideInAnimation = new DoubleAnimation();
    slideInAnimation.From = -200; // Slide starting position
    slideInAnimation.To = 0; // Final position
    slideInAnimation.Duration = new Duration(TimeSpan.FromSeconds(2));

    Storyboard slideInStoryboard = new Storyboard();
    slideInStoryboard.Children.Add(slideInAnimation);
    Storyboard.SetTarget(slideInAnimation, MyRectangle);
    Storyboard.SetTargetProperty(slideInAnimation, "RenderTransform.(TranslateTransform.X)");

    MyRectangle.Opacity = 1; // Set to visible
    slideInStoryboard.Begin();
}

6. SlideOut Transition

private void SlideOutButton_Click(object sender, RoutedEventArgs e)
{
    DoubleAnimation slideOutAnimation = new DoubleAnimation();
    slideOutAnimation.From = 0; // Slide starting position
    slideOutAnimation.To = -200; // Final position
    slideOutAnimation.Duration = new Duration(TimeSpan.FromSeconds(2));

    Storyboard slideOutStoryboard = new Storyboard();
    slideOutStoryboard.Children.Add(slideOutAnimation);
    Storyboard.SetTarget(slideOutAnimation, MyRectangle);
    Storyboard.SetTargetProperty(slideOutAnimation, "RenderTransform.(TranslateTransform.X)");

    slideOutStoryboard.Completed += (s, a) => { MyRectangle.Opacity = 0; }; // Set to invisible after animation completes
    slideOutStoryboard.Begin();
}

Advanced Transition Effects

In addition to basic transition effects, UWP supports a variety of advanced transition effects.
For example, it allows you to manage complex state transitions using the VisualStateManager.
VisualStateManager enables you to define multiple visual states based on the app’s state and manage the transitions between these states.

State Transitions Using VisualStateManager

The following example implements the functionality to transition to a different state when the button is clicked, using the VisualStateManager. 

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="Normal"/>
        <VisualState x:Name="PointerOver">
            <Storyboard>
                <DoubleAnimation Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Opacity" To="1" Duration="0.2"/>
            </Storyboard>
        </VisualState>
        <VisualState x:Name="Pressed">
            <Storyboard>
                <DoubleAnimation Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Opacity" To="0" Duration="0.2"/>
            </Storyboard>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

The above code is an example that changes the opacity of the rectangle depending on the button’s state.
The transitions for the states Normal, PointerOver, and Pressed are defined through the VisualStateManager.

Conclusion

Transition effects in UWP are an important element in improving user experience.
By providing smooth visual transitions within the application, users can naturally perceive various state changes and interactions.
Based on what we learned in this course about applying transition effects in UWP, from basic to advanced concepts,
you will be equipped to develop more innovative applications.

Thank you! If you have any questions about UWP development and transition effects, please leave a comment.
I wish you much success in your future development journey.