WPF Créditos efeito problema: StoryBoard para animar um StackPanel que estende a altura da janela

Question

Este é meu primeiro projeto WPF. Eu estou tentando obter um efeito créditos rolando com um monte de em forma de bandeira da PNG empilhados em cima uns dos outros na vertical.

Minha abordagem atual é ter um monte de imagens em um StackPanel. Cada imagem é de aproximadamente 1024x150, e há cerca de 30 imagens. Eles empilhar verticalmente.

Eu iniciar o StackPanel em 0200, assim que a maior parte é fora da tela. Em seguida, tenho um storyboard (criado no Blend) que traduz o eixo Y, todo o caminho para fora da tela. Os começos de animação, mas o problema é a parte do StackPanel que foi originalmente fora da tela não tintas e estadias cortado. Apenas a área visível inicialmente dos anima StackPanel.

Parece que o StackPanel precisa ser redesenhada. É esta abordagem sempre indo para o trabalho ou que eu preciso para fazer algo totalmente diferente?

XAML, omitindo Janela 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>

EDIT: eu encontrei ClipToBounds e tentou defini-la como falsa, mas é já falsa. Alguém no MSDN tem o mesmo problema que eu, em http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/5764645e-cb4f-4137-a525-4e8698ee43b6 - Eu não acho que há uma solução ainda .

Answer 1

Eu vejo duas coisas que você pode experimentar:

1. Use um ScrollViewer com barras de rolagem com deficiência em todo o StackPanel. Infelizmente, você não pode animar o deslocamento de rolagem diretamente, de modo que você precisa para criar algo como um timer no código por trás e chamar ScrollToVerticalOffset () periodicamente.

2. Tente colocar o StackPanel em uma lona e animar Canvas.Top (set no StackPanel) em vez das RenderTransforms.

Vou fornecer uma amostra de código se você precisa de um.

Andrej

Answer 2

Eu concordo com Andrej, basta fazer um novo tipo de caixa de listagem que tem as barras de rolagem com deficiência.

Você pode animar o deslocamento de rolagem, eu tenho isso acontecendo em um controle personalizado que estou escrevendo agora. Isto está em uma função na classe para a caixa de lista:

---

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

thisScrollViewer.BeginAnimation(HorizontalScrollOffsetProperty, animateHscroll);

---