title: VisualState storyboard applies to resource instead of control?
body: <p>I have a weird problem with a storyboard inside a button visual state manager. I have two buttons with the same style and a specific <code>Foreground</code>. The <code>Path</code> that is the content of the button binds its <code>Fill</code> property to this foreground.</p>
  
  <pre><code>&lt;Button Style="{DynamicResource ButtonStyleListNavigation}"
          Foreground="{DynamicResource NavigationButtonForegroundBrush}"&gt;
    &lt;Button.Content&gt;
      &lt;Path Data="{StaticResource LeftArrowPath}"
            Fill="{Binding RelativeSource=
                           {RelativeSource Mode=FindAncestor, AncestorType=Button},
                           Path=Foreground}" /&gt;
    &lt;/Button.Content&gt;
  &lt;/Button&gt;
  
  &lt;Button Style="{DynamicResource ButtonStyleListNavigation}"
          Foreground="{DynamicResource NavigationButtonForegroundBrush}"&gt;
    &lt;Button.Content&gt;
      &lt;Path Data="{StaticResource RightArrowPath}"
            Fill="{Binding RelativeSource=
                           {RelativeSource Mode=FindAncestor, AncestorType=Button},
                           Path=Foreground}" /&gt;
    &lt;/Button.Content&gt;
  &lt;/Button&gt;
  </code></pre>
  
  <p>In their normal state the buttons look like this:</p>
  
  <p><img src="https://i.stack.imgur.com/e2JWN.png" alt="Buttons normal"></p>
  
  <p>The style <code>ButtonStyleListNavigation</code> is as follows:</p>
  
  <pre><code>&lt;Style x:Key="ButtonStyleListNavigation" TargetType="Button"&gt;
    &lt;Setter Property="Template"&gt;
      &lt;Setter.Value&gt;
        &lt;ControlTemplate TargetType="Button"&gt;
          &lt;Border&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;ColorAnimationUsingKeyFrames
                              Storyboard.TargetProperty=
                                  "(Control.Foreground).(SolidColorBrush.Color)"&gt;
                      &lt;EasingColorKeyFrame KeyTime="0" Value="Chocolate" /&gt;
                    &lt;/ColorAnimationUsingKeyFrames&gt;
                  &lt;/Storyboard&gt;
                &lt;/VisualState&gt;
                &lt;VisualState x:Name="Pressed" /&gt;
                &lt;VisualState x:Name="Disabled" /&gt;
              &lt;/VisualStateGroup&gt;
            &lt;/VisualStateManager.VisualStateGroups&gt;
  
            &lt;ContentPresenter x:Name="contentPresenter" /&gt;
          &lt;/Border&gt;
        &lt;/ControlTemplate&gt;
    &lt;/Setter&gt;
  &lt;/Style&gt;
  </code></pre>
  
  <p>So when the user mouseovers one button, it's color should change, pretty straightforward. However, what happens when I mouseover <em>one</em> button is this:</p>
  
  <p><img src="https://i.stack.imgur.com/sNlTT.png" alt="Buttons mouseover"></p>
  
  <p><strong>Both</strong> buttons change their color. I'm obviously doing something wrong but I can't figure out what it is.</p>