VisualTransition VisualTransition VisualTransition Class

Definition

Represents the visual behavior that occurs when the control transitions from one visual state to another.

public : class VisualTransition : DependencyObject, IVisualTransition
public class VisualTransition : DependencyObject, IVisualTransition
Public Class VisualTransition Inherits DependencyObject Implements IVisualTransition
<VisualStateGroup>
  <!--one or more Visual State elements in the implicit States collection property -->
  <VisualStateGroup.Transitions>
    <VisualTransition>
      singleStoryboard
    </VisualTransition>
    <!--more transitions as above-->
  </VisualStateGroup.Transitions>
</VisualStateGroup>
Inheritance
VisualTransitionVisualTransitionVisualTransition
Attributes
Windows 10 requirements
Device family
Windows 10 (introduced v10.0.10240.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v1)

Examples

This example creates a VisualTransition that specifies that when the user moves the mouse away from the control, the control's border changes to blue, then to yellow, then to black in 1.5 seconds.

<!--Take one and a half seconds to transition from the
    PointerOver state to the Normal state. 
    Have the SolidColorBrush, BorderBrush, fade to blue, 
    then to yellow, and then to black in that time.-->
<VisualTransition From="PointerOver" To="Normal" 
                      GeneratedDuration="0:0:1.5">
  <Storyboard>
    <ColorAnimationUsingKeyFrames
      Storyboard.TargetProperty="Color"
      Storyboard.TargetName="BorderBrush"
      FillBehavior="HoldEnd" >

      <ColorAnimationUsingKeyFrames.KeyFrames>

        <LinearColorKeyFrame Value="Blue" 
                             KeyTime="0:0:0.5" />
        <LinearColorKeyFrame Value="Yellow" 
                             KeyTime="0:0:1" />
        <LinearColorKeyFrame Value="Black" 
                             KeyTime="0:0:1.5" />

      </ColorAnimationUsingKeyFrames.KeyFrames>
    </ColorAnimationUsingKeyFrames>
  </Storyboard>
</VisualTransition>
<VisualStateGroup x:Name="CommonStates">

  <!--Define the VisualTransitions that can be used when the control
      transitions between VisualStates that are defined in the
      VisualStatGroup.-->
  <VisualStateGroup.Transitions>

    <!--Take one hundredth of a second to transition to the
        Pressed state.-->
    <VisualTransition To="Pressed" 
                          GeneratedDuration="0:0:0.01" />
    
    <!--Take one half second to transition to the PointerOver state.-->
    <VisualTransition To="PointerOver" 
                          GeneratedDuration="0:0:0.5" />

    <!--Take one hundredth of a second to transition from the
        Pressed state to the PointerOver state.-->
    <VisualTransition From="Pressed" To="PointerOver" 
                          GeneratedDuration="0:0:0.01" />

    <!--Take one and a half seconds to transition from the
        PointerOver state to the Normal state. 
        Have the SolidColorBrush, BorderBrush, fade to blue, 
        then to yellow, and then to black in that time.-->
    <VisualTransition From="PointerOver" To="Normal" 
                          GeneratedDuration="0:0:1.5">
      <Storyboard>
        <ColorAnimationUsingKeyFrames
          Storyboard.TargetProperty="Color"
          Storyboard.TargetName="BorderBrush"
          FillBehavior="HoldEnd" >

          <ColorAnimationUsingKeyFrames.KeyFrames>

            <LinearColorKeyFrame Value="Blue" 
                               KeyTime="0:0:0.5" />
            <LinearColorKeyFrame Value="Yellow" 
                               KeyTime="0:0:1" />
            <LinearColorKeyFrame Value="Black" 
                               KeyTime="0:0:1.5" />

          </ColorAnimationUsingKeyFrames.KeyFrames>
        </ColorAnimationUsingKeyFrames>
      </Storyboard>
    </VisualTransition>
  </VisualStateGroup.Transitions>

  <!--The remainder of the VisualStateGroup is the
      same as the previous example.-->

  <VisualState x:Name="Normal" />

  <VisualState x:Name="PointerOver">
    <Storyboard>
      <ColorAnimation Storyboard.TargetName="BorderBrush" 
                    Storyboard.TargetProperty="Color" To="Red" />

    </Storyboard>
  </VisualState>

  <VisualState x:Name="Pressed">
    <Storyboard >
      <ColorAnimation Storyboard.TargetName="BorderBrush" 
                    Storyboard.TargetProperty="Color" To="Transparent"/>
    </Storyboard>
  </VisualState>

  <!--The Disabled state is omitted for brevity.-->

</VisualStateGroup>

Remarks

A VisualTransition is a behavior that initiates a Storyboard. This Storyboard is a timeline that declares the duration that animations that transition between two visual states will run. The transition can be defined differently for each combination of starting state (the From state) and ending state (the To state) as defined by your control's set of visual states. Transitions are defined by the Transitions property of VisualStateGroup and are usually defined in XAML. Most default control templates don't define transitions, and in this case the transitions between states happen instantaneously. The old state's modifications to the template are removed, and the new state's modifications are applied.

A VisualTransition references either one or two named visual states. The From value references the name of a state that is the current state. The To value references the name of a state that is the new state requested by a GoToState call. These names come from an x:Name attribute string value that is applied to a VisualState as part of its definition in the same VisualStateGroup. Either From or To are a required value for an effective VisualTransition, a VisualTransition that lacks either of these values or uses values that don't match existing states does nothing.

A VisualTransition can reference just a From state, just a To state, or both a From and To state. Omitting either From or To equates to any state. The VisualStateManager uses a precedence logic for which transition to apply whenever visual states change:

  1. If a VisualTransition exists that specifically references the old state as From and the new state as To, use that transition.
  2. Otherwise, if a VisualTransition exists that specifically references the new state as To but does not specify From, use that transition.
  3. Finally, if a VisualTransition exists that specifically references the old state as From but does not specify To, use that transition. If none of the above apply, no transition runs.

When you call GoToState to change the visual state of a control, the VisualStateManager performs these actions:

  • If the VisualState that the control was using prior to the newly requested visual state has a Storyboard, that storyboard stops.
  • Between these actions, the Storyboard for a VisualTransition runs, if a transition that involves the two visual states exists, and the named visual state requested by GoToState is valid and is a new state.
  • If the VisualState as named by stateName has a Storyboard, the storyboard begins.

A VisualTransition can have a Storyboard value, a GeneratedDuration value or both. But if a VisualTransition has neither a Storyboard value nor a GeneratedDuration value, that VisualTransition does nothing in terms of animations, even if states named by the From and To values are involved in a state change.

Implicit transitions

You can define a VisualTransition such that it has a GeneratedDuration, but does not have any specific dependency properties being targeted and animated. This creates an implicit transition. Any dependency property that is specifically targeted for animation in either the From or@Windows.UI.Xaml.VisualTransition.To?text=To visual states and thus has different values across the state change then uses a generated transition animation. This generated animation transitions between the From state value and the To state value of such a property using interpolation. The implicit transition animation lasts for the time stated by GeneratedDuration.

Implicit transitions only apply to properties that are a Double, Color or Point value. In other words the property must be possible to implicitly animate using a DoubleAnimation, PointAnimation or ColorAnimation. If you want to create a transition animation on some other value, for example a value that requires ObjectAnimationUsingKeyFrames, put that animation in the Storyboard and give the animation a Duration that you want it to run.

By default, an implicit transition animation uses linear interpolation to animate a value through the GeneratedDuration. You can change the linear interpolation to an interpolation behavior of your choice by setting GeneratedEasingFunction as well as GeneratedDuration on a VisualTransition.

Transition animations

There is another design pattern and API for displaying visual transitions for a UWP app using C++, C#, or Visual Basic. This concept is called transition animations and the class that implements the behavior is a theme transition or a theme animation. Rather than declaring transitions between visual states of the same control and applying changes to properties of control parts like you do with visual states, a transition animation represents changes in the relationship between a complete UI element and the overall app and UI. For example, there's a RepositionThemeTransition that can be applied whenever a UI element is moved in the UI coordinate space of its layout container. Many of the transition animations are initiated by a user action. A transition animation applies to various Transition properties of UIElement and specific derived classes, not to a VisualStateGroup. Transition animations and theme animations are often built-in to the default behavior of a control. For more info, see Storyboarded animations for visual states.

Windows 8 behavior

For Windows 8, XAML theme transitions and various other automatic animated behaviors in the animation library didn't honor a particular Microsoft Windows Ease of Access setting that enables users to turn off "unnecessary animations".

Starting with Windows 8.1, theme transitions, theme animations, and visual transitions all honor the Turn off all unnecessary animations (when possible) setting in Ease of Access. The animations won't run and the control state changes or visual changes are instantaneous.

If you migrate your app code from Windows 8 to Windows 8.1, you might want to test your animation behaviors with Turn off all unnecessary animations (when possible) setting enabled. Because some of these animations are controlled by storyboards, and because you sometimes chain up custom animations to start after visual transitions or theme animations are complete, the Turn off all unnecessary animations (when possible) setting might affect the timings of your animations. Also, if you've implemented something as a VisualTransition in a visual state rather than as a storyboarded animation, you might want to switch it to be a true custom animation, so that the Turn off all unnecessary animations (when possible) setting won't disable it.

Apps that were compiled for Windows 8 but running on Windows 8.1 continue to use the Windows 8 behavior for theme animations and visual transitions. However, theme transitions are disabled by the setting on Windows 8.1, even if an app is not recompiled.

Constructors

VisualTransition() VisualTransition() VisualTransition()

Initializes a new instance of the VisualTransition class.

public : VisualTransition()
public VisualTransition()
Public Sub New()

Properties

Dispatcher Dispatcher Dispatcher

Inherited from DependencyObject

From From From

Gets or sets the name of the VisualState to transition from.

public : Platform::String From { get; set; }
public string From { get; set; }
Public ReadWrite Property From As string
<object From="stateName"/>
Value
Platform::String string string

The name of the VisualState to transition from.

GeneratedDuration GeneratedDuration GeneratedDuration

Gets or sets the amount of time it takes to move from one state to another, and the time that any implicit transition animations should run as part of the transition behavior.

public : Duration GeneratedDuration { get; set; }
public Duration GeneratedDuration { get; set; }
Public ReadWrite Property GeneratedDuration As Duration
<object GeneratedDuration="duration"/>
Value
Duration Duration Duration

The amount of time it takes to move from one state to another.

Examples

This example specifies that the control takes one half second to go into the "PointerOver" state.

<!--Take one half second to transition to the PointerOver state.-->
<VisualTransition To="PointerOver" 
                      GeneratedDuration="0:0:0.5" />

Remarks

GeneratedDuration is mainly for controlling implicit transitions. If you want your transition animations to be limited only to the specific animations in your Storyboard, you don't to set a value for GeneratedDuration. Instead, set specific Duration values on the animations in the Storyboard or the main Storyboard element within it. If you do set a GeneratedDuration value, it won't truncate or change any Storyboard with a Duration value; the total length of the transition is the longest Duration value that you've set in the animations for Storyboard, or the GeneratedDuration, whichever is longer.

Implicit transitions

You can define a VisualTransition such that it has a GeneratedDuration, but does not have any specific dependency properties being targeted and animated in its Storyboard value. This creates an implicit transition. Any dependency property that is specifically targeted for animation in either the From or@Windows.UI.Xaml.VisualTransition.To?text=To visual states and thus has different values across the state change will use a generated transition animation. This generated animation transitions between the From state value and the To state value using interpolation, and lasts for the time stated by GeneratedDuration. This only works if there can be a DoubleAnimation, PointAnimation or ColorAnimation on a dependency property, for more info, see Remarks in VisualTransition.

By default, an implicit transition animation uses linear interpolation to animate a value through the GeneratedDuration. You can change the linear interpolation to an interpolation behavior of your choice by setting GeneratedEasingFunction as well as GeneratedDuration on a VisualTransition.

See Also

GeneratedEasingFunction GeneratedEasingFunction GeneratedEasingFunction

Gets or sets the easing function applied to the generated animations.

public : EasingFunctionBase GeneratedEasingFunction { get; set; }
public EasingFunctionBase GeneratedEasingFunction { get; set; }
Public ReadWrite Property GeneratedEasingFunction As EasingFunctionBase
Value
EasingFunctionBase EasingFunctionBase EasingFunctionBase

An easing function implementation that is applied to the generated animations.

Examples

This XAML example shows the markup for applying a QuadraticEase easing function to the interpolation of implicit transition animations during the transition. Setting the EasingMode is important if you don't want the default easing mode for all easing functions, which is EasingMode.EaseIn.


<!--template root-->
<VisualStateManager.VisualStateGroups>
  <VisualStateGroup x:Name="States">
    <VisualState x:Name="FirstState">
       <!--state logic omitted-->
    </VisualState>
    <VisualState x:Name="SecondState">
       <!--state logic omitted-->
    </VisualState>
    <VisualStateGroup.Transitions>
      <VisualTransition To="SecondState" GeneratedDuration="0:0:10">
        <VisualTransition.GeneratedEasingFunction>
          <QuadraticEase EasingMode="EaseOut"/>
        </VisualTransition.GeneratedEasingFunction>
      </VisualTransition>
    </VisualStateGroup.Transitions>
  </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Remarks

A VisualTransition typically uses a linear interpolation to control the implicit transition animations that happen over the GeneratedDuration. Setting a value for GeneratedEasingFunction changes this linear behavior and instead applies the timing logic of a particular EasingFunctionBase derived class to the interpolation. For example, if you wanted an interpolation rate to start off slowly and reach the To value rapidly at the end of the transition's duration, you might set GeneratedEasingFunction using a PowerEase with EasingMode.EaseIn.

See Also

Storyboard Storyboard Storyboard

Gets or sets the Storyboard that runs when the transition occurs.

public : Storyboard Storyboard { get; set; }
public Storyboard Storyboard { get; set; }
Public ReadWrite Property Storyboard As Storyboard
<VisualTransition>
  singleStoryboard
</VisualTransition>
Value
Storyboard Storyboard Storyboard

The Storyboard that occurs when the transition occurs.

Remarks

The value of the Storyboard property is either null or a single Storyboard object. A Storyboard is like a container for animations, it can contain one or more animation definitions. Each such animation can target a specific dependency property on a specific named target. The named target must be an element in the control template that has a Name or x:Name attribute value defined in the template itself. The dependency property must be a property that exists in that object's object model, or must be an attached property. To target animations, you use the Storyboard.TargetName and Storyboard.TargetProperty attached properties. For more info on how to define animations with XAML syntax, and the types of animations you can use, see Storyboarded animations.

The properties you target using animations in VisualTransition.Storyboard are not limited to@Windows.Foundation.Point?text=Point, Color, or Double. You can use ObjectAnimationUsingKeyFrames and DiscreteObjectKeyFrame.

If you have a value for Storyboard, you can choose to omit a value for GeneratedDuration. Instead, set specific Duration values on the animations in the Storyboard or the main Storyboard element within it. If you do set a GeneratedDuration value, it won't truncate or change any Storyboard with a Duration value; the total length of the transition is the longest Duration value that you've set in the animations for Storyboard, or the GeneratedDuration, whichever is longer.

Implicit transitions

You can define a VisualTransition such that it has a GeneratedDuration, but does not have a Storyboard value. This creates an implicit transition that can interpolate values that are different between two states. For more info, see GeneratedDuration.

See Also

To To To

Gets or sets the name of the VisualState to transition to.

public : Platform::String To { get; set; }
public string To { get; set; }
Public ReadWrite Property To As string
<object To="stateName"/>
Value
Platform::String string string

The name of the VisualState to transition to.

Methods

ClearValue(DependencyProperty) ClearValue(DependencyProperty) ClearValue(DependencyProperty)

Inherited from DependencyObject

GetAnimationBaseValue(DependencyProperty) GetAnimationBaseValue(DependencyProperty) GetAnimationBaseValue(DependencyProperty)

Inherited from DependencyObject

GetValue(DependencyProperty) GetValue(DependencyProperty) GetValue(DependencyProperty)

Inherited from DependencyObject

ReadLocalValue(DependencyProperty) ReadLocalValue(DependencyProperty) ReadLocalValue(DependencyProperty)

Inherited from DependencyObject

RegisterPropertyChangedCallback(DependencyProperty,DependencyPropertyChangedCallback) RegisterPropertyChangedCallback(DependencyProperty,DependencyPropertyChangedCallback) RegisterPropertyChangedCallback(DependencyProperty,DependencyPropertyChangedCallback)

Inherited from DependencyObject

SetValue(DependencyProperty,Object) SetValue(DependencyProperty,Object) SetValue(DependencyProperty,Object)

Inherited from DependencyObject

UnregisterPropertyChangedCallback(DependencyProperty,Int64) UnregisterPropertyChangedCallback(DependencyProperty,Int64) UnregisterPropertyChangedCallback(DependencyProperty,Int64)

Inherited from DependencyObject

See Also