WPF - How to make text scroll vertically AND Pause

Question

I have a portion of my page dedicated to showing credits and there are three textblocks that scroll vertically. I need each line however to pause when it gets into position (a position in the panel) and then continue after a second or so. Without making this all very complex, I don't know how to do this. I had all three lines scrolling together but didn't know how to make it pause.

I even tried DoubleAnimationUsingKeyFrames but could not get that working either.

Any pointers?

Answer 1

The trick is to set BeginTime of animations, like in this sample.

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Titles" SizeToContent="WidthAndHeight">
    <Window.Resources>
        <Style TargetType="Grid">
            <Setter Property="Width" Value="300" />
            <Setter Property="Height" Value="100" />
        </Style>
        <Style TargetType="TextBlock">
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="FontSize" Value="20" />
        </Style>
        <Style TargetType="StackPanel">
            <Setter Property="Canvas.Top" Value="200" />
            <Style.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard>
                        <Storyboard RepeatBehavior="Forever">
                            <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" From="300"  To="100"  BeginTime="0:00:00" Duration="0:00:02" />
                            <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" From="100"  To="0"    BeginTime="0:00:04" Duration="0:00:01" />
                            <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" From="0"    To="-100" BeginTime="0:00:06" Duration="0:00:01" />
                            <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" From="-100" To="-300" BeginTime="0:00:08" Duration="0:00:02" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Canvas Width="300" Height="300">
        <StackPanel>
            <Grid>
                <TextBlock Text="Name 1" />
            </Grid>
            <Grid>
                <TextBlock Text="Name 2" />
            </Grid>
            <Grid>
                <TextBlock Text="Name 3" />
            </Grid>
        </StackPanel>
    </Canvas>
</Window>