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

您可以使用 TileMode 设置为 Tile 的 ImageBrush 并为其 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>