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？如果它是一个bool你需要触发器中的值检查True或False。如果它是一个字符串，那么你应该没问题。如果您的INPC实现和Animation属性正确，这应该可以正常工作。

我已经将您发布的代码放在一个示例中，您应该会看到它正常工作。 Download Link

我做了两个小改动。我添加了一个按钮，可以将动画切换为开始或停止，并将整个内容放在StackPanel中。其次，我将Animation属性设置为bool，因此只需要触发器检查＆＃34; True＆＃34;或＆＃34;错误＆＃34;而不是＆＃34; ON＆＃34;你要检查的价值。

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

wpf数据绑定datatrigger为矩形设置动画

1 个答案: