WPF Credits 效果问题：StoryBoard 对扩展窗口高度的 StackPanel 进行动画处理

Question

这是我的第一个 WPF 项目。 我试图用一堆横幅形状的 PNG 垂直堆叠在一起来获得滚动的片尾效果。

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

我在 0,200 处启动 StackPanel，因此大部分内容都在屏幕外。 然后我有一个故事板（在 Blend 中创建），可以将其沿 Y 轴平移，一直到屏幕外。 动画开始，但问题是 StackPanel 最初在屏幕外的部分永远不会绘制并保持被切断状态。只有 StackPanel 的最初可见区域会产生动画。

感觉StackPanel需要重新粉刷一下。 这种方法是否有效，或者我需要做一些完全不同的事情？

XAML，省略 Window 和 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 - 我认为还没有解决方案。

Answer 1

我看到您可以尝试以下两件事：

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

2. 尝试将 StackPanel 放在 Canvas 上并为 Canvas.Top 设置动画（在 StackPanel 上设置）而不是 RenderTransform。

如果您需要，我将提供一个代码示例。

安德烈

Answer 2

我同意 Andrej 的观点，只需创建一个禁用滚动条的新列表框类型。

您可以设置滚动偏移的动画，我已经在我现在正在编写的自定义控件中实现了它。 这是列表框类中的函数：

---

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

thisScrollViewer.BeginAnimation(HorizontalScrollOffsetProperty, animateHscroll);

---