Проблема с эффектом WPF Credits: StoryBoard для анимации StackPanel, которая увеличивает высоту окна

Это мой первый проект WPF. Я пытаюсь получить эффект скользящих титров с кучей PNG в форме баннера, уложенных друг на друга вертикально.

Мой текущий подход состоит в том, чтобы иметь кучу изображений в StackPanel. Каждое изображение размером примерно 1024x150, всего около 30 изображений. Они складываются вертикально.

Я запускаю StackPanel с 0,200, так что большая его часть находится за пределами экрана. Затем у меня есть StoryBoard (созданный в 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>

EDIT: я нашел ClipToBounds и попытался установить для него значение false, но оно уже равно false. У кого-то в MSDN такая же проблема, как и у меня, по адресу http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/5764645e-cb4f-4137-a525-4e8698ee43b6 - я не думаю, что есть решение. .


storyboard wpf credits stackpanel
person Jesse Buchanan    schedule 05.07.2009    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Я вижу две вещи, которые вы могли бы попробовать:

  1. Используйте ScrollViewer с отключенными полосами прокрутки вокруг StackPanel. К сожалению, вы не можете анимировать смещение прокрутки напрямую, поэтому вам нужно будет создать что-то вроде таймера в коде и периодически вызывать ScrollToVerticalOffset().

  2. Попробуйте поместить StackPanel на Canvas и анимировать Canvas.Top (установленный на StackPanel) вместо RenderTransforms.

Я предоставлю образец кода, если он вам нужен.

Андрей

person Andrej    schedule 05.07.2009

arrow_upward
2
arrow_downward

Я согласен с Андреем, просто создайте новый тип списка с отключенными полосами прокрутки.

Вы можете анимировать смещение прокрутки, у меня это происходит в пользовательском элементе управления, который я пишу прямо сейчас. Это функция в классе для списка:

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

thisScrollViewer.BeginAnimation(HorizontalScrollOffsetProperty, animateHscroll);
person Eric Barr    schedule 11.09.2009