VisualStateManager Class (System.Windows)

The VisualStateManager enables you to specify states for a control, the appearance of a control when it is in a certain state, and when a control changes states. For example, a Button might have a slightly different appearance when it is pressed than when it is not pressed. Two states that the Button defines correspond to when it is pressed ("Pressed") and when it is not ("Normal"). The appearance of a control when it is in a state is defined by a VisualState. A VisualState contains a collection of Storyboard objects that specify how the control's appearance changes when the control is in that state. You add visual states to a control by setting the VisualStateManager.VisualStateGroups attached property on the control. Each VisualStateGroup contains a collection of VisualState objects that are mutually exclusive. That is, the control is always in exactly one state of in each VisualStateGroup.

The VisualStateManager also enables you to specify when a control enters a specific state. The method that you should call to change states depends on your scenario. If you create a control that uses the VisualStateManager in its ControlTemplate, call the GoToState method. For more information about how to create controls that use the VisualStateManager, see Creating a Control That Has a Customizable Appearance. If you use the VisualStateManager outside of a ControlTemplate (for example, if you use a VisualStateManager in a UserControl or in a single element), call the GoToElementState method. In either case, the VisualStateManager performs the logic that is required to appropriately start and stop the storyboards that are associated with the involved state. For example, suppose that a control defines the states, State1 and State2, each of which has a storyboard associated with it. If the control is in State1 and you pass State2 to GoToState or GoToElementState, the VisualStateManager starts the storyboard in State2 and stops the storyboard in State1.

Controls that are included with Windows Presentation Foundation (WPF) use the VisualStateManager to change visual states. When you create a ControlTemplate for a control that is included with WPF, you can add VisualState objects to the control's ControlTemplate to specify the control's appearance in a certain state. To find the names of the visual states for the controls that are included with WPF, see Control Styles and Templates. The control's logic handles transitioning between states, so you do not need to do anything other than define the VisualState objects in the new ControlTemplate. For more information about how to create control templates for existing controls, see Customizing the Appearance of an Existing Control by Creating a ControlTemplate.

If you want to implement your own logic for transitioning between states, you must inherit from VisualStateManager, override the GoToStateCore method, and set the VisualStateManager.CustomVisualStateManager attached property on the control that uses the custom logic.

The following example creates a Rectangle and adds a VisualStateGroup named CommonStates to the VisualStateManager.VisualStatesGroups attached property. The example defines the MouseOver and Normal VisualState objects in the CommonStates VisualStateGroup. When the user moves the mouse pointer over the Rectangle, it changes from red to green over one half second. When the user moves the mouse away from the rectangle, the Grid immediately changes back to red. Note that the Normal state does not define a Storyboard. A Storyboard is not required because when the Rectangle transitions from the MouseOver state to the Normal state, the Storyboard for MouseOver is stopped and the Color property for the SolidColorBrush returns to red.

<Rectangle Name="rect" 
           Width="100" Height="100"
           MouseEnter="rect_MouseEvent" 
           MouseLeave="rect_MouseEvent">
  <VisualStateManager.VisualStateGroups>
    <VisualStateGroup Name="MouseStates">
      <VisualState Name="MouseEnter">
        <Storyboard>
          <ColorAnimation To="Green" 
                          Storyboard.TargetName="rectBrush" 
                          Storyboard.TargetProperty="Color"/>
        </Storyboard>
      </VisualState>
      <VisualState Name="MouseLeave" />
      <VisualStateGroup.Transitions>
        <VisualTransition To="MouseLeave" GeneratedDuration="00:00:00"/>

        <VisualTransition To="MouseEnter" GeneratedDuration="00:00:00.5">
          <VisualTransition.GeneratedEasingFunction>
            <ExponentialEase EasingMode="EaseOut" Exponent="10"/>
          </VisualTransition.GeneratedEasingFunction>
        </VisualTransition>

      </VisualStateGroup.Transitions>
    </VisualStateGroup>
  </VisualStateManager.VisualStateGroups>

  <Rectangle.Fill>
    <SolidColorBrush x:Name="rectBrush" Color="Red"/>
  </Rectangle.Fill>
</Rectangle>

The following example shows the event handler that is defined in the previous example and calls the GoToElementState method to transition between states. If the rectangle in the previous example was part of a ControlTemplate, the example would have to call the GoToState method.

Private Sub rect_MouseEvent(ByVal sender As Object, ByVal e As MouseEventArgs)
    If rect.IsMouseOver Then
        VisualStateManager.GoToElementState(rect, "MouseEnter", True)
    Else
        VisualStateManager.GoToElementState(rect, "MouseLeave", True)
    End If
End Sub

private void rect_MouseEvent(object sender, MouseEventArgs e)
{
    if (rect.IsMouseOver)
    {
        VisualStateManager.GoToElementState(rect, "MouseEnter", true);
    }
    else
    {
        VisualStateManager.GoToElementState(rect, "MouseLeave", true);
    }
}

.NET Framework

.NET Framework Client Profile

Windows 8 Release Preview, Windows Server 2012, Windows 7, Windows Vista SP2, Windows Server 2008 SP2, Windows Server 2008 R2 (Server Core Role supported with SP1 or later; Itanium not supported)

The .NET Framework does not support all versions of every platform. For a list of the supported versions, see .NET Framework System Requirements.

Reference

Other Resources