代码之家  ›  专栏  ›  技术社区  ›  Alconja

在WPF ListBoxItems中为鼠标悬停和选择使用序列图像板动画

  •  4
  • Alconja  · 技术社区  · 14 年前

    我有一个WPF应用程序,它有一个列表框,我正在尝试应用一些鼠标悬停效果。当我使用简单的 Setter s来更改mouseover/selection上的背景色,但我认为如果在不同状态之间设置动画效果会更好,所以我切换了 Storyboard s、 这一切都很好地开始工作(mouseover动画输入和输出,选择动画输入和输出),但一旦选定的东西,然后成为deselect,它将永远不会再做mouseover效果。

    下面是显示问题的最小代码示例:

    <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 退出情节提要。

    有什么想法吗?

    1 回复  |  直到 14 年前
        1
  •  13
  •   Quartermeister    14 年前

    情节提要的默认行为是继续将属性值设置为动画最后一帧的值。看到了吗 Animation Tips and Tricks ,尤其是“设置属性动画后无法更改属性值”部分。你永远不会停止故事板,所以最终他们都在运行,无论最后一个被宣布是设置最终值。

    你可以设置 FillBehavior

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