在WPF中滑动面板的最佳方式是什么？

我有一个相当简单的UserControl，我已经（原谅我的Xaml，我只是学习WPF），我想滑出屏幕。要做到这一点，我正在为一个翻译转换进行动画制作（我也尝试将面板作为一个画布的孩子，并以相同的结果对X位置进行动画制作），但面板移动得非常快，即使是在一台相当快的新计算机上。滑入和滑出的最佳方式是什么（最好使用KeySplines使其随惯性移动），而不会产生不平整。我在面板上只有8个按钮，所以我不认为这会是一个太大的问题。在WPF中滑动面板的最佳方式是什么？

这里是我使用的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>

来源

2009-01-17 Kris Erickson