title: ControlTemplate with VisualState ColorAnimation binding to attached property
body: <p>I have an attached property that I would like to bind to in my button's ControlTemplate VisualStateManager.</p>
  
  <p>Below is the code for the property and the XAML for the button style.  I have no errors or warnings, but the button doesn't change colors when I mouse over it or when I press it.</p>
  
  <p>What's wrong with this?  I've looked at the following examples and they haven't worked so far:</p>
  
  <p><a href="https://stackoverflow.com/questions/7139641/how-to-use-attached-property-within-a-style">How to use Attached property within a style?</a></p>
  
  <p><a href="https://stackoverflow.com/questions/7014924/problem-reading-attachedproperty-in-controltemplate">Problem reading AttachedProperty in ControlTemplate</a></p>
  
  <p>Here's the property:</p>
  
  <pre><code>using System.Windows;
  using System.Windows.Media;
  
  namespace company.project.Utilities.AttachedBehaviors
  {
      public class Attached : DependencyObject
      {
          // Attached properties...
          #region MouseOverColor Property
  
          public static readonly DependencyProperty MouseOverColorProperty = DependencyProperty.RegisterAttached(
                "MouseOverColor",
                typeof(Color),
                typeof(Attached)
              );
  
          public static void SetMouseOverColor(UIElement element, Color value)
          {
              element.SetValue(MouseOverColorProperty, value);
          }
  
          public static Color GetMouseOverColor(UIElement element)
          {
              return (Color)element.GetValue(MouseOverColorProperty);
          }
  
          #endregion
  
          #region PressedColor Property
  
          public static readonly DependencyProperty PressedColorProperty = DependencyProperty.RegisterAttached(
                "PressedColor",
                typeof(Color),
                typeof(Attached)
              );
  
          public static void SetPressedColor(UIElement element, Color value)
          {
              element.SetValue(PressedColorProperty, value);
          }
  
          public static Color GetPressedColor(UIElement element)
          {
              return (Color)element.GetValue(PressedColorProperty);
          }
  
          #endregion
      }
  }
  </code></pre>
  
  <p>Here's the style:</p>
  
  <pre><code>xmlns:attached="clr-namespace:company.project.Utilities.AttachedBehaviors;assembly=company.project.Utilities"
  
  &lt;Style x:Key="DialogButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource StandardButtonStyle}"&gt;
      &lt;Setter Property="Background" Value="{StaticResource ElectroTekGrayBrush}" /&gt;
      &lt;Setter Property="attached:Attached.MouseOverColor" Value="{StaticResource ElectroTekGreen}" /&gt;
      &lt;Setter Property="attached:Attached.PressedColor" Value="{StaticResource ElectroTekLightGray}" /&gt;
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="{x:Type Button}"&gt;
                  &lt;Grid&gt;
                      &lt;VisualStateManager.VisualStateGroups&gt;
                          &lt;VisualStateGroup x:Name="CommonStates"&gt;
                              &lt;VisualState x:Name="Normal" /&gt;
                              &lt;VisualState x:Name="MouseOver"&gt;
                                  &lt;Storyboard&gt;
                                      &lt;ColorAnimation Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border" To="{Binding Path=(attached:Attached.MouseOverColor), RelativeSource={RelativeSource AncestorType=Button}}" Duration="0" /&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/VisualState&gt;
                              &lt;VisualState x:Name="Pressed"&gt;
                                  &lt;Storyboard&gt;
                                      &lt;ColorAnimation Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border" To="{Binding Path=(attached:Attached.PressedColor), RelativeSource={RelativeSource AncestorType=Button}}" Duration="0" /&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/VisualState&gt;
                              &lt;VisualState x:Name="Disabled" /&gt;
                          &lt;/VisualStateGroup&gt;
                      &lt;/VisualStateManager.VisualStateGroups&gt;
                      &lt;Border Name="Border" Background="{TemplateBinding Background}" CornerRadius="{Binding RelativeSource={RelativeSource Self}, Path=ActualHeight, Converter={StaticResource MathConverter}, ConverterParameter=(@VALUE/2)}" IsHitTestVisible="True"&gt;
                          &lt;Grid&gt;
                              &lt;TextBlock x:Name="TextBlock" Text="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontSize="15" /&gt;
                          &lt;/Grid&gt;
                      &lt;/Border&gt;
                  &lt;/Grid&gt;
                  &lt;ControlTemplate.Triggers&gt;
                      &lt;Trigger Property="IsMouseOver" Value="True"&gt;
                          &lt;Setter TargetName="TextBlock" Property="Cursor" Value="Hand" /&gt;
                      &lt;/Trigger&gt;
                  &lt;/ControlTemplate.Triggers&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  </code></pre>
  
  <p>Here's the button:</p>
  
  <pre><code>&lt;Button Style="{StaticResource DialogButton}" /&gt;
  </code></pre>