WPF-Punkte-Effekt Problem: Storyboard ein Stackpanel zu animieren, die die Höhe des Fensters erstreckt

Question

Dies ist mein erstes WPF-Projekt. Ich versuche, einen rollenden Kredite Effekt mit einem Bündel von Banner-förmigen PNG übereinander gestapelt zu bekommen vertikal.

Mein aktueller Ansatz ist es, eine Reihe von Bildern in einem Stackpanel zu haben. Jedes Bild ist ca. 1024x150, und es gibt etwa 30 Bilder. Sie stapeln sich vertikal.

starte ich den Stackpanel bei 0200, so dass die meisten davon Bildschirm ausgeschaltet ist. Ich habe dann ein Storyboard (in Mischung erstellt), die es auf die Y-Achse, die ganzen Weg vom Bildschirm übersetzt. Die Animation beginnt, aber das Problem ist der Teil des Stackpanel, das ursprünglich aus dem Bildschirm malt nie und bleibt abgeschnitten. Es wird nur der anfangs sichtbare Bereich des Stackpanel beseelt.

Es fühlt sich an wie das Stackpanel neu gestrichen werden muss. Ist dieser Ansatz geht zu immer arbeiten oder muss ich etwas ganz anderes tun?

XAML, Weglassen Fenster und 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: Ich habe festgestellt ClipToBounds und versuchte, es zu falscher Einstellung, aber es ist schon falsch. Jemand auf MSDN hat das gleiche Problem wie ich, unter http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/5764645e-cb4f-4137-a525-4e8698ee43b6 - ich glaube nicht, gibt es eine Lösung noch .

Answer 1

Ich sehe zwei Dinge, die Sie könnten versuchen, aus:

1. Verwenden Sie einen Scroll mit behinderten Scrollbalken um die Stackpanel. Leider kann man die Rolle nicht animieren direkt versetzt, so würden Sie so etwas wie ein Timer in Code erstellen müssen hinter und rufen ScrollToVerticalOffset () in regelmäßigen Abständen.

2. Versuchen Sie, die Stackpanel auf einer Leinwand setzen und Canvas.Top (Set auf dem Stackpanel) anstelle der RenderTransforms animieren.

Ich werde ein Codebeispiel liefern, wenn man einen braucht.

Andrej

Answer 2

ich mit Andrej einverstanden ist, nur einen neues Listenfeld Typen machen, dass die Bildlaufleisten deaktiviert hat.

Sie können die Scroll-Offset animieren, ich habe es in einem Custom Control passiert habe jetzt ich schreibe. Dies ist in einer Funktion in der Klasse für das Listenfeld:

---

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

thisScrollViewer.BeginAnimation(HorizontalScrollOffsetProperty, animateHscroll);

---