• Article

VisualState.Storyboard Property

Microsoft Silverlight will reach end of support after October 2021. Learn more.

Gets or sets a Storyboard that defines the appearance of the control when it is the state that is represented by the VisualState.

Namespace:  System.Windows
Assembly:  System.Windows (in System.Windows.dll)

Syntax

'Declaration
Public Property Storyboard As Storyboard

public Storyboard Storyboard { get; set; }

<VisualState>
  singleStoryboard
</VisualState>

XAML Values

  • singleStoryboard
    A single Storyboard object element, which declares the storyboard to used for this state.

Storyboard is the XAML content property of VisualState and can thus support this content element syntax, as opposed to having to specify VisualState.Storyboard as a property element.

Property Value

Type: System.Windows.Media.Animation.Storyboard
A Storyboard that defines the appearance of the control when it is the state that is represented by the VisualState.

Remarks

The Storyboard property that changes the appearance of the control. When the control enters the state that is specified by the VisualState.Name property, the Storyboard begins. When the control exits the state, the Storyboard stops.

Examples

The following example creates a simple ControlTemplate for a Button that contains one Grid. The VisualState called MouseOver has a Storyboard that changes the color of the Grid from green to red when the user puts the mouse over the Button. The VisualState called Normal is included so that when the user moves the mouse off the button, the Grid returns to green.

Run this sample

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

        <VisualStateGroup.Transitions>

          <!--Take one half second to trasition to the MouseOver state.-->
          <VisualTransition To="MouseOver" 
                              GeneratedDuration="0:0:0.5"/>
        </VisualStateGroup.Transitions>

        <VisualState x:Name="Normal" />

        <!--Change the SolidColorBrush, ButtonBrush, to red when the
            mouse is over the button.-->
        <VisualState x:Name="MouseOver">
          <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>

Version Information

Silverlight

Supported in: 5, 4, 3

Silverlight for Windows Phone

Supported in: Windows Phone OS 7.1, Windows Phone OS 7.0

Platforms

For a list of the operating systems and browsers that are supported by Silverlight, see Supported Operating Systems and Browsers.