VisualTransition.Storyboard property

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

Syntax

public Storyboard Storyboard { get; set; }

<VisualTransition>
  singleStoryboard
</VisualTransition>

XAML Values

singleStoryboard

Exactly one Storyboard object element.

Property value

Type: 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 toPoint, 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.

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>

Requirements

See also

VisualTransition

GoToState

Storyboard

Quickstart: Control templates

Storyboarded animations

Storyboarded animations for visual states

Build date: 1/31/2013