Question

This is my first WPF project. I’m trying to get a rolling credits effect with a bunch of banner-shaped PNG’s stacked on top of each other vertically.

My current approach is to have a bunch of images in a StackPanel. Each image is approx 1024×150, and there is about 30 images. They stack vertically.

I start the StackPanel at 0,200, so most of it is off screen. I then have a StoryBoard (created in Blend) that translates it up the Y axis, all the way off-screen. The animation starts, but the problem is the part of the StackPanel that was originally off-screen never paints and stays cut off. Only the initially visible area of the StackPanel animates.

It feels like the StackPanel needs to be repainted. Is this approach ever going to work or do I need to do something totally different?

XAML, omitting Window and 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: I’ve found ClipToBounds and tried setting it to false, but it is already false. Someone on MSDN has the same problem as me, at http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/5764645e-cb4f-4137-a525-4e8698ee43b6 – I don’t think there’s a solution yet.

Answer 1

I see two things that you could try out:

1. Use a ScrollViewer with disabled scrollbars around the StackPanel. Sadly, you cannot animate the scroll offset directly, so you would need to create something like a timer in code behind and call ScrollToVerticalOffset() periodically.

2. Try putting the StackPanel on a Canvas and animate Canvas.Top (set on the StackPanel) instead of the RenderTransforms.

I will supply a code sample if you need one.

Andrej