Problème d'effet de crédits WPF: StoryBoard pour animer un StackPanel qui étend la hauteur de la fenêtre

Question

Ceci est mon premier projet WPF. J'essaie d'obtenir un effet de roulement de crédits avec un groupe de PNG en forme de bannière empilés les uns sur les autres à la verticale.

Mon approche actuelle consiste à avoir un tas d'images dans un StackPanel. Chaque image est d'environ 1024x150, et il y a environ 30 images. Ils s'empilent verticalement.

Je démarre le StackPanel à 0,200, donc la plus grande partie est hors écran. J'ai alors un StoryBoard (créé dans Blend) qui le traduit vers le haut de l'axe Y, tout le long de l'écran. L'animation commence, mais le problème est que la partie du StackPanel qui était à l'origine hors écran ne peint jamais et reste coupée. Seule la zone initialement visible du StackPanel est animée.

Il semble que le StackPanel doive être repeint. Cette approche va-t-elle jamais fonctionner ou dois-je faire quelque chose de totalement différent?

XAML, en omettant la fenêtre et 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: Je ai trouvé ClipToBounds et il tenté de mettre à faux, mais il est déjà faux. Quelqu'un sur MSDN a le même problème que moi, à http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/5764645e-cb4f-4137-a525-4e8698ee43b6 - Je ne pense pas qu'il existe encore une solution.

Answer 1

Je vois deux choses que vous pourriez essayer:

1. Utilisez un ScrollViewer avec scrollbars handicapés dans le StackPanel. Malheureusement, vous ne pouvez pas animer directement le décalage de défilement, vous devrez donc créer quelque chose comme un minuteur dans le code et appeler régulièrement ScrollToVerticalOffset(). Essayez de placer le StackPanel sur un canevas et animez Canvas.Top (sur le StackPanel) au lieu de RenderTransforms.

Je fournirai un échantillon de code si vous en avez besoin.

Andrej

Answer 2

Je suis d'accord avec Andrej, il suffit de faire un nouveau type de liste Box qui a les barres de défilement désactivée.

Vous pouvez animer le décalage de défilement, je l'ai passé dans un contrôle personnalisé que j'écris en ce moment. Ceci est en fonction de la classe pour la zone de liste:

---

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

thisScrollViewer.BeginAnimation(HorizontalScrollOffsetProperty, animateHscroll); 

---