skinnedbutton.xaml

<UserControl x:Class="VSMButtonTemplate.SkinnedButton"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
  <!--<Snippet3>-->
  <StackPanel>
    <StackPanel.Resources>
      <Style TargetType="Button" x:Key="newTemplate">
        <!--Set the Background, Foreground, FontSize, Width, 
                    Height, Margin, and Template properties for
                    the Button.-->
        <Setter Property="Background" Value="Navy"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="Width" Value="100"/>
        <Setter Property="Height" Value="40"/>
        <Setter Property="Margin" Value="10"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Template">
          <Setter.Value>
            <ControlTemplate TargetType="Button">
              <Border x:Name="RootElement">
                <!--<Snippet5>-->
                <VisualStateManager.VisualStateGroups>

                  <!--Define the states and transitions for the common states.
                      The states in the VisualStateGroup are mutually exclusive to
                      each other.-->
                  <VisualStateGroup Name="CommonStates">

                    <!--Define the VisualTransitions that can be used when the control
                        transitions between VisualStates that are defined in the
                        VisualStatGroup.-->
                    <VisualStateGroup.Transitions>

                      <!--<SnippetPressedTransition>-->
                      <!--Take one hundredth of a second to transition to the
                          Pressed state.-->
                      <VisualTransition To="Pressed" 
                                        GeneratedDuration="0:0:0.01" />
                      <!--</SnippetPressedTransition>-->

                      <!--<Snippet7>-->
                      <!--<SnippetMouseOverTransition>-->
                      <!--Take one half second to trasition to the MouseOver state.-->
                      <VisualTransition To="MouseOver" 
                                        GeneratedDuration="0:0:0.5" />
                      <!--</SnippetMouseOverTransition>-->

                      <!--<Snippet6>-->
                      <!--Take one hundredth of a second to transition from the
                          Pressed state to the MouseOver state.-->
                      <VisualTransition From="Pressed" To="MouseOver" 
                                        GeneratedDuration="0:0:0.01" />
                      <!--</Snippet6>-->
                      <!--</Snippet7>-->

                      <!--<Snippet8>-->
                      <!--Take one and a half seconds to transition from the
                          MouseOver state to the Normal state. 
                          Have the SolidColorBrush, BorderBrush, fade to blue, 
                          then to yellow, and then to black in that time.-->
                      <VisualTransition From="MouseOver" To="Normal" 
                                            GeneratedDuration="0:0:1.5">
                        <Storyboard>
                          <ColorAnimationUsingKeyFrames
                            Storyboard.TargetProperty="Color"
                            Storyboard.TargetName="BorderBrush"
                            FillBehavior="HoldEnd" >

                            <ColorAnimationUsingKeyFrames.KeyFrames>

                              <LinearColorKeyFrame Value="Blue" 
                                KeyTime="0:0:0.5" />
                              <LinearColorKeyFrame Value="Yellow" 
                                KeyTime="0:0:1" />
                              <LinearColorKeyFrame Value="Black" 
                                KeyTime="0:0:1.5" />

                            </ColorAnimationUsingKeyFrames.KeyFrames>
                          </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                      </VisualTransition>
                      <!--</Snippet8>-->
                    </VisualStateGroup.Transitions>

                    <!--The Normal state is the state the button is in
                        when it is not in another state from this VisualStateGroup.
                        There is no special visual behavior for this state, but
                        the VisualState must be defined in order for the button
                        to return to its initial state.-->
                    <VisualState x:Name="Normal" />

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

                      </Storyboard>
                    </VisualState>
                    <!--</Snippet4>-->

                    <!--Change the border of the button to Transparent when the
                        button is pressed.-->
                    <VisualState x:Name="Pressed">
                      <Storyboard >
                        <ColorAnimation Storyboard.TargetName="BorderBrush" 
                                        Storyboard.TargetProperty="Color" 
                                        To="Transparent" 
                                        />
                      </Storyboard>
                    </VisualState>

                    <!--Show the DisabledRect when the IsEnabled property on
                        the button is false.-->
                    <VisualState x:Name="Disabled">
                      <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="DisabledRect" 
                                         Storyboard.TargetProperty="Opacity"
                                         To="1" Duration="0" />
                      </Storyboard>
                    </VisualState>
                  </VisualStateGroup>

                  <!--Define the states and transitions for the focus states.
                      The states in the VisualStateGroup are mutually exclusive to
                      each other.-->
                  <VisualStateGroup x:Name="FocusStates">

                    <!--Define the VisualStates in this VistualStateGroup.-->
                    <VisualState x:Name="Focused">
                      <Storyboard>
                        <ObjectAnimationUsingKeyFrames 
                          Storyboard.TargetName="FocusVisual" 
                          Storyboard.TargetProperty="Visibility" Duration
                          ="0">
                          
                          <DiscreteObjectKeyFrame KeyTime="0">
                            <DiscreteObjectKeyFrame.Value>
                              <Visibility>Visible</Visibility>
                            </DiscreteObjectKeyFrame.Value>
                          </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                      </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Unfocused">
                      <Storyboard>
                        <ObjectAnimationUsingKeyFrames 
                          Storyboard.TargetName="FocusVisual" 
                          Storyboard.TargetProperty="Visibility"
                          Duration="0">
                          
                          <DiscreteObjectKeyFrame KeyTime="0">
                            <DiscreteObjectKeyFrame.Value>
                              <Visibility>Collapsed</Visibility>
                            </DiscreteObjectKeyFrame.Value>
                          </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                      </Storyboard>
                    </VisualState>
                  </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <!--</Snippet5>-->

                <!--Create the SolidColorBrush for the Background 
                    as an object elemment and give it a name so 
                    it can be referred to elsewhere in the control template.-->
                <Border.Background>
                  <SolidColorBrush x:Name="BorderBrush" Color="Black"/>
                </Border.Background>

                <!--Create a border that has a different color by adding smaller grid.
                    The background of this grid is specified by the button's Background
                    property.-->
                <Grid Background="{TemplateBinding Background}" Margin="4">

                  <!--Create a Rectangle that indicates that the
                      Button has focus.-->
                  <Rectangle Name="FocusVisual" 
                             Visibility="Collapsed" Margin="2" 
                             Stroke="{TemplateBinding Foreground}" 
                             StrokeThickness="1" 
                             StrokeDashArray="1.5 1.5"/>

                  <!--Use a ContentPresenter to display the Content of
                      the Button.-->
                  <ContentPresenter
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                    Margin="4,5,4,4" />

                  <!--Create a rectangle that causes the button to appear
                      grayed out when it is disabled.-->
                  <Rectangle x:Name="DisabledRect" 
                           Fill="#A5FFFFFF"
                           Opacity="0" IsHitTestVisible="false" />
                </Grid>
              </Border>
            </ControlTemplate>
          </Setter.Value>
        </Setter>
      </Style>

    </StackPanel.Resources>

    <Button Style="{StaticResource newTemplate}" 
            Content="Button1"/>

    <Button Style="{StaticResource newTemplate}"
            Background="Purple" 
            Content="Button2" />
  </StackPanel>
  <!--</Snippet3>-->
</UserControl>