wpf数据绑定数据触发器为矩形设置动画

Question

我正在使用 MVVM，因此我需要将一个矩形绑定到一个属性，该属性最终会对其进行动画处理。 我发现很少solutions 并试图复制他们的方法，但故事范围没有发挥作用 我包括我的源代码

<Rectangle x:Name="RectangleCompleted" HorizontalAlignment="Left" Height="50" Margin="440,178,0,0" VerticalAlignment="Top" Width="100" Stroke="#FF0BB3AE" StrokeThickness="5"           RadiusX="8" RadiusY="7" >   

<i:Interaction.Triggers>
    <ei:DataTrigger Binding="{Binding Path=Animation}" Value="ON" Comparison="Equal">
      <ei:ControlStoryboardAction
      Storyboard="{StaticResource MyAnimation}" ControlStoryboardOption="Play"/>
   </ei:DataTrigger>
</i:Interaction.Triggers>

<Rectangle.Effect>
   <DropShadowEffect RenderingBias="Quality" ShadowDepth="3" Color="#FFD2D6D8"/>
</Rectangle.Effect>
    <Rectangle.Fill>
       <SolidColorBrush Color="#FFE7F4F6"/>
   </Rectangle.Fill>
</Rectangle>

<Window.Resources>        
   <Storyboard x:Key="MyAnimation">
      <DoubleAnimation
       Storyboard.TargetName="RectangleCompleted"
       Storyboard.TargetProperty="Opacity"
       From="0"
       To="1"
       RepeatBehavior="Forever"
       AutoReverse="True"/>
  </Storyboard>
</Window.Resources>

Answer 1

您的Animation 属性是bool 还是string？如果它是布尔值，您需要在触发器中检查 True 或 False 的值。如果它是一个字符串，那么你应该对你所得到的没问题。如果您的 INPC 实现和 Animation 属性是正确的，这应该可以正常工作。

我已经将一个示例与您发布的代码放在一起，您应该会看到它运行良好。 Download Link

我做了两个小改动。我添加了一个按钮来切换动画以启动或停止并将整个内容放在StackPanel 中。其次，我将Animation 属性设置为布尔值，因此只需使用触发器来检查“真”或“假”，而不是您要检查的“开”值。

<StackPanel x:Name="LayoutRoot">
  <Rectangle x:Name="RectangleCompleted"
              Width="100"
              Height="50"
              RadiusX="8"
              RadiusY="7"
              Stroke="#FF0BB3AE"
              StrokeThickness="5">
    <Rectangle.Resources>
      <Storyboard x:Key="MyAnimation">
        <DoubleAnimation AutoReverse="True"
                          From="0"
                          RepeatBehavior="Forever"
                          Storyboard.TargetName="RectangleCompleted"
                          Storyboard.TargetProperty="Opacity"
                          To="1" />
      </Storyboard>
    </Rectangle.Resources>
    <i:Interaction.Triggers>
      <ei:DataTrigger Binding="{Binding Path=Animation}"
                      Comparison="Equal"
                      Value="True">
        <ei:ControlStoryboardAction ControlStoryboardOption="Play"
                                    Storyboard="{StaticResource MyAnimation}" />
      </ei:DataTrigger>
      <ei:DataTrigger Binding="{Binding Path=Animation}"
                      Comparison="Equal"
                      Value="False">
        <ei:ControlStoryboardAction ControlStoryboardOption="Stop"
                                    Storyboard="{StaticResource MyAnimation}" />
      </ei:DataTrigger>
    </i:Interaction.Triggers>
    <Rectangle.Effect>
      <DropShadowEffect RenderingBias="Quality"
                        ShadowDepth="3"
                        Color="#FFD2D6D8" />
    </Rectangle.Effect>
    <Rectangle.Fill>
      <SolidColorBrush Color="#FFE7F4F6" />
    </Rectangle.Fill>
  </Rectangle>
  <Button Command="{Binding ToggleCommand}"
          Content="Toggle Animation" />
</StackPanel>

ToggleCommand 所做的只是：

ToggleCommand = new RelayCommand(() => Animation = !Animation);

更新：

如果您只想在窗口加载时触发动画，您只需要：

<Window.Resources>
  <Storyboard x:Key="MyAnimation">
    <DoubleAnimation AutoReverse="True"
                      From="0"
                      RepeatBehavior="Forever"
                      Storyboard.TargetName="RectangleCompleted"
                      Storyboard.TargetProperty="Opacity"
                      To="1" />
  </Storyboard>
</Window.Resources>
<Window.Triggers>
  <EventTrigger RoutedEvent="FrameworkElement.Loaded">
    <BeginStoryboard Storyboard="{StaticResource MyAnimation}" />
  </EventTrigger>
</Window.Triggers>