wpfxamlstoryboardcoloranimation

How to avoid that a Coloranimation in a ControlTemplate gets applied to every object using the template


I declared ColorAnimations inside a ControlTemplate of a Style.

What it should do:

Whenever the mouse hovers over the object the color of this specific object should be animated.

What it does instead:

Animating the color of EVERY object the style is applied to whenever I hover over one of them, even though the property activating the animation is not changing on all objects.

What I tried before:

I tried using an Eventrigger instead of a normal trigger but the problem persists. I also tried using the "Name" property not "x:Name" but this didn't help either. Also not using Storyboard.TargetName but Storyboard.Target and using a binding with RelativeSource to let it find the object.. and still every object using this style gets animated whenever I hover over any of them

It works as intended if I use Setters to change the background instead of Storyboards and ColorAnimations.

The Style

<Style x:Key="Fraction_ScrollViewer_ScrollBar_Thumb" TargetType="{x:Type Thumb}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Thumb}">
                <Border
                    x:Name="Border"
                    CornerRadius="5"
                    Background="{TemplateBinding Background}"
                    BorderThickness="0" />

                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard
                                Name="IsMouseOver_True"
                                HandoffBehavior="Compose">
                                <Storyboard>
                                    <ColorAnimation
                                        Storyboard.TargetName="Border"
                                        Storyboard.TargetProperty="Background.(SolidColorBrush.Color)"
                                        To="{StaticResource 'Color_CoolGrey'}"
                                        Duration="0:0:0.2" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>

                        <Trigger.ExitActions>
                            <BeginStoryboard
                                Name="IsMouseOver_False">
                                <Storyboard>
                                    <ColorAnimation
                                        Storyboard.TargetName="Border"
                                        Storyboard.TargetProperty="Background.(SolidColorBrush.Color)"
                                        To="{StaticResource 'Color_MidGrey'}"
                                        Duration="0:0:0.2" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.ExitActions>
                    </Trigger>

The Thumb style is used in a Scrollbar style which is used in a ScrollViewer. The Scrollviewer Style is then used in 2 locations:

1:

<Style x:Key="LabelTreeView" TargetType="{x:Type TreeView}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TreeView}">
                <ScrollViewer
                    Style="{StaticResource ScrollViewer}"
                    Focusable="False"
                    CanContentScroll="False"
                    Padding="4">

                    <ItemsPresenter />

                </ScrollViewer>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

2:

<ScrollViewer
                    Style="{StaticResource ScrollViewer}"
                    HorizontalScrollBarVisibility="Disabled"
                    VerticalScrollBarVisibility="Auto">
                    <ItemsControl
                        BorderThickness="0"
                        Background="{StaticResource Brush_Transparent}"
                        ItemTemplate="{StaticResource CharacterSequenceChar}"
                        ItemsSource="{Binding DisplayedCharacterSequenceCharacters}">

                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapPanel />
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                    </ItemsControl>
                </ScrollViewer>

What is causing this behaviour and how to avoid it with still using animations?


Solution

  • Apparently all Buttons share the same Brush instance in their Background property.

    You could explicitly assign a separate Brush for each Border in the Template:

    <Border x:Name="Border" ...>
        <Border.Background>
            <SolidColorBrush Color="{Binding Background.Color,
                                     RelativeSource={RelativeSource TemplatedParent}}"/>
        </Border.Background>
    </Border>