如何在wpf中实现背景图像的连续移动

Question

我在我的wpf应用程序中有一个背景图像,我希望实现背景图像连续移动的效果.下面的代码可以实现简单的效果,但是当图片结束的时间再次移过时,我想让这张图片运动的效果一直没有停止的现象.

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

Answer 1

您可以使用ImageBrush 设置为其属性并为其TileMode设置Tile动画Viewport:

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

以下替代解决方案将两个相邻图像放置在Canvas中并为Canvas' RenderTransform属性设置动画.

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