title: What is the best way to slide a panel in WPF?
body: <p>I have a fairly simple UserControl that I have made (pardon my Xaml I am just learning WPF) and I want to slide the off the screen.  To do so I am animating a translate transform (I also tried making the Panel the child of a canvas and animating the X position with the same results), but the panel moves very jerkily, even on a fairly fast new computer.  What is the best way to slide in and out (preferably with KeySplines so that it moves with inertia) without getting the jerkyness.  I only have 8 buttons on the panel, so I didn't think it would be too much of a problem.  </p>
  
  <p>Here is the Xaml I am using, it runs fine in Kaxaml, but it is very jerky and slow (as well as being jerkly and slow when run compiled in a WPF app).</p>
  
  <pre><code>  &lt;UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="1002" Height="578"&gt;
       &lt;UserControl.Resources&gt;            
          &lt;Style TargetType="Button"&gt;
             &lt;Setter Property="Control.Padding" Value="4"/&gt;
             &lt;Setter Property="Control.Margin" Value="10"/&gt;
             &lt;Setter Property="Control.Template"&gt;
                &lt;Setter.Value&gt;
                   &lt;ControlTemplate TargetType="Button"&gt;
                      &lt;Grid Name="backgroundGrid" Width="210" Height="210" Background="#00FFFFFF"&gt;
                         &lt;Grid.BitmapEffect&gt;
                            &lt;BitmapEffectGroup&gt;
                               &lt;DropShadowBitmapEffect x:Name="buttonDropShadow" ShadowDepth="2"/&gt;
                               &lt;OuterGlowBitmapEffect x:Name="buttonGlow" GlowColor="#A0FEDF00" GlowSize="0"/&gt;
                            &lt;/BitmapEffectGroup&gt;
                         &lt;/Grid.BitmapEffect&gt;
                         &lt;Border x:Name="background" Margin="1,1,1,1" CornerRadius="15"&gt;
                            &lt;Border.Background&gt;
                               &lt;LinearGradientBrush StartPoint="0,0" EndPoint="0,1"&gt;
                                  &lt;LinearGradientBrush.GradientStops&gt;
                                     &lt;GradientStop Offset="0" Color="#FF0062B6"/&gt;
                                     &lt;GradientStop Offset="1" Color="#FF0089FE"/&gt;
                                  &lt;/LinearGradientBrush.GradientStops&gt;
                               &lt;/LinearGradientBrush&gt;
                            &lt;/Border.Background&gt;
                         &lt;/Border&gt;
                         &lt;Border Margin="1,1,1,0" BorderBrush="#FF000000" BorderThickness="1.5" CornerRadius="15"/&gt;
                         &lt;ContentPresenter HorizontalAlignment="Center" Margin="{TemplateBinding Control.Padding}" 
                          VerticalAlignment="Center" Content="{TemplateBinding ContentControl.Content}" 
                          ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"/&gt;
                      &lt;/Grid&gt;
                   &lt;/ControlTemplate&gt;
                &lt;/Setter.Value&gt;
             &lt;/Setter&gt;
          &lt;/Style&gt;
       &lt;/UserControl.Resources&gt;
       &lt;Canvas&gt;
          &lt;Grid x:Name="Panel1" Height="578" Canvas.Left="0" Canvas.Top="0"&gt;
             &lt;Grid.RenderTransform&gt;
                &lt;TransformGroup&gt;
                   &lt;TranslateTransform x:Name="panelTranslate" X="0" Y="0"/&gt;
                &lt;/TransformGroup&gt;
             &lt;/Grid.RenderTransform&gt;
             &lt;Grid.RowDefinitions&gt;
                &lt;RowDefinition Height="287"/&gt;
                &lt;RowDefinition Height="287"/&gt;
             &lt;/Grid.RowDefinitions&gt;
             &lt;Grid.ColumnDefinitions&gt;
                &lt;ColumnDefinition x:Name="Panel1Col1"/&gt;
                &lt;ColumnDefinition x:Name="Panel1Col2"/&gt;
                &lt;ColumnDefinition x:Name="Panel1Col3"/&gt;
                &lt;ColumnDefinition x:Name="Panel1Col4"/&gt;
       &lt;!-- Set width to 0 to hide a column--&gt;
             &lt;/Grid.ColumnDefinitions&gt;
             &lt;Button x:Name="Panel1Product1" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center"&gt;
                &lt;Button.Triggers&gt;
                   &lt;EventTrigger RoutedEvent="Button.Click" SourceName="Panel1Product1"&gt;
                      &lt;EventTrigger.Actions&gt;
                         &lt;BeginStoryboard&gt;
                            &lt;Storyboard&gt;
                               &lt;DoubleAnimation BeginTime="00:00:00.6" Duration="0:0:3" From="0" Storyboard.TargetName="panelTranslate" Storyboard.TargetProperty="X" To="-1000"/&gt;
                            &lt;/Storyboard&gt;
                         &lt;/BeginStoryboard&gt;
                      &lt;/EventTrigger.Actions&gt;
                   &lt;/EventTrigger&gt;
                &lt;/Button.Triggers&gt;
             &lt;/Button&gt;
             &lt;Button x:Name="Panel1Product2" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center"/&gt;
             &lt;Button x:Name="Panel1Product3" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center"/&gt;
             &lt;Button x:Name="Panel1Product4" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center"/&gt;
             &lt;Button x:Name="Panel1Product5" Grid.Column="2" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center"/&gt;
             &lt;Button x:Name="Panel1Product6" Grid.Column="2" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center"/&gt;
             &lt;Button x:Name="Panel1Product7" Grid.Column="3" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center"/&gt;
             &lt;Button x:Name="Panel1Product8" Grid.Column="3" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center"/&gt;
          &lt;/Grid&gt;
       &lt;/Canvas&gt;
    &lt;/UserControl&gt;
  </code></pre>