title: Bind animations to ViewModel property
body: <p>I've got a "flip card"-style animation that works just fine. On one side, it has a button that, when clicked, triggers the animation "FlipOpen":</p>
  
  <pre><code>&lt;Button Content="click me" Height="130"&gt;
  &lt;Button.Triggers&gt;
      &lt;EventTrigger RoutedEvent="Button.Click" &gt;
          &lt;BeginStoryboard  Storyboard="{StaticResource FlipOpen}"&gt;
          &lt;/BeginStoryboard&gt;
      &lt;/EventTrigger&gt;
  &lt;/Button.Triggers&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>    &lt;Storyboard x:Key="FlipOpen"&gt;
          &lt;DoubleAnimation Duration="00:00:0.5" Storyboard.TargetProperty="RenderTransform.ScaleX" From="-1" To="1" Storyboard.TargetName="Back"/&gt;
          &lt;DoubleAnimation Duration="00:00:0.5" Storyboard.TargetProperty="RenderTransform.ScaleX" From="1" To="-1" Storyboard.TargetName="Front"/&gt;
      &lt;/Storyboard&gt;
  
      &lt;Storyboard x:Key="FlipClose"&gt;
          &lt;DoubleAnimation Duration="00:00:0.5" Storyboard.TargetProperty="RenderTransform.ScaleX" From="1" To="-1" Storyboard.TargetName="Back"/&gt;
          &lt;DoubleAnimation Duration="00:00:0.5" Storyboard.TargetProperty="RenderTransform.ScaleX" From="-1" To="1" Storyboard.TargetName="Front"/&gt;
      &lt;/Storyboard&gt;
  </code></pre>
  
  <p>I would like to bind the animation to a boolean property on my ViewModel and I have tried to use DataTriggers: </p>
  
  <p>a) define a style:</p>
  
  <pre><code>&lt;Style x:Key="myStyle"&gt;
  &lt;Style.Triggers&gt;
      &lt;DataTrigger Binding="{Binding FlipTheCard}" Value="true"&gt;
          &lt;DataTrigger.EnterActions&gt;
              &lt;BeginStoryboard Storyboard="{StaticResource FlipOpen}"/&gt;
          &lt;/DataTrigger.EnterActions&gt;
      &lt;/DataTrigger&gt;
      &lt;DataTrigger Binding="{Binding FlipTheCard}" Value="false"&gt;
          &lt;DataTrigger.EnterActions&gt;
              &lt;BeginStoryboard Storyboard="{StaticResource FlipClose}"/&gt;
          &lt;/DataTrigger.EnterActions&gt;
      &lt;/DataTrigger&gt;
  &lt;/Style.Triggers&gt;
  </code></pre>
  
  <p></p>
  
  <p>b) apply it to both Grid-Containers that contain the front and back:</p>
  
  <pre><code>&lt;Grid RenderTransformOrigin="0.5,0.5" x:Name="Back" Opacity="0" Style="{StaticResource myStyle}"&gt;
  ...
  &lt;/Grid&gt;
  </code></pre>
  
  <p>c) don't start the animation on button click, but bind a command that toggles the boolean to the button:</p>
  
  <pre><code>&lt;Button Content="click me!" Command="{Binding ToggleFlipCard}" Height="130"&gt;
  </code></pre>
  
  <p>However, this results in an exception ("A storyboard-structure within a Style can not have a TargetName. Remove the TargetName"). </p>
  
  <p><strong>What am I doing wrong here? How can I bind these animations to a boolean property on my ViewModel?</strong></p>
  
  <p>Thank you for any help!</p>