Странное поведение 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.

Результат: анимация работает должным образом, но когда я щелкаю элемент, он становится Серым вместо Красный .

Я понял, что здесь Grey происходит от Свойство ExitAction Animation "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>

, тогдавыбранный элемент становится зеленым .

Хорошо, давайте избавимся от свойства «Кому»:

<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 обрабатываются в порядке, в котором они объявлены.
См. Также В WPF, имеет ли значение порядок триггеров?

Поэтому вы можете поместить свой «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>
...