Databases
StackOverflow2013
Postsdbo
POWPF Credits effect problem: StoryBoard to animate a StackPanel that extends the height of the window
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWPF Credits effect problem: StoryBoard to animate a StackPanel that extends the height of the window
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload