Как лучше всего сдвинуть панель в WPF?

У меня есть довольно простой UserControl, который я сделал (простите за Xaml, я только изучаю WPF), и я хочу убрать его с экрана. Для этого я анимирую преобразование translate (я также пробовал сделать Panel дочерним элементом холста и анимировать положение X с теми же результатами), но панель движется очень рывками, даже на довольно быстром новом компьютере. Как лучше всего скользить внутрь и наружу (желательно с помощью KeySplines, чтобы он двигался по инерции) без рывков. У меня на панели всего 8 кнопок, поэтому я не думал, что это будет большой проблемой.

Вот Xaml, который я использую, он отлично работает в Kaxaml, но он очень резкий и медленный (а также рывковый и медленный при запуске, скомпилированном в приложении WPF).

  <UserControl xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" Width = "1002" Height = "578">
     <UserControl.Resources>            
        <Style TargetType = "Button">
           <Setter Property = "Control.Padding" Value = "4"/>
           <Setter Property = "Control.Margin" Value = "10"/>
           <Setter Property = "Control.Template">
              <Setter.Value>
                 <ControlTemplate TargetType = "Button">
                    <Grid Name = "backgroundGrid" Width = "210" Height = "210" Background = "#00FFFFFF">
                       <Grid.BitmapEffect>
                          <BitmapEffectGroup>
                             <DropShadowBitmapEffect x:Name = "buttonDropShadow" ShadowDepth = "2"/>
                             <OuterGlowBitmapEffect x:Name = "buttonGlow" GlowColor = "#A0FEDF00" GlowSize = "0"/>
                          </BitmapEffectGroup>
                       </Grid.BitmapEffect>
                       <Border x:Name = "background" Margin = "1,1,1,1" CornerRadius = "15">
                          <Border.Background>
                             <LinearGradientBrush StartPoint = "0,0" EndPoint = "0,1">
                                <LinearGradientBrush.GradientStops>
                                   <GradientStop Offset = "0" Color = "#FF0062B6"/>
                                   <GradientStop Offset = "1" Color = "#FF0089FE"/>
                                </LinearGradientBrush.GradientStops>
                             </LinearGradientBrush>
                          </Border.Background>
                       </Border>
                       <Border Margin = "1,1,1,0" BorderBrush = "#FF000000" BorderThickness = "1.5" CornerRadius = "15"/>
                       <ContentPresenter HorizontalAlignment = "Center" Margin = "{TemplateBinding Control.Padding}" 
                        VerticalAlignment = "Center" Content = "{TemplateBinding ContentControl.Content}" 
                        ContentTemplate = "{TemplateBinding ContentControl.ContentTemplate}"/>
                    </Grid>
                 </ControlTemplate>
              </Setter.Value>
           </Setter>
        </Style>
     </UserControl.Resources>
     <Canvas>
        <Grid x:Name = "Panel1" Height = "578" Canvas.Left = "0" Canvas.Top = "0">
           <Grid.RenderTransform>
              <TransformGroup>
                 <TranslateTransform x:Name = "panelTranslate" X = "0" Y = "0"/>
              </TransformGroup>
           </Grid.RenderTransform>
           <Grid.RowDefinitions>
              <RowDefinition Height = "287"/>
              <RowDefinition Height = "287"/>
           </Grid.RowDefinitions>
           <Grid.ColumnDefinitions>
              <ColumnDefinition x:Name = "Panel1Col1"/>
              <ColumnDefinition x:Name = "Panel1Col2"/>
              <ColumnDefinition x:Name = "Panel1Col3"/>
              <ColumnDefinition x:Name = "Panel1Col4"/>
     <!-- Set width to 0 to hide a column-->
           </Grid.ColumnDefinitions>
           <Button x:Name = "Panel1Product1" Grid.Column = "0" Grid.Row = "0" HorizontalAlignment = "Center" VerticalAlignment = "Center">
              <Button.Triggers>
                 <EventTrigger RoutedEvent = "Button.Click" SourceName = "Panel1Product1">
                    <EventTrigger.Actions>
                       <BeginStoryboard>
                          <Storyboard>
                             <DoubleAnimation BeginTime = "00:00:00.6" Duration = "0:0:3" From = "0" Storyboard.TargetName = "panelTranslate" Storyboard.TargetProperty = "X" To = "-1000"/>
                          </Storyboard>
                       </BeginStoryboard>
                    </EventTrigger.Actions>
                 </EventTrigger>
              </Button.Triggers>
           </Button>
           <Button x:Name = "Panel1Product2" Grid.Column = "0" Grid.Row = "1" HorizontalAlignment = "Center" VerticalAlignment = "Center"/>
           <Button x:Name = "Panel1Product3" Grid.Column = "1" Grid.Row = "0" HorizontalAlignment = "Center" VerticalAlignment = "Center"/>
           <Button x:Name = "Panel1Product4" Grid.Column = "1" Grid.Row = "1" HorizontalAlignment = "Center" VerticalAlignment = "Center"/>
           <Button x:Name = "Panel1Product5" Grid.Column = "2" Grid.Row = "0" HorizontalAlignment = "Center" VerticalAlignment = "Center"/>
           <Button x:Name = "Panel1Product6" Grid.Column = "2" Grid.Row = "1" HorizontalAlignment = "Center" VerticalAlignment = "Center"/>
           <Button x:Name = "Panel1Product7" Grid.Column = "3" Grid.Row = "0" HorizontalAlignment = "Center" VerticalAlignment = "Center"/>
           <Button x:Name = "Panel1Product8" Grid.Column = "3" Grid.Row = "1" HorizontalAlignment = "Center" VerticalAlignment = "Center"/>
        </Grid>
     </Canvas>
  </UserControl>