Windows Dev Center

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.

Syntax


public Storyboard Storyboard { get; set; }


<VisualState>
  singleStoryboard
</VisualState>

XAML Values

singleStoryboard

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.

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

Examples

This example creates a simple ControlTemplate for a Button that contains one Grid. The VisualState with the x:Name 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 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 >
    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="CommonStates">

        <VisualStateGroup.Transitions>

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

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


Requirements (Windows 10 device family)

Device family

Universal

API contract

Windows.Foundation.UniversalApiContract, introduced version 1.0

Namespace

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

Metadata

Windows.Foundation.UniversalApiContract.winmd

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]

Namespace

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

Metadata

Windows.winmd

See also

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

 

 

Show:
© 2015 Microsoft