WPF Credits效果问题:StoryBoard可以为可扩展窗口高度的StackPanel设置动画 [英] WPF Credits effect problem: StoryBoard to animate a StackPanel that extends the height of the window

问题描述

这是我的第一个WPF项目.我试图通过将一堆横幅状的PNG垂直堆叠在一起来获得点数的效果.

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.

我目前的方法是在StackPanel中放置一堆图像.每个图像约为1024x150，大约有30张图像.它们垂直堆叠.

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.

我从0,200开始启动StackPanel，所以大部分不在屏幕上.然后，我有了一个StoryBoard(在Blend中创建)，可以将其沿Y轴平移到屏幕外.动画开始了，但是问题是StackPanel原来不在屏幕上的那部分永远不会绘制，并且一直保持剪切状态.只有StackPanel的最初可见区域会进行动画处理.

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.

感觉需要重新粉刷StackPanel.这种方法会行得通吗，还是我需要做一些完全不同的事情?

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，省略Window和Window.Triggers:

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>

编辑:我已经找到ClipToBounds并尝试将其设置为false，但是已经为false. MSDN上的某人与我有相同的问题，位于 http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/5764645e-cb4f-4137-a525-4e8698ee43b6 -我认为尚无解决方案

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.

推荐答案

我看到您可以尝试的两件事:

I see two things that you could try out:

1. 使用ScrollViewer，并在StackPanel周围使用禁用的滚动条.遗憾的是，您不能直接为滚动偏移量设置动画，因此您需要在后面的代码中创建类似计时器的内容，并定期调用ScrollToVerticalOffset().

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.

尝试将StackPanel放在Canvas上并设置Canvas.Top(在StackPanel上设置)的动画，而不是RenderTransforms.

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)

Andrej

这篇关于WPF Credits效果问题:StoryBoard可以为可扩展窗口高度的StackPanel设置动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！