CODEWITHSUNDEEP
c#wpf
Qi Tong
Qi Tong

Reputation: 89

How to achieve a background image continuous move in wpf

I have a background image in my wpf application, I want to achieve a effect of the background image continuous move. The following code can achieve a simple effect, but when the time of the end of the picture moves over again, I want to make this picture the effect of the movement has been the phenomenon does not come to a halt.

void StartBackgroudMove()
{
    Storyboard sb = new Storyboard();
    DoubleAnimation TranslateXExtendAnimation = new DoubleAnimation() { From = 0, To = -100, Duration = TimeSpan.FromMilliseconds(2500) };
    Storyboard.SetTarget(TranslateXExtendAnimation, BackgroundImage);
    Storyboard.SetTargetProperty(TranslateXExtendAnimation, new PropertyPath("(FrameworkElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"));
    sb.Children.Add(TranslateXExtendAnimation);
    sb.FillBehavior = FillBehavior.Stop;
    sb.Completed += (s, args) =>
    {
        this.StartBackgroudMove();
    };
    sb.Begin();
}

Upvotes: 1

Views: 4022

Answers (2)

Clemens
Clemens

Reputation: 128013

You may use an ImageBrush with TileMode set to Tile and animate its Viewport property:

<Grid>
    <Grid.Background>
        <ImageBrush ImageSource="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg"
                    Stretch="Fill" TileMode="Tile"
                    ViewportUnits="Absolute" Viewport="0,0,1024,768"/>
    </Grid.Background>
    <Grid.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <RectAnimation Storyboard.TargetProperty="Background.Viewport"
                                   To="-1024,0,1024,768" Duration="0:0:10" 
                                   RepeatBehavior="Forever"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Grid.Triggers>
</Grid>

The following alternative solution places two adjacent images in a Canvas and animates the Canvas' RenderTransform property.

<Grid>
    <Canvas>
        <Canvas.RenderTransform>
            <TranslateTransform x:Name="translation"/>
        </Canvas.RenderTransform>
        <Image Stretch="None"
               Source="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg"/>
        <Image Canvas.Left="1024" Stretch="None"
               Source="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg"/>
    </Canvas>
    <Grid.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="X" 
                                     Storyboard.TargetName="translation"
                                     To="-1024" Duration="0:0:10"
                                     RepeatBehavior="Forever"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Grid.Triggers>
</Grid>

Upvotes: 7

sa_ddam213
sa_ddam213

Reputation: 43596

You can set the Storyboard.RepeatBehavior to RepeatBehavior.Forever

Example:

    void StartBackgroudMove()
    {
        Storyboard sb = new Storyboard();
        DoubleAnimation TranslateXExtendAnimation = new DoubleAnimation() { From = 0, To = -100, Duration = TimeSpan.FromMilliseconds(2500) };
        Storyboard.SetTarget(TranslateXExtendAnimation, BackgroundImage);
        Storyboard.SetTargetProperty(TranslateXExtendAnimation, new PropertyPath("(FrameworkElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"));
        sb.Children.Add(TranslateXExtendAnimation);
        sb.FillBehavior = FillBehavior.Stop;
        sb.RepeatBehavior = RepeatBehavior.Forever;
        sb.Begin();
    }

Upvotes: 0

Related Questions