奇怪的ColorAnimation和MultiTrigger在ListView上的行为

Question

我有个列表。我想实现这个行为：

1. 非点击项的初始颜色为灰色。
2. 当鼠标在非单击的项上时，项目从灰色更改为黑色。当鼠标移出时，该项目将其颜色更改为灰色
3. 单击项目时，它将更改为红色
4. 当鼠标在单击的项目上时，项目仍然是红色的。

以下是我如何努力实现它：

<Style TargetType="{x:Type ListViewItem}" x:Key="PackageListViewItemStyle">
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="Padding" Value="1,1" />

    <Setter Property="HorizontalContentAlignment"
                Value="{Binding HorizontalContentAlignment,
                                RelativeSource={RelativeSource FindAncestor,
                                                                AncestorLevel=1,
                                                                AncestorType={x:Type ItemsControl}}}" />
    <Setter Property="VerticalContentAlignment"
                Value="{Binding VerticalContentAlignment,
                                RelativeSource={RelativeSource FindAncestor,
                                                                AncestorLevel=1,
                                                                AncestorType={x:Type ItemsControl}}}" />
    <Setter Property="Margin" Value="0" />
    <Setter Property="Background" Value="Gray" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="FontSize" Value="16" />
    <Setter Property="Foreground" Value="{StaticResource PackageListItemPrimaryForegroundColorBrush}" />
    <Setter Property="FocusVisualStyle">
        <Setter.Value>
            <Style>
                <Setter Property="Control.Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <Rectangle Margin="2"
                                SnapsToDevicePixels="True"
                                Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
                                StrokeDashArray="1 2"
                                StrokeThickness="1" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListViewItem}">
                <Border x:Name="Bd"
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Padding="{TemplateBinding Padding}"
                    SnapsToDevicePixels="True">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                Content="{TemplateBinding Content}"
                                ContentStringFormat="{TemplateBinding ContentStringFormat}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="true">
                        <Setter TargetName="Bd" Property="Background" Value="Red" />
                        <Setter TargetName="Bd" Property="BorderThickness" Value="2" />
                    </Trigger>
                    <MultiTrigger>
                        <!-- mouse hovers -->
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected" Value="False" />
                            <Condition Property="IsMouseOver" Value="True" />
                        </MultiTrigger.Conditions>
                        <MultiTrigger.EnterActions>
                            <BeginStoryboard Name="glowsb">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="Bd"
                                                    From="Gray" To="Black"
                                                    Duration="0:0:0.9"
                                                    AutoReverse="False"
                                                    Storyboard.TargetProperty="Background.Color"/>
                                </Storyboard>   
                                </BeginStoryboard>
                        </MultiTrigger.EnterActions>
                        <MultiTrigger.ExitActions>
                            <BeginStoryboard Name="glowsbback">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="Bd"
                                                    From="Black"
                                                    To="Gray"
                                                    Duration="0:0:0.9"
                                                    AutoReverse="False"
                                                    Storyboard.TargetProperty="Background.Color"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </MultiTrigger.ExitActions>
                    </MultiTrigger>
                    <Trigger Property="IsEnabled"
                        Value="False">
                        <Setter TargetName="Bd"
                        Property="TextElement.Foreground"
                        Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

如您所见，动画仅用于mouseOver/mouseLeave事件。

结果:动画工作如预期，但当我点击一个项目，它变成灰色，而不是红色。

我想格雷来自于ExitAction动画"To“属性。

如果我像这样改变它：

<MultiTrigger.ExitActions>
 <BeginStoryboard Name="glowsbback">
  <Storyboard>
   <ColorAnimation Storyboard.TargetName="Bd"
    From="Black" To="Green" Duration="0:0:0.9" AutoReverse="False"                                                        
    Storyboard.TargetProperty="Background.Color"/>
  </Storyboard>
 </BeginStoryboard>
</MultiTrigger.ExitActions>

然后单击的项目变成绿色。

好的，让我们去掉"To“属性：

<MultiTrigger.ExitActions>
 <BeginStoryboard Name="glowsbback">
  <Storyboard>
   <ColorAnimation Storyboard.TargetName="Bd"
    From="Black" Duration="0:0:0.9" AutoReverse="False"                                                        
    Storyboard.TargetProperty="Background.Color"/>
  </Storyboard>
 </BeginStoryboard>
</MultiTrigger.ExitActions>

很酷，点击的项目会像预期的那样变成红色，但是它会变成红色动画，而我把它放在没有动画的Setter中：

<Trigger Property="IsSelected" Value="true">
    <Setter TargetName="Bd" Property="Background" Value="Red" />
    <Setter TargetName="Bd" Property="BorderThickness" Value="2" />
</Trigger>

我错过了什么？

Answer 1

我不知道这是否是解决你问题的最优雅的方法。

在WPF中，Triggers按照声明的顺序进行处理。

另见In WPF, does the order of Triggers matter?

因此，您可以将"IsSelected"-Trigger放在MultiTrigger之后，并使用StopStoryboard停止该动画。

结果：

...
<ControlTemplate.Triggers>
    <MultiTrigger>
        <!-- mouse hovers -->
        <MultiTrigger.Conditions>
            <Condition Property="IsSelected" Value="False" />
            <Condition Property="IsMouseOver" Value="True" />
        </MultiTrigger.Conditions>
        <MultiTrigger.EnterActions>
            <BeginStoryboard Name="glowsb">
                <Storyboard>
                    <ColorAnimation Storyboard.TargetName="Bd"
                            From="Gray" To="Black"
                            Duration="0:0:0.9"
                            AutoReverse="False"
                            Storyboard.TargetProperty="Background.Color"/>
                </Storyboard>
            </BeginStoryboard>
        </MultiTrigger.EnterActions>
        <MultiTrigger.ExitActions>
            <BeginStoryboard Name="glowsbback">
                <Storyboard>
                    <ColorAnimation Storyboard.TargetName="Bd"
                            From="Black"
                            Duration="0:0:0.9"
                            AutoReverse="False"
                            Storyboard.TargetProperty="Background.Color"/>
                </Storyboard>
            </BeginStoryboard>
        </MultiTrigger.ExitActions>
    </MultiTrigger>
    <Trigger Property="IsSelected" Value="true">
        <Trigger.EnterActions>
            <StopStoryboard BeginStoryboardName="glowsbback" />
        </Trigger.EnterActions>
        <Setter TargetName="Bd" Property="Background" Value="Red" />
        <Setter TargetName="Bd" Property="BorderThickness" Value="2" />
    </Trigger>
    <Trigger Property="IsEnabled"
             Value="False">
        <Setter TargetName="Bd"
                Property="TextElement.Foreground"
                Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
    </Trigger>
</ControlTemplate.Triggers>
...