WPF Credits Effektproblem: StoryBoard zum Animieren eines StackPanels, das die Höhe des Fensters erweitert

Question

Dies ist mein erstes WPF-Projekt. Ich versuche, einen Abspann-Effekt mit einer Reihe von Banner-förmigen PNGs vertikal übereinander gestapelt zu bekommen.

Mein aktueller Ansatz ist es, eine Reihe von Bildern in einem StackPanel zu haben. Jedes Bild ist ungefähr 1024x150 und es gibt ungefähr 30 Bilder. Sie stapeln vertikal.

Ich starte das StackPanel bei 0,200, also ist das meiste davon außerhalb des Bildschirms. Ich habe dann ein StoryBoard (in Blend erstellt), das es auf der Y-Achse weit außerhalb des Bildschirms übersetzt. Die Animation beginnt, aber Das Problem ist der Teil des StackPanels, der ursprünglich aus dem Bildschirm nie malt und bleibt abgeschnitten. Nur der anfänglich sichtbare Bereich des StackPanels wird animiert.

Es fühlt sich an, als müsste das StackPanel neu gestrichen werden. Wird dieser Ansatz jemals funktionieren oder muss ich etwas völlig anderes machen?

XAML, Weglassen Fenster und Window.Triggers:

<Window.Resources> 
    <Storyboard x:Key="sb_HR"> 
     <DoubleAnimationUsingKeyFrames 
        BeginTime="00:00:00" 
        Storyboard.TargetName="StackPanel1" 
        Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"> 
      <SplineDoubleKeyFrame KeyTime="00:00:30" Value="-1950"/> 
     </DoubleAnimationUsingKeyFrames> 
    </Storyboard> 
</Window.Resources> 


<Grid x:Name="LayoutRoot"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="1024" /> 
    </Grid.ColumnDefinitions>   
    <StackPanel Name="StackPanel1" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5"> 
     <StackPanel.RenderTransform> 
      <TransformGroup> 
       <ScaleTransform ScaleX="1" ScaleY="1"/> 
       <SkewTransform AngleX="0" AngleY="0"/> 
       <RotateTransform Angle="0"/> 
       <TranslateTransform X="0" Y="0"/> 
      </TransformGroup> 
     </StackPanel.RenderTransform> 
     <Image Margin="0,50,0,0" Source="title.png" x:Name="title" Height="150" VerticalAlignment="Top" Stretch="Uniform"></Image> 
     <Image Margin="0,50,0,0" Source="1.png" x:Name="V1_L1" Height="150" VerticalAlignment="Top" Stretch="Uniform" ></Image> 
     <Image Margin="0,50,0,0" Source="2.png" x:Name="V1_L2" Height="150" VerticalAlignment="Top" Stretch="Uniform" ></Image> 
     <Image Margin="0,50,0,0" Source="3.png" x:Name="V1_L3" Height="150" VerticalAlignment="Top" Stretch="Uniform" ></Image> 
     <Image Margin="0,50,0,0" Source="4.png" x:Name="V1_L4" Height="150" VerticalAlignment="Top" Stretch="Uniform" ></Image> 
     <Image Margin="0,50,0,0" Source="5.png" x:Name="V1_L5" Height="150" VerticalAlignment="Top" Stretch="Uniform" ></Image> 
     <Image Margin="0,50,0,0" Source="6.png" x:Name="V1_L6" Height="150" VerticalAlignment="Top" Stretch="Uniform" ></Image> 
     <Image Margin="0,50,0,0" Source="7.png" x:Name="V1_L7" Height="150" VerticalAlignment="Top" Stretch="Uniform" ></Image> 
     <Image Margin="0,50,0,0" Source="8.png" x:Name="V1_L8" Height="150" VerticalAlignment="Top" Stretch="Uniform" ></Image> 
    </StackPanel> 
</Grid> 

EDIT: Ich fand ClipToBounds habe und versucht, es zu falschen Einstellung, aber es ist schon falsch. Jemand auf MSDN hat das gleiche Problem wie ich, unter http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/5764645e-cb4f-4137-a525-4e8698ee43b6 - ich glaube nicht, dass es eine Lösung gibt.

Answer 1

Ich sehe zwei Dinge, die Sie ausprobieren können:

1. Verwenden Sie ein Scroll mit behinderten Scrollbalken um die Stackpanel. Leider können Sie den Scroll-Offset nicht direkt animieren, Sie müssten also etwas Code im Hintergrund erstellen und ScrollToVerticalOffset() in regelmäßigen Abständen aufrufen.

2. Versuchen Sie, das StackPanel auf einen Canvas zu setzen und Canvas.Top (auf dem StackPanel gesetzt) ​​anstelle der RenderTransforms zu animieren.

Ich werde eine Codebeispiel liefern, wenn Sie eine benötigen.

Andrej

Answer 2

ich mit Andrej einverstanden sind, machen gerade eine neue Listenfeld Typ, der die Bildlaufleisten deaktiviert hat.

Sie können den Scroll-Offset animieren, ich habe es in einem benutzerdefinierten Steuerelement passiert, das ich gerade schreibe. Dies ist in einer Funktion in der Klasse für das Listenfeld:

---

Duration animationDuration = new Duration(new TimeSpan(0, 0, 0, 0, _scrollSpeed)); 
DoubleAnimation animateHscroll = new DoubleAnimation(thisScrollViewer.HorizontalOffset, TargetHorizontalOffset, animationDuration); 

thisScrollViewer.BeginAnimation(HorizontalScrollOffsetProperty, animateHscroll); 

---