WPF Crediti problema di effetto: StoryBoard per animare una StackPanel che estende l'altezza della finestra

Question

Questo è il mio primo progetto WPF. Sto cercando di ottenere un effetto crediti di laminazione con un gruppo di a forma di bandiera del PNG impilati uno sopra l'altro in senso verticale.

Il mio approccio attuale è quella di avere un gruppo di immagini in uno StackPanel. Ogni immagine è di circa 1024x150, e non v'è di circa 30 immagini. Essi impilare in verticale.

avvio lo StackPanel a 0,200, quindi la maggior parte di esso è fuori dallo schermo. Ho poi uno StoryBoard (creato in Blend) che traduce l'alto l'asse Y, fino fuori schermo. L'animazione si avvia, ma il problema è la parte del StackPanel che in origine era fuori dallo schermo non dipinge mai e rimane tagliato fuori. Solo l'area inizialmente visibile della StackPanel anima.

Ci si sente come lo StackPanel ha bisogno di essere ridipinto. E 'questo approccio mai andare a lavorare o ho bisogno di fare qualcosa di completamente diverso?

XAML, omettendo Finestra e 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>

Modifica che ho trovato ClipToBounds e provato ad installare su false, ma è già falsa. Qualcuno su MSDN ha lo stesso problema come me, a http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/5764645e-cb4f-4137-a525-4e8698ee43b6 - io non credo che ci sia ancora una soluzione .

Answer 1

vedo due cose che si potrebbe provare:

1. Usa uno ScrollViewer con barre di scorrimento con disabilità in tutto lo StackPanel. Purtroppo, non è possibile animare l'offset direttamente di scorrimento, quindi si avrebbe bisogno di creare qualcosa come un timer in codice dietro e chiamare ScrollToVerticalOffset () periodicamente.

2. Prova a mettere lo StackPanel su tela e animare Canvas.Top (impostato sul StackPanel) al posto dei RenderTransforms.

Vi fornirò un esempio di codice, se avete bisogno di uno.

Andrej

Answer 2

Sono d'accordo con Andrej, basta fare un nuovo tipo Casella di riepilogo che ha le barre di scorrimento disabilitati.

È possibile animare l'offset di scorrimento, ce l'ho accadendo in un controllo personalizzato che sto scrivendo in questo momento. Questo è in una funzione nella classe per la casella di riepilogo:

---

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

thisScrollViewer.BeginAnimation(HorizontalScrollOffsetProperty, animateHscroll);

---