title: Begin Storyboard based on binding in WPF
body: <p>I am trying to create a Windows 10 like hamburger button in my wpf application. All good for now but I cannot find a way to start the animation without using code behind. This is my XAML so far:</p>
  
  <pre><code>&lt;UserControl.Resources&gt;
      &lt;Storyboard x:Key="OpenMenu"&gt;
          &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"
                                         Storyboard.TargetName="rectangle"&gt;
              &lt;EasingDoubleKeyFrame KeyTime="0"
                                    Value="0" /&gt;
              &lt;EasingDoubleKeyFrame KeyTime="0:0:0.3"
                                    Value="43.5" /&gt;
          &lt;/DoubleAnimationUsingKeyFrames&gt;
          &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"
                                         Storyboard.TargetName="rectangle1"&gt;
              &lt;EasingDoubleKeyFrame KeyTime="0"
                                    Value="0" /&gt;
              &lt;EasingDoubleKeyFrame KeyTime="0:0:0.3"
                                    Value="-43.5" /&gt;
          &lt;/DoubleAnimationUsingKeyFrames&gt;
          &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                         Storyboard.TargetName="rectangle2"&gt;
              &lt;EasingDoubleKeyFrame KeyTime="0"
                                    Value="1" /&gt;
              &lt;EasingDoubleKeyFrame KeyTime="0:0:0.3"
                                    Value="0" /&gt;
          &lt;/DoubleAnimationUsingKeyFrames&gt;
          &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)"
                                         Storyboard.TargetName="GridMenu"&gt;
              &lt;EasingDoubleKeyFrame KeyTime="0"
                                    Value="40" /&gt;
              &lt;EasingDoubleKeyFrame KeyTime="0:0:0.3"
                                    Value="200" /&gt;
          &lt;/DoubleAnimationUsingKeyFrames&gt;
          &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Opacity)"
                                         Storyboard.TargetName="Title"&gt;
              &lt;EasingDoubleKeyFrame KeyTime="0"
                                    Value="0" /&gt;
              &lt;EasingDoubleKeyFrame KeyTime="0:0:0.3"
                                    Value="1" /&gt;
          &lt;/DoubleAnimationUsingKeyFrames&gt;
      &lt;/Storyboard&gt;
      &lt;Storyboard x:Key="CloseMenu"&gt;
          &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"
                                         Storyboard.TargetName="rectangle"&gt;
              &lt;EasingDoubleKeyFrame KeyTime="0"
                                    Value="43.5" /&gt;
              &lt;EasingDoubleKeyFrame KeyTime="0:0:0.3"
                                    Value="0" /&gt;
          &lt;/DoubleAnimationUsingKeyFrames&gt;
          &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"
                                         Storyboard.TargetName="rectangle1"&gt;
              &lt;EasingDoubleKeyFrame KeyTime="0"
                                    Value="-43.5" /&gt;
              &lt;EasingDoubleKeyFrame KeyTime="0:0:0.3"
                                    Value="0" /&gt;
          &lt;/DoubleAnimationUsingKeyFrames&gt;
          &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                         Storyboard.TargetName="rectangle2"&gt;
              &lt;EasingDoubleKeyFrame KeyTime="0"
                                    Value="0" /&gt;
              &lt;EasingDoubleKeyFrame KeyTime="0:0:0.3"
                                    Value="1" /&gt;
          &lt;/DoubleAnimationUsingKeyFrames&gt;
          &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)"
                                         Storyboard.TargetName="GridMenu"&gt;
              &lt;EasingDoubleKeyFrame KeyTime="0"
                                    Value="200" /&gt;
              &lt;EasingDoubleKeyFrame KeyTime="0:0:0.3"
                                    Value="40" /&gt;
          &lt;/DoubleAnimationUsingKeyFrames&gt;
          &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Opacity)"
                                         Storyboard.TargetName="Title"&gt;
              &lt;EasingDoubleKeyFrame KeyTime="0"
                                    Value="1" /&gt;
              &lt;EasingDoubleKeyFrame KeyTime="0:0:0.3"
                                    Value="0" /&gt;
          &lt;/DoubleAnimationUsingKeyFrames&gt;
      &lt;/Storyboard&gt;
  &lt;/UserControl.Resources&gt;
  &lt;Grid Name="GridMenu"
        Width="40"
        HorizontalAlignment="Left"
        Background="LightGray"&gt;
      &lt;Grid.ColumnDefinitions&gt;
          &lt;ColumnDefinition Width="*" /&gt;
          &lt;ColumnDefinition Width="40" /&gt;
      &lt;/Grid.ColumnDefinitions&gt;
      &lt;Grid.RowDefinitions&gt;
          &lt;RowDefinition Height="40" /&gt;
          &lt;RowDefinition Height="*" /&gt;
      &lt;/Grid.RowDefinitions&gt;
      &lt;Grid Height="40"
            Background="White"
            VerticalAlignment="Top"&gt;
          &lt;TextBlock Text="Tabs"
                     Name="Title"
                     Opacity="0"
                     FontWeight="Bold"
                     HorizontalAlignment="Center"
                     VerticalAlignment="Center"
                     FontFamily="Roboto Bk"
                     FontSize="17" /&gt;
      &lt;/Grid&gt;
      &lt;ToggleButton x:Name="ButtonMenu"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Top"
                    Grid.Column="1"
                    IsChecked="{Binding Expanded}"
                    BorderBrush="{x:Null}"
                    Width="40"
                    Height="40"
                    Click="ButtonMenu_Click"&gt;
          &lt;Grid HorizontalAlignment="Center"
                VerticalAlignment="Center"&gt;
              &lt;Rectangle x:Name="rectangle"
                         Width="30"
                         Height="5"
                         Margin="0 0 0 0"
                         Fill="#FF515151"
                         HorizontalAlignment="Center"
                         VerticalAlignment="Top"
                         RenderTransformOrigin="0.1,1.5"&gt;
                  &lt;Rectangle.RenderTransform&gt;
                      &lt;TransformGroup&gt;
                          &lt;ScaleTransform /&gt;
                          &lt;SkewTransform /&gt;
                          &lt;RotateTransform /&gt;
                          &lt;TranslateTransform /&gt;
                      &lt;/TransformGroup&gt;
                  &lt;/Rectangle.RenderTransform&gt;
              &lt;/Rectangle&gt;
              &lt;Rectangle x:Name="rectangle1"
                         Width="30"
                         Height="5"
                         Margin="0 20 0 0 "
                         Fill="#FF515151"
                         HorizontalAlignment="Center"
                         VerticalAlignment="Top"
                         RenderTransformOrigin="0.1,-0.6"&gt;
                  &lt;Rectangle.RenderTransform&gt;
                      &lt;TransformGroup&gt;
                          &lt;ScaleTransform /&gt;
                          &lt;SkewTransform /&gt;
                          &lt;RotateTransform /&gt;
                          &lt;TranslateTransform /&gt;
                      &lt;/TransformGroup&gt;
                  &lt;/Rectangle.RenderTransform&gt;
              &lt;/Rectangle&gt;
              &lt;Rectangle x:Name="rectangle2"
                         Width="30"
                         Height="5"
                         Margin="0 10 0 0"
                         Fill="#FF515151"
                         HorizontalAlignment="Center"
                         VerticalAlignment="Top" /&gt;
          &lt;/Grid&gt;
      &lt;/ToggleButton&gt;
      &lt;ListView ItemsSource="{Binding Tabs}"
                Grid.Row="1"
                Background="Transparent"
                DisplayMemberPath="ControlName" /&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>But I can only do the animation using the click event</p>
  
  <pre><code>bool stateClosed = true;
  
      private void ButtonMenu_Click(object sender, RoutedEventArgs e)
      {
          if (stateClosed)
          {
              Storyboard sb = FindResource("OpenMenu") as Storyboard;
              sb.Begin();
          }
          else
          {
              Storyboard sb = FindResource("CloseMenu") as Storyboard;
              sb.Begin();
          }
          stateClosed = !stateClosed;
      }
  </code></pre>
  
  <p>Is there any way I could bind to any property in my ViewModel or use triggers to achieve this?</p>