title: Laggy animation on changing height of grid
body: <p>I am trying to create a Navigation Drawer by changing the width of Grid.</p>
  
  <p>XAML :</p>
  
  <pre><code>&lt;Grid x:Name="LayoutRoot" Width="900" Margin="0,0,0,0"&gt;
      &lt;!--&lt;Grid.ColumnDefinitions&gt;
          &lt;ColumnDefinition Width="400"/&gt;
          &lt;ColumnDefinition Width="500"/&gt;
      &lt;/Grid.ColumnDefinitions&gt;--&gt;
      &lt;toolkit:GestureService.GestureListener&gt;
          &lt;toolkit:GestureListener Flick="OnFlick"/&gt;
      &lt;/toolkit:GestureService.GestureListener&gt;
      &lt;StackPanel Orientation="Horizontal"&gt;
          &lt;!-- left panel... keep width as 0 when app starts--&gt;
          &lt;Grid Name="leftpanel" Width="400"&gt;
              &lt;StackPanel&gt;
                  &lt;Image 
                      Source="/Images/dp.png" 
                      Margin="0,40" 
                      x:Name="myimage" 
                      Tap="myimage_Tap" 
                      Height="120" 
                      Width="120" 
                      Stretch="Fill" 
                      RenderTransformOrigin="0.5, 0.5"&gt;
                      &lt;Image.Clip&gt;
                          &lt;EllipseGeometry
                                  Center="60,60"
                                  RadiusX="60"
                                  RadiusY="60" /&gt;
                      &lt;/Image.Clip&gt;
                      &lt;Image.RenderTransform&gt;
                          &lt;RotateTransform x:Name="rotateTransform"/&gt;
                      &lt;/Image.RenderTransform&gt;
                  &lt;/Image&gt;
                  &lt;TextBlock
                      Foreground="White"
                      Text="name"
                      HorizontalAlignment="Center"
                      Margin="0,-20,0,0"
                      FontWeight="ExtraBold"/&gt;
                  &lt;StackPanel 
                      Orientation="Horizontal" 
                      HorizontalAlignment="Center"
                      Margin="0,5"&gt;
                      &lt;Image Source="/Images/loc.png"
                             Height="30"
                             Width="30"/&gt;
  
                  &lt;/StackPanel&gt;
  
                  &lt;StackPanel 
                      Orientation="Horizontal" 
                      HorizontalAlignment="Left"
                      Margin="20,30,0,0"&gt;
                      &lt;Image Source="/Images/x.png"
                             Height="35"
                             Width="35"/&gt;
                      &lt;TextBlock
                      Foreground="White"
                      Text="text"
                          FontSize="35"
                          Margin="20,0"
                      HorizontalAlignment="Center"/&gt;
                  &lt;/StackPanel&gt;
                  &lt;StackPanel 
                      Orientation="Horizontal" 
                      HorizontalAlignment="Left"
                      Margin="20,20,0,0"
                      Name="x"&gt;
                      &lt;Image Source="/Images/x.png"
                             Height="35"
                             Width="35"/&gt;
                      &lt;TextBlock
                      Foreground="White"
                      Text="text"
                          FontSize="35"
                          Margin="20,0"
                      HorizontalAlignment="Center"/&gt;
                  &lt;/StackPanel&gt;
                  &lt;StackPanel 
                      Orientation="Horizontal" 
                      HorizontalAlignment="Left"
                      Margin="20,20,0,0"&gt;
                      &lt;Image Source="/Images/x.png"
                             Height="35"
                             Width="35"/&gt;
                      &lt;TextBlock
                      Foreground="White"
                      Text="Moments"
                          FontSize="35"
                          Margin="20,0"
                      HorizontalAlignment="Center"/&gt;
                  &lt;/StackPanel&gt;
                  &lt;StackPanel 
                      Orientation="Horizontal" 
                      HorizontalAlignment="Left"
                      Margin="20,20,0,0"&gt;
                      &lt;Image Source="/Images/x.png"
                             Height="35"
                             Width="35"/&gt;
                      &lt;TextBlock
                      Foreground="White"
                      Text="text"
                          FontSize="35"
                          Margin="20,0"
                      HorizontalAlignment="Center"/&gt;
                  &lt;/StackPanel&gt;
                  &lt;StackPanel 
                      Orientation="Horizontal" 
                      HorizontalAlignment="Left"
                      Margin="20,20,0,0"&gt;
                      &lt;Image Source="/Images/x.png"
                             Height="35"
                             Width="35"/&gt;
                      &lt;TextBlock
                      Foreground="White"
                      Text="x"
                          FontSize="35"
                          Margin="20,0"
                      HorizontalAlignment="Center"/&gt;
                  &lt;/StackPanel&gt;
                  &lt;StackPanel 
                      Orientation="Horizontal" 
                      HorizontalAlignment="Left"
                      Margin="20,20,0,0"&gt;
                      &lt;Image Source="/Images/x.png"
                             Height="35"
                             Width="35"/&gt;
                      &lt;TextBlock
                      Foreground="White"
                      Text="text"
                          FontSize="35"
                          Margin="20,0"
                      HorizontalAlignment="Center"/&gt;
                  &lt;/StackPanel&gt;
                  &lt;Line X1="0" X2="1"
                      Margin="0,20,0,0"
                      Stroke="White"
                      StrokeThickness="1"
                      Stretch="Fill"
                      VerticalAlignment="Center"/&gt;
                  &lt;StackPanel
                      Orientation="Horizontal"
                      Height="80"&gt;
                      &lt;Button 
                          BorderThickness="0" 
                          Width="199"
                          Height="80"&gt;
                          &lt;StackPanel Orientation="Horizontal"&gt;
                              &lt;Image 
                                  Source="/Images/x.png"
                                  Height="35"
                                  Width="35"/&gt;
                              &lt;TextBlock 
                                  Text="text"
                                  Margin="10,0"
                                  FontSize="35"/&gt;
                          &lt;/StackPanel&gt;
                      &lt;/Button&gt;
                      &lt;Line X1="0"  Y2="100"
  
                      Stroke="White"
                      StrokeThickness="1"
                      Stretch="Fill"
                      HorizontalAlignment="Center"/&gt;
                      &lt;Button 
                          BorderThickness="0" 
                          Width="199"
                          Height="80"&gt;
                          &lt;StackPanel Orientation="Horizontal"&gt;
                              &lt;Image 
                                  Source="/Images/x.png"
                                  Height="35"
                                  Width="35"/&gt;
                              &lt;TextBlock 
                                  Text="text"
                                  Margin="10,0"
                                  FontSize="35"/&gt;
                          &lt;/StackPanel&gt;
                      &lt;/Button&gt;
                  &lt;/StackPanel&gt;
  
              &lt;/StackPanel&gt;
          &lt;/Grid&gt;
          &lt;Grid Width="500" x:Name="mainpanel" Background="Black"&gt;
          &lt;/Grid&gt;
  
  
      &lt;/StackPanel&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>Code Behind : </p>
  
  <pre><code>private void OnFlick(object sender, FlickGestureEventArgs e)
      {
  
  
          if (e.Direction == System.Windows.Controls.Orientation.Horizontal)
          {
  
              // User flicked towards left ==== show main panel
              if (e.HorizontalVelocity &lt; 0)
              {
                  if (leftpanel.Width &gt; 0)    
                  {
  
                      Slideright(leftpanel);
  
                  }
              }
  
              // User flicked towards right  ===== show left panel
              if (e.HorizontalVelocity &gt; 0)
              {
                  if (leftpanel.Width &lt; 400)
                  {
                      Slideleft(leftpanel);
                  }
              }
          }
      }
  
      private void Slideleft(Grid leftpanel)
      {
          DoubleAnimation tAnimation = new DoubleAnimation();
          tAnimation.Duration = new Duration(TimeSpan.FromSeconds(0.3));
          tAnimation.From = 0;
          tAnimation.To = 400;
          Storyboard.SetTarget(tAnimation, leftpanel);
          Storyboard.SetTargetProperty(tAnimation, new PropertyPath(Grid.WidthProperty));
          Storyboard storyboard = new Storyboard();
          storyboard.Children.Add(tAnimation);
          storyboard.Begin();
  
  
  
      }
  
      private void Slideright(Grid leftpanel)
      {
          //throw new NotImplementedException();
  
          DoubleAnimation tAnimation = new DoubleAnimation();
          tAnimation.Duration = new Duration(TimeSpan.FromSeconds(0.3));
          tAnimation.From = 400;
          tAnimation.To = 0;
          Storyboard.SetTarget(tAnimation, leftpanel);
          Storyboard.SetTargetProperty(tAnimation, new PropertyPath(Grid.WidthProperty));
          Storyboard storyboard = new Storyboard();
          storyboard.Children.Add(tAnimation);
          storyboard.Begin();
  
  
  
      }
  </code></pre>
  
  <p>This all is working fine, however, the animation on change of width is lagging alot, kind of stuttering. Anyway to make it smooth ? </p>