Was ist der beste Weg, um ein Panel in WPF zu verschieben?

Question

Ich habe eine ziemlich einfache UserControl, die ich gemacht habe (entschuldige mein Xaml Ich lerne gerade WPF) und ich möchte das vom Bildschirm schieben. Dazu animiere ich eine Translate-Transformation (ich habe auch versucht, das Panel zum Kind einer Leinwand zu machen und die X-Position mit den gleichen Ergebnissen zu animieren), aber das Panel bewegt sich sehr ruckartig, sogar auf einem ziemlich schnellen neuen Computer. Was ist der beste Weg, um hinein- und hinauszuschieben (am besten mit KeySplines, so dass er sich mit der Trägheit bewegt), ohne das Ruckeln zu bekommen. Ich habe nur 8 Tasten auf dem Panel, also dachte ich nicht, dass es ein zu großes Problem wäre.

Hier ist der Xaml, den ich benutze, es läuft gut in Kaxaml, aber es ist sehr ruckartig und langsam (sowie ruckelnd und langsam, wenn in einer WPF-App kompiliert laufen).

<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

Es sieht so aus, als wäre die beste Lösung bisher, einen Visual Brush zu verwenden und zwei statische Bilder zu verschieben, wenn man die Panels ein- und ausschiebt. Etwas ähnliches wie dies in diesem Blog-Eintrag beschrieben:

Using animated navigation pages in a WPF application

Answer 2

Wenn Sie mit WPF-Animationen lange genug arbeiten, werden Sie herausfinden, dass großflächige Kontrollen in der Tat, in einem bewegen, was Sie ‚abgehackt‘ Art und Weise nennen. Ich hatte dieses Problem sogar mit winzigen Tasten, die horizontal auf dem Bildschirm bewegt werden mussten, und ich habe es sicherlich aufgegeben, etwas Großes (z. B. ein Fenster) zu bewegen.

Answer 3

Ich habe festgestellt, WPF Leistung von Animationen deutlich zu verbessern, wenn nicht BitmapEffect s verwenden. Versuchen Sie, sie in Ihrem Beispiel zu deaktivieren. Ich ersetzte meine Schlagschatten durch halbtransparente, feste Bereiche mit Farbverlaufsfüllungen und verbesserter Leistung.

Ich habe auch gehört, dass einige Bitmap-Effekte die Leistung in neueren Versionen (vielleicht 3.5 SP1?) Erhöht haben, da mehr Rendering auf die Hardware übertragen wurde.