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:

Buttons normal

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:

Buttons mouseover

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

score 3 · Accepted Answer · edited May 15 '12 at 10:57

3

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>

edited May 15 '12 at 10:57

Ronald Wildenberg

31,634
14
90
133

answered May 15 '12 at 09:34

Clemens

123,504
12
155
268

Ah, that makes sense. So I have to change the entire brush instead of just the color of the brush? – Ronald Wildenberg May 15 '12 at 09:42
Or I could stop using the `Brush` resource. – Ronald Wildenberg May 15 '12 at 10:48
Just saw your edit, which is exactly what i was about to post right now. Seems to be the right approach after all. – Clemens May 15 '12 at 11:10
You pointed me in the right direction. I first tried replacing the entire brush using `ObjectAnimationUsingKeyFrames` but that didn't seem to work. In the end, simply not using the brush resource was even simpler. – Ronald Wildenberg May 15 '12 at 11:20

VisualState storyboard applies to resource instead of control?

1 Answers1