VisualStateManager.VisualStateGroups Attached Property

see GetVisualStateGroups

see GetVisualStateGroups

see GetVisualStateGroups

Examples

The following example creates a simple ControlTemplate for a Button that contains one Grid. It also contains a VisualStateGroup named CommonStates, which defines the MouseOver and Normal states. The VisualStateGroup also has a VisualTransition that specifies that it takes one half second for the Grid to change from green to red when the user moves the mouse pointer over the Button.

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

Remarks

Each VisualStateGroup contains a collection of VisualState objects. A VisualState contains a collection of Storyboard objects that specify how the control's appearance changes when the control is in a certain state. 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").

You add VisualState to a control by setting the VisualStateGroups attached property on the control. You put states that are mutually exclusive to each other in the same VisualStateGroup. For example, the CheckBox has two VisualStateGroup objects. One contains the states, Normal, MouseOver, Pressed, and Disabled. The other contains the states, Checked, UnChecked, and Indeterminate. The CheckBox can be in states MouseOver and UnChecked at the same time, but it cannot be in the MouseOver and Pressed states at the same time.

Although you can add VisualState objects to any element, they are a particularly useful way to enable others to redefine the visual behavior of a Control. If you create a custom control that uses a ControlTemplate, you can specify which states that control can be in by adding a TemplateVisualStateAttribute on its class definition. Then anyone who creates a new ControlTemplate for your control can add VisualState objects to the template. States with the same System.Windows.TemplateVisualStateAttribute.GroupName belong in the same VisualStateGroup.

For more information about how to use VisualStateGroup objects in a ControlTemplate, see Customizing the Appearance of an Existing Control by Creating a ControlTemplate. For more information about how to create controls that use the VisualStateManager, see Creating a Control That Has a Customizable Appearance.

Applies to