VisualState.Storyboard Property
Definition
Important
Some information relates to prerelease product that may be substantially modified before it’s released. Microsoft makes no warranties, express or implied, with respect to the information provided here.
Gets or sets a Storyboard that defines state-specific property values and appearance of the control when it is using this visual state.
public:
property Storyboard ^ Storyboard { Storyboard ^ get(); void set(Storyboard ^ value); };Storyboard Storyboard();
void Storyboard(Storyboard value);public Storyboard Storyboard { get; set; }var storyboard = visualState.storyboard;
visualState.storyboard = storyboard;Public Property Storyboard As Storyboard<VisualState>
singleStoryboard
</VisualState>
Property Value
A Storyboard that defines the property changes to apply to the control when this VisualState is used as the current visual state.
Examples
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 >
<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>
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.