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

Question

Ceci est mon premier projet WPF. Je suis en train d'obtenir un effet de roulement de crédits avec un tas de forme de bannière PNG empilés les uns sur les autres verticalement.

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

Je commence StackPanel à 0200, de sorte que la majeure partie est hors de l'écran. Je puis un storyboard (créé en mélange) qui se traduit par le haut de l'axe Y, tout le chemin à l'écran. L'animation démarre, mais le problème est la partie du StackPanel qui était à l'origine hors écran peint jamais et reste coupé. Seule la zone initialement visible du StackPanel anime.

Il se sent comme le StackPanel doit être repeint. Est-ce cette approche va jamais travailler ou ai-je besoin de 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 l'ai trouvé ClipToBounds et essayé de placer false, 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 y ait une solution encore .

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 le défilement décalé directement, vous devez créer quelque chose comme une minuterie dans le code derrière et appeler ScrollToVerticalOffset () périodiquement.

2. Essayez de mettre StackPanel sur une toile et animer Canvas.Top (ensemble sur le StackPanel) au lieu des RenderTransforms.

Je vais fournir un exemple de code si vous en avez besoin.

Andrej

Answer 2

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

Vous pouvez animer le défilement offset, je l'ai passe dans un contrôle personnalisé Je vous é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);

---