Question

I have been working on a new style for my list boxes but I have ran into an issue. When I hover over any of the items in the list box my animation runs on all the item not just the one I hovered over. I been looking on the internet but it seems like there is a bunch of different ways to do this but non of them solve this issue for me.

<Color x:Key="BorderColor" A="255" R="216" G="217" B="220" />
<Color x:Key="ForegroundColor" A="255" R="40" G="40" B="40" />
<Color x:Key="BackgroundColor" A="255" R="240" G="241" B="241" />

<SolidColorBrush x:Key="BorderBrush" Color="{StaticResource BorderColor}" />
<SolidColorBrush x:Key="ForegroundBrush" Color="{StaticResource ForegroundColor}" />        
<SolidColorBrush x:Key="BackgroundBrush" Color="{StaticResource BackgroundColor}" />

<Color x:Key="Color_Red" A="255" R="235" G="103" B="103" />

<Style x:Key="Test" TargetType="{x:Type ListBoxItem}">
    <Setter Property="Foreground" Value="{StaticResource ForegroundBrush}" />
    <Setter Property="FocusVisualStyle" Value="{x:Null}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBoxItem">
                <Border x:Name="Border" Background="{StaticResource BackgroundBrush}" BorderBrush="{StaticResource BorderBrush}" BorderThickness="0,0,0,3" CornerRadius="0" Margin="0,0,2,3" Padding="0" SnapsToDevicePixels="true">
                    <Grid Height="Auto" Width="Auto">
                        <ContentPresenter Margin="3,3,0,0" VerticalAlignment="Top" />
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <EventTrigger RoutedEvent="ListBoxItem.MouseEnter">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation Duration="0:0:0.5"
                                                    Storyboard.TargetName="Border"
                                                    Storyboard.TargetProperty="BorderBrush.Color" To="{StaticResource Color_Red}" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="ListBoxItem.MouseLeave">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard FillBehavior="Stop">
                                    <ColorAnimation Duration="0:0:0.3"
                                                    Storyboard.TargetName="Border"
                                                    Storyboard.TargetProperty="BorderBrush.Color" To="{StaticResource BorderColor}" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Any help would be greatly appreciated, I been stuck on this for a while…

Thank You!

Answer 1

Off the top of my head I think you’re animating the resource instead of just the border color, try changing the Border declaration to.

<Border x:Name="Border" Background="{StaticResource BackgroundBrush}"  BorderThickness="0,0,0,3" CornerRadius="0" Margin="0,0,2,3" Padding="0" SnapsToDevicePixels="true">
    <Border.Style>
        <Style TargetType="{x:Type Border}">
            <Setter Property="BorderBrush" Value="{StaticResource BorderBrush}"/>
        </Style>
    </Border.Style>
    <Grid Height="Auto" Width="Auto">
        <ContentPresenter Margin="3,3,0,0" VerticalAlignment="Top" />
    </Grid>
</Border>

Basically remove the Border brush from the border line and put it in a style setter below.