首页 文章

使用故事板动画进行鼠标悬停和WPF ListBoxItems中的选择

提问于
浏览
4

我试图将一些鼠标悬停效果应用到 . 当我使用简单的 Setter 来更改鼠标悬停/选择时的背景颜色时,一切正常,但我认为如果它在状态之间进行动画处理会更好看,所以我将 Setter s切换为进入/退出 Storyboard s . 这一切都很好地工作(鼠标悬停动画输入和输出,选择动画输入和输出),但一旦选择了某些内容然后被取消,它将永远不会再次执行鼠标悬停效果 .

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

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

我've made the exit animations fade to a non-black color so you can see that the it'在 IsSelected 退出故事板后卡住了 .

有任何想法吗?

1 回答

  • 13

    Storyboard的默认行为是继续将属性值设置为动画的最后一帧的值 . 请参见Animation Tips and Tricks,尤其是"Can't Change the Value of a Property after Animating it"部分 . 你永远不会停止故事板,所以最终它们都在运行,无论最后一个声明是设置最终值 .

    您可以将故事板的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>
    

相关问题