WPF 列表框项样式动画

Question

我一直在为我的列表框研究一种新样式，但我遇到了一个问题。当我将鼠标悬停在列表框中的任何项目上时，我的动画在所有项目上运行，而不仅仅是我悬停在上面的项目。我一直在互联网上寻找，但似乎有很多不同的方法可以做到这一点，但没有一种为我解决这个问题。

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

任何帮助将不胜感激，我已经困了一段时间......

谢谢！

Answer 1

在我的头顶上，我认为您正在对资源进行动画处理，而不仅仅是边框颜色，请尝试将边框声明更改为。

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

基本上从边框线上删除边框画笔并将其放在下面的样式设置器中。