WPF 크레딧 효과 문제 : 창의 높이를 확장하는 스택 패널을 애니메이션하는 스토리 보드

Question

이것이 나의 첫 번째 WPF 프로젝트입니다. 나는 서로 수직으로 쌓인 배너 모양의 PNG가 쌓인 롤링 크레딧 효과를 얻으려고 노력하고 있습니다.

나의 현재 접근법은 스택 패널에 많은 이미지를 갖는 것입니다. 각 이미지는 약 1024x150이며 약 30 개의 이미지가 있습니다. 그들은 수직으로 쌓입니다.

StackPanel을 0,200으로 시작하므로 대부분 화면에서 벗어납니다. 그런 다음 스토리 보드 (블렌드에서 생성)가 있습니다. 애니메이션이 시작되지만 문제는 원래 화면에서 벗어난 스택 패널의 일부입니다. Stackpanel의 초기 가시 영역 만 애니메이션합니다.

스택 패널이 다시 칠해야한다고 생각합니다. 이 접근법이 작동하려고합니까, 아니면 완전히 다른 일을해야합니까?

XAML, 창과 창을 생략합니다. 트리거 :

<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로 설정하려고 시도했지만 이미 거짓입니다. MSDN의 누군가가 나와 같은 문제가 있습니다. http://social.msdn.microsoft.com/forums/en-us/wpf/thread/5764645e-cb4f-4137-a525-4e8698ee43b6 - 아직 해결책이 있다고 생각하지 않습니다.

Answer 1

시도해 볼 수있는 두 가지가 있습니다.

1. 스택 패널 주위에 비활성화 된 스크롤 바가있는 스크롤 뷰어를 사용하십시오. 안타깝게도 스크롤 오프셋을 직접 애니메이션 할 수 없으므로 코드 뒤에 타이머와 같은 것을 생성하고 ScrollToverticalOffset ()을 주기적으로 호출해야합니다.

2. StackPanel을 캔버스에 넣고 RenderTransforms 대신 캔버스를 애니메이션하십시오 (StackPanel에 설정).

필요한 경우 코드 샘플을 제공하겠습니다.

안드레

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);

---