VisualTransition.Storyboard property

Applies to Windows and Windows Phone

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

Minimum supported client

Windows 8

Minimum supported server

Windows Server 2012

Minimum supported phone

Windows Phone 8.1 [Windows Runtime apps only]

Namespace

Windows.UI.Xaml
Windows::UI::Xaml [C++]

Metadata

Windows.winmd

See also

VisualTransition
GoToState
Storyboard
Quickstart: Control templates
Storyboarded animations
Storyboarded animations for visual states

 

 

Show:
© 2014 Microsoft