VisualState раскадровка применяется к ресурсу вместо контроля?

Question

У меня странная проблема с раскадровкой внутри диспетчера состояния кнопок. У меня есть две кнопки с тем же стилем и определенным Foreground, Path то есть содержимое кнопки связывает ее Fill собственность на этот план.

<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>

В нормальном состоянии кнопки выглядят так:

Стиль ButtonStyleListNavigation как следует:

<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>

Поэтому, когда пользователь наводит курсор мыши на одну кнопку, ее цвет должен измениться, довольно просто. Тем не менее, что происходит, когда я наведите курсор мыши на одну кнопку, это:

Обе кнопки меняют свой цвет. Я явно делаю что-то не так, но не могу понять, что это.

Answer 1

Вы устанавливаете Foreground свойство обеих кнопок для одного экземпляра SolidColorBrush (как указано в ресурсе NavigationButtonForegroundBrush). Затем в вашей ColorAnimation вы меняете Color свойство этого SolidColorBrush по выражению (Control.Foreground).(SolidColorBrush.Color), Очевидно, теперь обе кнопки имеют свои Foreground изменилось.

Вы можете предотвратить это, не используя кисть как ресурс, а просто ее цвет. Таким образом, кнопки должны измениться на:

<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>