WPF 动画在项目控件中不起作用

Question

下面是我用 DataTemplate 定义的 ItemsControl。我遇到的麻烦是让动画播放。在当前形式中，当您将鼠标悬停在每个项目上时，复选框的显示正确并且边框变为蓝色，但当您将鼠标移出时边框保持蓝色。重新排序触发器集合会使不同的操作起作用或中断，如果我删除动画并将它们替换为设置器，那么事情就会按预期进行。我在这里错过了什么？非常感谢任何帮助 - 谢谢。

<ItemsControl ItemsSource="{Binding ToolBarsBackingStore}">
  <ItemsControl.ItemTemplate>
    <DataTemplate>
      <Border Name="OutterBorder"
              BorderThickness="1"
              CornerRadius="5"
              Background="{StaticResource StaticBackgroundBrush}"
              HorizontalAlignment="Center"
              VerticalAlignment="Center">

        <Border.BorderBrush>
          <SolidColorBrush x:Name="HighlightBorder"
                           Color="{StaticResource StaticBackground}" />
        </Border.BorderBrush>

      <StackPanel Orientation="Horizontal"
                  Height="16">

        <CheckBox Name="ShowCheck"
                  Style="{StaticResource ToolTrayMenuCheckBoxStyle}"
                  Margin="3 0 0 0"
                  IsHitTestVisible="False"
                  IsChecked="{Binding Path=Visibility,
                  Converter={StaticResource VisibilityToCheckedConverter}}">

         <CheckBox.Foreground>
           <SolidColorBrush x:Name="CheckColor"
                            Color="{StaticResource StaticBackground}" />
         </CheckBox.Foreground>
       </CheckBox>

       <TextBlock Width="80"
                  Margin="10 0 0 0"
                  Text="{Binding Path=Name,
                  Mode=OneTime}"
                  TextAlignment="Left"
                  TextTrimming="CharacterEllipsis"
                  SnapsToDevicePixels="True"
                  Foreground="White" />
     </StackPanel>
   </Border>

  <DataTemplate.Triggers>
    <Trigger SourceName="ShowCheck"
             Property="IsChecked"
             Value="True">

      <Setter TargetName="ShowCheck"
              Property="Foreground"
              Value="#777777" />
    </Trigger> 

    <MultiDataTrigger>
      <MultiDataTrigger.Conditions>
        <Condition Binding="{Binding Path=IsMouseOver,
                             ElementName=OutterBorder}"
                             Value="False"/>
        <Condition Binding="{Binding Path=IsChecked,
                                     ElementName=ShowCheck}"
                                     Value="True"/>
     </MultiDataTrigger.Conditions>

     <MultiDataTrigger.EnterActions>
       <BeginStoryboard>
         <Storyboard TargetName="HighlightBorder">
           <ColorAnimation Storyboard.TargetProperty="Color"
                           To="Black"
                           Duration="0:0:0.3" />
         </Storyboard>
       </BeginStoryboard>

       <BeginStoryboard>
         <Storyboard TargetName="CheckColor">
           <ColorAnimation Storyboard.TargetProperty="Color"
                           To="#777777"
                           Duration="0:0:0.3"/>
         </Storyboard>
       </BeginStoryboard>
     </MultiDataTrigger.EnterActions>
   </MultiDataTrigger>


   <MultiDataTrigger>
     <MultiDataTrigger.Conditions>

       <Condition Binding="{Binding Path=IsMouseOver,
                            ElementName=OutterBorder}"
                  Value="True"/>

       <Condition Binding="{Binding Path=IsChecked,
                                    ElementName=ShowCheck}"
                  Value="True" />
     </MultiDataTrigger.Conditions>

   <MultiDataTrigger.EnterActions>
     <BeginStoryboard>
       <Storyboard TargetName="HighlightBorder">
         <ColorAnimation Storyboard.TargetProperty="Color"
                         To="CornflowerBlue"
                         Duration="0:0:0.3"/> 
       </Storyboard>
     </BeginStoryboard>

     <BeginStoryboard>
       <Storyboard TargetName="CheckColor">
         <ColorAnimation Storyboard.TargetProperty="Color"
                         To="White"
                         Duration="0:0:0.3" />
       </Storyboard>
     </BeginStoryboard>
   </MultiDataTrigger.EnterActions>
 </MultiDataTrigger>


 <MultiDataTrigger>
   <MultiDataTrigger.Conditions>

     <Condition Binding="{Binding Path=IsMouseOver, 
                                  ElementName=OutterBorder}"
                Value="True"/>

     <Condition Binding="{Binding Path=IsChecked, 
                                  ElementName=ShowCheck}"
                Value="False"/>

   </MultiDataTrigger.Conditions>

   <MultiDataTrigger.EnterActions>
     <BeginStoryboard>
       <Storyboard TargetName="HighlightBorder">
         <ColorAnimation Storyboard.TargetProperty="Color"
                         To="CornflowerBlue"
                         Duration="0:0:0.3"/> 
       </Storyboard>
     </BeginStoryboard>
   </MultiDataTrigger.EnterActions>
 </MultiDataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

Answer 1

您的动画故事板堆积如山。您需要在触发器的 ExitActions 中删除它们。命名您的 BeginStoryboard 实例并在 ExitActions 中使用 RemoveStoryboard 来清除故事板并允许另一个故事板工作。例如：

<MultiDataTrigger>
  <MultiDataTrigger.Conditions>
    <Condition Binding="{Binding Path=IsMouseOver,
                         ElementName=OutterBorder}"
                         Value="False"/>
    <Condition Binding="{Binding Path=IsChecked,
                                 ElementName=ShowCheck}"
                                 Value="True"/>
 </MultiDataTrigger.Conditions>

 <MultiDataTrigger.EnterActions>

   <!-- Give BeginStoryboard a name -->
   <BeginStoryboard x:Name="MouseNotOverAndChecked">

     <Storyboard TargetName="HighlightBorder">
       <ColorAnimation Storyboard.TargetProperty="Color"
                       To="Black"
                       Duration="0:0:0.3" />
     </Storyboard>
   </BeginStoryboard>

   <BeginStoryboard>
     <Storyboard TargetName="CheckColor">
       <ColorAnimation Storyboard.TargetProperty="Color"
                       To="#777777"
                       Duration="0:0:0.3"/>
     </Storyboard>
   </BeginStoryboard>
 </MultiDataTrigger.EnterActions>

 <!-- Use the exit actions to remove the storyboard. Use the name given above -->
 <MultiDataTrigger.ExitActions>
     <RemoveStoryboard BeginStoryboardName="MouseNotOverAndChecked" />
 </MultiDataTrigger.ExitActions>

WPF 动画在项目控件中不起作用

WPF Animations Not Working In Items Control

wpf

animation

datatemplate

itemscontrol