what is visual state in wpf? and anyone knows how to start understand and use that?

Question

what is visual state in wpf? and anyone knows how to start understand and use that?

maybe like a complete tutorial, because i never touch visual state before. or just a

Answer 1

Visual state is used to change the appearance of wpf control in different states of the control , for example take the case of a radio button, it may appear differently while focused , while clicked or while disabled ,

visual states falls under different visual state groups like

1. CommonStates
2. CheckStates
3. FocusStates

mostly used visual states are :

1. MouseOver
2. Pressed
3. Disabled
4. Checked
5. Unchecked
6. Indeterminate
7. Focused
8. Unfocused
9. PointerFocused

An example of visualstate used in a radio button style is given

<Style TargetType="RadioButton">
    <Setter Property="Background"
            Value="Transparent" />
    <Setter Property="Foreground"
            Value="{DynamicResource BlackBrush}" />
    <Setter Property="Padding"
            Value="1,4,0,0" />
    <Setter Property="HorizontalAlignment"
            Value="Stretch" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="RadioButton">
                <Border Background="{TemplateBinding Background}">
                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                            <vsm:VisualState x:Name="Normal" >
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundEllipse"
                                                                   Storyboard.TargetProperty="Stroke">
                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                Value="{DynamicResource HpGray13Brush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="MouseOver">
                                <Storyboard>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundEllipse"
                                                                   Storyboard.TargetProperty="Stroke">
                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                Value="{DynamicResource HpGray15Brush}" />
                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="Pressed">
                                <Storyboard>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundEllipse"
                                                                   Storyboard.TargetProperty="Stroke">
                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                Value="{DynamicResource GreenBrush}" />
                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="Disabled">
                                <Storyboard>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundEllipse"
                                                                   Storyboard.TargetProperty="Stroke">
                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                Value="{DynamicResource HpGray1Brush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph"
                                                                   Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                Value="{DynamicResource Gray1Brush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>

Answer 2

Visual States in Wpf is controlling the appearance of one or more controls (set of properties) including animations simultaneously in response to some described event. It is best understood using Microsoft Blend.

Answer 3

Visual States in WPF are about controlling the appearance of controls. It is possible for the state of a control to change then have the appearance of the control change in response to the state change. For example if a control is pressed/disabled/in focus it may have a different appearance for each state. There is an example of how to use WPF's trigger mechanism to change the appearance of controls here; that will provide you with some general background information on changing the appearance of controls. There is a nice general tutorial on WPF here and a good explanation of Visual State here. For more advanced use there is information from Microsoft on the Visual State Manager here