移动背景图像超出画布边界

Question

我的问题如下图：

当图像在背景中向左移动时，我不想在画布的红色边框之外看到它。换句话说，我希望红色框成为背景图像的一个窗口。

有没有办法隐藏红框之外的图像部分？

我的 xaml 如下：

<Grid Grid.Row="1" Margin="0,0,10,10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="460*"/>
            <ColumnDefinition Width="668*"/>
        </Grid.ColumnDefinitions>
        <Canvas x:Name="battlefieldBackground" Grid.Column="1">
            <Canvas.Triggers>
                <EventTrigger RoutedEvent="Canvas.Loaded">
                    <BeginStoryboard>
                        <Storyboard Storyboard.TargetName="spaceBackground" Storyboard.TargetProperty="(Canvas.Left)">
                            <DoubleAnimation From="0" To="-3200" Duration="0:04:00" RepeatBehavior="Forever" AutoReverse="True"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Canvas.Triggers>
            <Image x:Name="spaceBackground" Source="Assets/SpaceBackground.jpg" Margin="0" Stretch="UniformToFill"/>
        </Canvas>
        <Border x:Name="battlefieldBorder" BorderThickness="3" Grid.Column="1" BorderBrush="#FF810000"/>
        <!-- Xaml portion for gray grid -->

Answer 1

您可以设置 Canvas 的 Clip 属性。