Aplicativos do Windows
Recolher sumário
Expandir sumário
Este conteúdo não está disponível em seu idioma, mas aqui está a versão em inglês.

VisualState.Storyboard property

Gets or sets a Storyboard that defines state-specific property values and appearance of the control when it is using this visual state.


public Storyboard Storyboard { get; set; }


XAML Values


A single Storyboard object element, which declares the animation storyboard to use for this state.

Property value

Type: Storyboard

A Storyboard that defines the property changes to apply to the control when this VisualState is used as the current visual state.


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 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.

Animations that affect layout are potentially dependent animations, which can have performance consequences for users of your control when the control loads a VisualState. For more info, see Storyboarded animations for visual states.


This example creates a simple ControlTemplate for a Button that contains one Grid. The VisualState with the x:Name attribute value of "PointerOver" has a Storyboard that changes the color of the button content (a Grid) from green to red when the user puts the pointer over the Button. The VisualState with the x:Name attribute value of "Normal" is included so that when the user moves the pointer off the button, the Grid background returns to green.

<ControlTemplate TargetType="Button">
  <Grid >
      <VisualStateGroup x:Name="CommonStates">


          <!--Take one half second to transition to the PointerOver state.-->
          <VisualTransition To="PointerOver" 
        <VisualState x:Name="Normal" />

        <!--Change the SolidColorBrush, ButtonBrush, to red when the
            Pointer is over the button.-->
        <VisualState x:Name="PointerOver">
            <ColorAnimation Storyboard.TargetName="ButtonBrush" 
                            Storyboard.TargetProperty="Color" To="Red" />
      <SolidColorBrush x:Name="ButtonBrush" Color="Green"/>

Requirements (Windows 10 device family)

Device family

Universal, introduced version 10.0.10240.0

API contract

Windows.Foundation.UniversalApiContract, introduced version 1.0


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



Requirements (Windows 8.x and Windows Phone 8.x)

Minimum supported client

Windows 8

Minimum supported server

Windows Server 2012

Minimum supported phone

Windows Phone 8.1 [Windows Runtime apps only]


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



See also

Storyboarded animations
Storyboarded animations for visual states
Quickstart: Control templates
XAML control and app styling sample



© 2016 Microsoft