WPF Re-using \ Replacing an Image; animation

Question

YO, I have a long image (125x8000 pixls) that i am translating downwards, once it reaches a certain point, i want to use the same image and place it directly on top of the translating image, so it appears to be a continuous stream, perpetually coming downward. so like halfway through its translation, i add a copy of the image at the top of the first image. and repeat.

OR if i could somehow use ONE image and cycle it, as if it were circular, or a wheel. This is a slot machine. I won't give the code behind because its top secret(not really) but this is my xaml so far:

<Window x:Class="WpfApplication3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication3"
        mc:Ignorable="d"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="MainWindow" Height="422.846" Width="581.652">
    <Window.Resources>
        <x:ArrayExtension Type="sys:Int32" x:Key="arr">
            <sys:Int32>2100</sys:Int32>
            <sys:Int32>3000</sys:Int32>
            <sys:Int32>4200</sys:Int32>
            <sys:Int32>6000</sys:Int32>
            <sys:Int32>6800</sys:Int32>
            <sys:Int32>1500</sys:Int32>
            <sys:Int32>500</sys:Int32>
            <sys:Int32>8000</sys:Int32>
        </x:ArrayExtension>
        <Storyboard x:Key="SB2">
            <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
                             Duration="0:0:4"
                             To="2900">
                <DoubleAnimation.EasingFunction>
                    <SineEase EasingMode="EaseOut">

                    </SineEase>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
        <Storyboard x:Key="SB3">
            <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
                             Duration="0:0:3"
                             To="2100">
                <DoubleAnimation.EasingFunction>
                    <SineEase EasingMode="EaseOut">

                    </SineEase>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
        <Storyboard x:Key="SBName">
            <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
                                                 Duration="0:0:6"
                                                 To="4111">
                <DoubleAnimation.EasingFunction>
                    <SineEase EasingMode="EaseOut">

                    </SineEase>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </Window.Resources>

    <Grid>
        <Image x:Name="im" Source="E:/fruit_roll.png" Stretch="None" Width="125" Height="8210" Margin="76,-7705,374.2,-109.8">
            <Image.RenderTransform>
                <TranslateTransform/>
            </Image.RenderTransform>
        </Image>
        <Image x:Name="im1" Source="E:/fruit_roll.png" Stretch="None" Width="125" Height="8210" Margin="223,-7705,227.2,-109.8">
            <Image.RenderTransform>
                <TranslateTransform/>
            </Image.RenderTransform>
        </Image>
        <Image x:Name="im2" Source="E:/fruit_roll.png" Stretch="none" Width="125" Height="8210" UseLayoutRounding="True" SnapsToDevicePixels="True" Margin="370,-7705,80.2,-109.8">
            <Image.RenderTransform>
                <TranslateTransform/>
            </Image.RenderTransform>
        </Image>

        <Image x:Name="slot" Source="E:/Slot-Machine.png" Margin="-50,-187,-63.8,-166.8"/>
        <Button x:Name="button1" Content="Button" Click="button_Click_2" Margin="235,302,283.2,61.2" Background="#FFB00000" AllowDrop="True" BorderBrush="#FFFF8484" Opacity="0.15"/>
    </Grid>
</Window>

Any ideas or suggestions on how to make this appear to be continuous would be great.

Answer 1

Something like this should work:

<Rectangle>
    <Rectangle.Fill>
        <ImageBrush
            ImageSource="E:/fruit_roll.png" TileMode="Tile"
            Viewport="0,0,125,8000" ViewportUnits="Absolute">
            <ImageBrush.Transform>
                <TranslateTransform/>
            </ImageBrush.Transform>
        </ImageBrush>
    </Rectangle.Fill>
    <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetProperty="Fill.Transform.Y"
                        To="-8000" Duration="0:0:5"
                        RepeatBehavior="Forever"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Rectangle.Triggers>
</Rectangle>