title: Why is my XAML button PointerOver VisualState not working?
body: <p>I am trying to get the following <code>PointerOver</code> VisualState to work. Ideally when the mouse pointer is over the button, I want to highlight the button with a black border.</p>
  
  <p>I have been trying various ways to make this work, please help.</p>
  
  <p>Note: If I set the BorderColor value of the BorderHighlight, Border element, I get the border desired, but not when I made it as part of the VisualState.</p>
  
  <pre><code>&lt;Style x:Key="SecondaryButton"  TargetType="Button"&gt;
      &lt;Setter Property="Background" Value="LightSkyBlue"&gt;&lt;/Setter&gt;
      &lt;Setter Property="Foreground" Value="Black"&gt;&lt;/Setter&gt;
      &lt;Setter Property="Padding" Value="5"&gt;&lt;/Setter&gt;
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="Button"&gt;
                  &lt;Border Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" x:Name="ButtonHighlight" BorderThickness="2" BorderBrush="Transparent"&gt;
                      &lt;Grid&gt;
                          &lt;Rectangle x:Name="innerRectangle" HorizontalAlignment="Stretch" 
                                     VerticalAlignment="Stretch" Stroke="Transparent" 
                                     StrokeThickness="20" Fill="{TemplateBinding Background}" 
                                     RadiusX="15" RadiusY="15"   /&gt;
  
                              &lt;ContentPresenter x:Name="Text" Content="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center"/&gt;
                              &lt;VisualStateManager.VisualStateGroups&gt;
                                  &lt;VisualStateGroup x:Name="CommonStates"&gt;
                                      &lt;VisualState x:Name="Normal"&gt;
                                          &lt;Storyboard&gt;
                                              &lt;ColorAnimation From="Transparent" To="Black" Storyboard.TargetName="Text" Storyboard.TargetProperty="(Button.Foreground).(SolidColorBrush.Color)" BeginTime="0" Duration="1"&gt;&lt;/ColorAnimation&gt;
                                              &lt;ColorAnimation From="Transparent" To="LightSkyBlue" Storyboard.TargetName="Text" Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" BeginTime="0" Duration="1"&gt;&lt;/ColorAnimation&gt;
                                          &lt;/Storyboard&gt;
                                      &lt;/VisualState&gt;
                                      &lt;VisualState x:Name="PointerOver"&gt;
                                          &lt;Storyboard&gt;
                                              &lt;ColorAnimation From="Transparent" To="Black" Storyboard.TargetName="ButtonHighlight" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"  Duration="0:0:1"&gt;&lt;/ColorAnimation&gt;
                                          &lt;/Storyboard&gt;
                                             .
                                             .
                                             .
  </code></pre>
  
  <p>I snipped the extraneous code to keep the question short and to the point, but this all compile, just not getting the result desired. I could also use 2 rectangles (one smaller than the other), but would like to make it work with actual border.</p>
  
  <p>Additionally what would be the difference between targeting:</p>
  
  <pre><code>   &lt;ColorAnimation From="Transparent" To="Black" 
     Storyboard.TargetName="ButtonHighlight"   
     Storyboard.TargetProperty="BorderBrush.(SolidColorBrush.Color)"         
     Duration="0:0:1"&gt;&lt;/ColorAnimation&gt;
  </code></pre>
  
  <p>and </p>
  
  <pre><code>   &lt;ColorAnimation From="Transparent" To="Black" 
     Storyboard.TargetName="ButtonHighlight" 
     Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
     Duration="0:0:1"&gt;&lt;/ColorAnimation&gt;
  </code></pre>