Использование анимации раскадровки для наведения мыши и выделения в WPF ListBoxItems

Question

У меня есть приложение WPF со списком, к которому я пытаюсь применить некоторые эффекты наведения мыши.Все работает нормально, когда я использую простые Setter s для изменения цвета фона при наведении курсора / выделении, но я подумал, что это будет выглядеть лучше, если он анимируется между состояниями, поэтому я переключил Setter s для ввода / вывода Storyboards.Сначала все работает хорошо (анимация при наведении мыши на вход и выход, на выбор анимация на вход и выход), но как только что-то было выделено, а затем отменено, оно никогда больше не будет производить эффект наведения мыши.

Вот минимальный пример кодачтобы показать проблему:

<Window x:Class="WpfTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="500" Width="500">
  <Window.Resources>
    <Style x:Key="ListboxItemStyle" TargetType="{x:Type ListBoxItem}">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type ListBoxItem}">
            <Border x:Name="border" BorderThickness="1" Height="50" Background="#000">
              <ContentPresenter />
            </Border>
            <ControlTemplate.Triggers>
              <MultiTrigger>
                <MultiTrigger.Conditions>
                  <Condition Property="IsMouseOver" Value="True" />
                  <Condition Property="IsSelected" Value="False" />
                </MultiTrigger.Conditions>
                <MultiTrigger.EnterActions>
                  <BeginStoryboard>
                    <Storyboard>
                      <ColorAnimation Duration="0:0:0.15" Storyboard.TargetName="border"
                          Storyboard.TargetProperty="Background.Color" To="#00F" />
                    </Storyboard>
                  </BeginStoryboard>
                </MultiTrigger.EnterActions>
                <MultiTrigger.ExitActions>
                  <BeginStoryboard>
                    <Storyboard>
                      <ColorAnimation Duration="0:0:0.3" Storyboard.TargetName="border"
                          Storyboard.TargetProperty="Background.Color" To="#008" />
                    </Storyboard>
                  </BeginStoryboard>
                </MultiTrigger.ExitActions>
              </MultiTrigger>
              <Trigger Property="IsSelected" Value="True">
                <Trigger.EnterActions>
                  <BeginStoryboard>
                    <Storyboard>
                      <ColorAnimation Duration="0:0:0.15" Storyboard.TargetName="border"
                          Storyboard.TargetProperty="Background.Color" To="#F00" />
                    </Storyboard>
                  </BeginStoryboard>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                  <BeginStoryboard>
                    <Storyboard>
                      <ColorAnimation Duration="0:0:0.3" Storyboard.TargetName="border"
                          Storyboard.TargetProperty="Background.Color" To="#800" />
                    </Storyboard>
                  </BeginStoryboard>
                </Trigger.ExitActions>
              </Trigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </Window.Resources>
  <Grid>
    <ListBox x:Name="ConnectedDevicesListBox"
        ItemContainerStyle="{DynamicResource ListboxItemStyle}" >
      <ListItem/>
      <ListItem/>
      <ListItem/>
      <ListItem/>
      <ListItem/>
      <ListItem/>
      <ListItem/>
      <ListItem/>
    </ListBox>
  </Grid>
</Window>

Я заставил анимацию выхода исчезать до не черного цвета, чтобы вы могли видеть, что она застревает после IsSelected раскадровки выхода.

Есть идеи?

Answer 1

Поворотом раскадровки по умолчанию является продолжение установки значения свойства в значение из последнего кадра анимации. См. Советы и рекомендации по анимации , особенно раздел «Не удается изменить значение свойства после его анимации». Вы никогда не останавливаете раскадровки, поэтому в конечном итоге все они работают, и в зависимости от того, какой из них объявлен последним, устанавливается окончательное значение.

Вы можете установить FillBehavior Раскадровок на Стоп, чтобы Раскадровка прекратила устанавливать значение после его завершения. Я думаю, что вы захотите сделать это на раскадровках ExitActions, но не на раскадровках EnterAction, если вы не установите цвет фона с помощью обычного триггера. Примерно так:

<MultiTrigger>
    <MultiTrigger.Conditions>
        <Condition Property="IsMouseOver" Value="True" />
        <Condition Property="IsSelected" Value="False" />
    </MultiTrigger.Conditions>
    <MultiTrigger.EnterActions>
        <BeginStoryboard>
            <Storyboard>
                <ColorAnimation Duration="0:0:0.15"
                    Storyboard.TargetName="border"
                    Storyboard.TargetProperty="Background.Color" To="#00F" />
            </Storyboard>
        </BeginStoryboard>
    </MultiTrigger.EnterActions>
    <MultiTrigger.ExitActions>
        <BeginStoryboard>
            <Storyboard FillBehavior="Stop">
                <ColorAnimation Duration="0:0:0.3"
                    Storyboard.TargetName="border"
                    Storyboard.TargetProperty="Background.Color" To="#008" />
            </Storyboard>
        </BeginStoryboard>
    </MultiTrigger.ExitActions>
</MultiTrigger>
<Trigger Property="IsSelected" Value="True">
    <Trigger.EnterActions>
        <BeginStoryboard>
            <Storyboard>
                <ColorAnimation Duration="0:0:0.15"
                    Storyboard.TargetName="border"
                    Storyboard.TargetProperty="Background.Color" To="#F00" />
            </Storyboard>
        </BeginStoryboard>
    </Trigger.EnterActions>
    <Trigger.ExitActions>
        <BeginStoryboard>
            <Storyboard FillBehavior="Stop">
                <ColorAnimation Duration="0:0:0.3"
                    Storyboard.TargetName="border"
                    Storyboard.TargetProperty="Background.Color" To="#800" />
            </Storyboard>
        </BeginStoryboard>
    </Trigger.ExitActions>
</Trigger>