MouseOver ListviewItem 时动画高亮颜色答案

【问题标题】：Animate the highlight color when MouseOver ListviewItemMouseOver ListviewItem 时动画高亮颜色
【发布时间】：2014-04-17 06:28:02
【问题描述】：

我正在尝试为 Listviewitem 的不透明度设置动画，当您将鼠标悬停在它上面时 - 我希望该项目慢慢淡入高亮颜色，并且当我移除鼠标指针时，我希望它从任何一个开始淡出鼠标移开时的不透明度。

但是如何以任何方式为突出显示颜色设置动画呢？

【问题讨论】：

您必须首先拉出该控件的样式模板，然后您可以使用彩色动画情节提要完成其余部分。

标签： c# wpf xaml animated

【解决方案1】：

试试这个，故事板中的 ColorAnimation 元素就是您想要玩的东西。我已将其设置为快速加速（0.5 秒）但缓慢淡出（2 秒），以便您看到它。

<ListView>
    <ListView.Resources>
        <Style TargetType="{x:Type ListViewItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
                            <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsMouseOver" Value="True"/>
                                </MultiTrigger.Conditions>
                                <MultiTrigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Bd" Storyboard.TargetProperty="Background.Color" To="{x:Static SystemColors.HighlightColor}" Duration="00:00:00.5" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </MultiTrigger.EnterActions>
                                <MultiTrigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Bd" Storyboard.TargetProperty="Background.Color" To="Transparent" Duration="00:00:02" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </MultiTrigger.ExitActions>
                                <Setter Property="Background" TargetName="Bd" Value="Transparent"/>
                                <Setter Property="BorderBrush" TargetName="Bd" Value="Transparent"/>
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="Selector.IsSelectionActive" Value="False"/>
                                    <Condition Property="IsSelected" Value="True"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" TargetName="Bd" Value="#3DDADADA"/>
                                <Setter Property="BorderBrush" TargetName="Bd" Value="#FFDADADA"/>
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="Selector.IsSelectionActive" Value="True"/>
                                    <Condition Property="IsSelected" Value="True"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" TargetName="Bd" Value="#3D26A0DA"/>
                                <Setter Property="BorderBrush" TargetName="Bd" Value="#FF26A0DA"/>
                            </MultiTrigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="TextElement.Foreground" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListView.Resources>
    <ListView.Items>
        <ListViewItem>
            <TextBlock Text="Item 1" />
        </ListViewItem>
        <ListViewItem>
            <TextBlock Text="Item 2" />
        </ListViewItem>
        <ListViewItem>
            <TextBlock Text="Item 3" />
        </ListViewItem>
        <ListViewItem>
            <TextBlock Text="Item 4" />
        </ListViewItem>
        <ListViewItem>
            <TextBlock Text="Item 5" />
        </ListViewItem>
    </ListView.Items>
</ListView>

【讨论】：

谢谢！正是我想要的。
不客气。如果您好奇，我创建了一个 ListView，其中包含一个 ListViewItem，然后在 VS2013 文档大纲窗口中右键单击 ListViewItem。从弹出菜单中，我选择了“编辑模板”->“编辑副本...”。从弹出的“创建样式资源”对话框中，我选择了键：“应用到所有”并定义在：“本文档-> 窗口”。然后，我摆脱了样式中除模板之外的所有内容，将样式移至 ListView（因此它是自包含的）并修改了 IsMouseOver MultiTrigger。
不知道你能做到！这将节省我很多时间！感谢您的提示
很高兴它很有用。就像那句老话：人生火，日暖。放火烧一个人，他的余生都会保持温暖......当然，钓鱼版本也适用。