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

时间:2018-08-21 11:03:31

标签: wpf animation datatemplate itemscontrol

下面是我用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>

1 个答案:

答案 0 :(得分:0)

您的动画情节提要板正在堆积。您需要在触发器的ExitActions中将其删除。为您的BeginStoryboard实例命名,并在RemoveStoryboard中使用ExitActions清除情节提要,并允许另一个情节提要起作用。例如:

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