wpf - VisualState and Customzing the appearance...

VisualState defined with group called VisualStateGroup define some abstraction of the Visual State, which is part of the contract of A control. They defined an isolated state the control is in,in that state, the Control should have a certain appearance. such as Focused, pressed, and others. 

As I said, it is part of the control contract, and let's see the skeleton of the Button under the question. 

[TemplateVisualState(Name = "Normal", GroupName = "CommonStates")]
[TemplateVisualState(Name = "MouseOver", GroupName = "CommonStates")]
[TemplateVisualState(Name = "Pressed", GroupName = "CommonStates")]
[TemplateVisualState(Name = "Disabled", GroupName = "CommonStates")]
[TemplateVisualState(Name = "Unfocused", GroupName = "FocusStates")]
[TemplateVisualState(Name = "Focused", GroupName = "FocusStates")]
public class Button : ButtonBase
{
}

When you are styling the control, you probably want to duplicate the VisualState that a control has, such as the exaple shown in [1]  .

<ResourceDictionary     xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:src="clr-namespace:ButtonControlLibrary;assembly=ButtonControlLibrary"
    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">
    <Style TargetType="src:MyButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="src:MyButton">
                    <vsm:VisualStateManager.VisualStateGroups>
                        <!--Define the states for the common states. The states in a 
                                    VisualStateGroup are mutually exclusive to each other.-->
                        <vsm:VisualStateGroup x:Name="CommonStates">
                            <!--Define the VisualStates in this VistualStateGroup.-->
                            <vsm:VisualState x:Name="Normal"/>
                            <vsm:VisualState x:Name="MouseOver" />
                            <vsm:VisualState x:Name="Pressed" />
                            <vsm:VisualState x:Name="Disabled" />
                        </vsm:VisualStateGroup>
                        <!--Define the states for the focus states. The states in a 
                                    VisualStateGroup are mutually exclusive to each other.-->
                        <vsm:VisualStateGroup x:Name="FocusStates">
                            <!--Define the VisualStates in this VistualStateGroup.-->
                            <vsm:VisualState x:Name="Focused" />
                            <vsm:VisualState x:Name="Unfocused" />
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>
                    <!--The parts of the button control will be defined here.-->
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

and when you are filling out the details of the VisualState appearance, you probably will need to do this: 

<!--Change the border of the button to red when the
mouse is over the button.-->
        <vsm:VisualState x:Name="MouseOver">
            <Storyboard>
                <ColorAnimation Storyboard.TargetName="BorderBrush" 
                Storyboard.TargetProperty="Color" To="Red" />

            </Storyboard>
        </vsm:VisualState>

To make this happen, you might start by modifying some existing ControlTemplate, you can use my Utilities class or you can directly get the ControlTemplate from MSDN, as is shown in reference list [2].

In this post, the following article is been referenced. 

[1] Walkthrough: Customizing the Appearance of a Button by Using a ControlTemplate

[2] Button Styles and Templates

[3] Customizing the Appearance of an Existing Control by Using a ControlTemplate