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>