¿Cuál es la mejor manera de deslizar un panel en WPF?

Question

Tengo un UserControl bastante simple que he hecho (perdón por mi Xaml, estoy recién aprendiendo WPF) y quiero deslizar el fuera de la pantalla. Para hacerlo, estoy animando una transformación de traducción (también intenté hacer del Panel el elemento secundario de un lienzo y animar la posición X con los mismos resultados), pero el panel se mueve muy bruscamente, incluso en una computadora relativamente rápida. ¿Cuál es la mejor manera de deslizarse hacia adentro y hacia afuera (preferiblemente con KeySplines para que se mueva con inercia) sin obtener la desigualdad? Solo tengo 8 botones en el panel, así que no pensé que sería demasiado problema.

Aquí está el Xaml que estoy usando, funciona bien en Kaxaml, pero es muy desigual y lento (además de ser brusco y lento cuando se ejecuta compilado en una aplicación 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> 

Answer 1

Parece que la mejor solución hasta el momento, es el uso de un cepillo visual y mover dos imágenes estáticas cuando se desliza dentro y fuera de los paneles. Algo similar a esto se describe en esta entrada del blog:

Using animated navigation pages in a WPF application

Answer 2

Si trabaja con animaciones de WPF tiempo suficiente, podrás averiguar que los controles de gran superficie, de hecho, se mueven de una forma lo que se llama 'desigual'. He tenido este problema incluso con pequeños botones que necesitan moverse horizontalmente en la pantalla, y ciertamente he renunciado a mover algo grande (por ejemplo, una ventana).

Answer 3

que he encontrado el rendimiento de WPF de animaciones para mejorar de manera significativa cuando no se utiliza BitmapEffect s. Intenta deshabilitarlos en tu ejemplo. Reemplacé mis sombras paralelas con regiones sólidas semitransparentes con rellenos degradados y un mejor rendimiento.

También he oído que algunos efectos de imagen han aumentado el rendimiento en las últimas versiones (tal vez 3.5 SP1?) Ya que más de la prestación ha sido empujado al hardware.