VisualState storyboard applies to resource instead of control?

Question

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 Foreground. The Path that is the content of the button binds its Fill property to this foreground.

<Button Style="{DynamicResource ButtonStyleListNavigation}"
        Foreground="{DynamicResource NavigationButtonForegroundBrush}">
  <Button.Content>
    <Path Data="{StaticResource LeftArrowPath}"
          Fill="{Binding RelativeSource=
                         {RelativeSource Mode=FindAncestor, AncestorType=Button},
                         Path=Foreground}" />
  </Button.Content>
</Button>

<Button Style="{DynamicResource ButtonStyleListNavigation}"
        Foreground="{DynamicResource NavigationButtonForegroundBrush}">
  <Button.Content>
    <Path Data="{StaticResource RightArrowPath}"
          Fill="{Binding RelativeSource=
                         {RelativeSource Mode=FindAncestor, AncestorType=Button},
                         Path=Foreground}" />
  </Button.Content>
</Button>

In their normal state the buttons look like this:

The style ButtonStyleListNavigation is as follows:

<Style x:Key="ButtonStyleListNavigation" TargetType="Button">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="Button">
        <Border>
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Normal"/>
              <VisualState x:Name="MouseOver">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames
                            Storyboard.TargetProperty=
                                "(Control.Foreground).(SolidColorBrush.Color)">
                    <EasingColorKeyFrame KeyTime="0" Value="Chocolate" />
                  </ColorAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Pressed" />
              <VisualState x:Name="Disabled" />
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>

          <ContentPresenter x:Name="contentPresenter" />
        </Border>
      </ControlTemplate>
  </Setter>
</Style>

So when the user mouseovers one button, it's color should change, pretty straightforward. However, what happens when I mouseover one button is this:

Both buttons change their color. I'm obviously doing something wrong but I can't figure out what it is.

Answer 1

You're setting the Foreground property of both buttons to the same SolidColorBrush instance (as given by the resource NavigationButtonForegroundBrush). Then in your ColorAnimation you change the Color property of that SolidColorBrush by the expression (Control.Foreground).(SolidColorBrush.Color). Obviously now both buttons have their Foreground changed.

You can prevent this by not using the brush as a resource but just its color. So the buttons should change to:

<Button Style="{DynamicResource ButtonStyleListNavigation}">
  <Button.Foreground>
    <SolidColorBrush Color="{DynamicResource NavigationButtonForegroundColor}" />
  </Button.Foreground>
  <Button.Content>
    <Path Data="{StaticResource LeftArrowPath}"
          Fill="{Binding RelativeSource=
                         {RelativeSource Mode=FindAncestor, AncestorType=Button},
                         Path=Foreground}" />
  </Button.Content>
</Button>