title: WPF Credits effect problem: StoryBoard to animate a StackPanel that extends the height of the window
body: <p>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.</p>
  
  <p>My current approach is to have a bunch of images in a StackPanel. Each image is approx 1024x150, and there is about 30 images.  They stack vertically.</p>
  
  <p>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 <strong>the problem is the part of the StackPanel that was originally off-screen never paints and stays cut off.</strong> Only the initially visible area of the StackPanel animates.</p>
  
  <p>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? </p>
  
  <p>XAML, omitting Window and Window.Triggers:</p>
  
  <pre><code>&lt;Window.Resources&gt;
      &lt;Storyboard x:Key="sb_HR"&gt;
          &lt;DoubleAnimationUsingKeyFrames 
                      BeginTime="00:00:00" 
                      Storyboard.TargetName="StackPanel1"
                      Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"&gt;
              &lt;SplineDoubleKeyFrame KeyTime="00:00:30" Value="-1950"/&gt;
          &lt;/DoubleAnimationUsingKeyFrames&gt;
      &lt;/Storyboard&gt;
  &lt;/Window.Resources&gt;
  
  
  &lt;Grid x:Name="LayoutRoot"&gt;
      &lt;Grid.ColumnDefinitions&gt;
          &lt;ColumnDefinition Width="1024" /&gt;
      &lt;/Grid.ColumnDefinitions&gt;        
      &lt;StackPanel   Name="StackPanel1" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5"&gt;
          &lt;StackPanel.RenderTransform&gt;
              &lt;TransformGroup&gt;
                  &lt;ScaleTransform ScaleX="1" ScaleY="1"/&gt;
                  &lt;SkewTransform AngleX="0" AngleY="0"/&gt;
                  &lt;RotateTransform Angle="0"/&gt;
                  &lt;TranslateTransform X="0" Y="0"/&gt;
              &lt;/TransformGroup&gt;
          &lt;/StackPanel.RenderTransform&gt;
          &lt;Image Margin="0,50,0,0" Source="title.png"  x:Name="title" Height="150" VerticalAlignment="Top" Stretch="Uniform"&gt;&lt;/Image&gt;
          &lt;Image Margin="0,50,0,0" Source="1.png" x:Name="V1_L1" Height="150" VerticalAlignment="Top" Stretch="Uniform" &gt;&lt;/Image&gt;
          &lt;Image Margin="0,50,0,0" Source="2.png" x:Name="V1_L2" Height="150" VerticalAlignment="Top" Stretch="Uniform" &gt;&lt;/Image&gt;
          &lt;Image Margin="0,50,0,0" Source="3.png" x:Name="V1_L3" Height="150" VerticalAlignment="Top" Stretch="Uniform" &gt;&lt;/Image&gt;
          &lt;Image Margin="0,50,0,0" Source="4.png" x:Name="V1_L4" Height="150" VerticalAlignment="Top" Stretch="Uniform" &gt;&lt;/Image&gt;
          &lt;Image Margin="0,50,0,0" Source="5.png" x:Name="V1_L5" Height="150" VerticalAlignment="Top" Stretch="Uniform" &gt;&lt;/Image&gt;
          &lt;Image Margin="0,50,0,0" Source="6.png" x:Name="V1_L6" Height="150" VerticalAlignment="Top" Stretch="Uniform" &gt;&lt;/Image&gt;
          &lt;Image Margin="0,50,0,0" Source="7.png" x:Name="V1_L7" Height="150" VerticalAlignment="Top" Stretch="Uniform" &gt;&lt;/Image&gt;
          &lt;Image Margin="0,50,0,0" Source="8.png" x:Name="V1_L8" Height="150" VerticalAlignment="Top" Stretch="Uniform" &gt;&lt;/Image&gt;
      &lt;/StackPanel&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p><strong>EDIT:</strong> 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 <a href="http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/5764645e-cb4f-4137-a525-4e8698ee43b6" rel="nofollow noreferrer">http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/5764645e-cb4f-4137-a525-4e8698ee43b6</a> - I don't think there's a solution yet.</p>