c# - XAML 图像被截断

Question

在 XAML 中，我试图制作一个大图像，该图像被裁剪为背景，以缓慢地在屏幕上移动，直到它到达另一边的图像。问题是图像总是不会比显示器大，即使它被拉长了。所以我留下了一个屏幕大小的图像，并带有黑色背景。

        <Image x:Name="background" HorizontalAlignment="Left" Grid.Row="1" Width="1500" Stretch="Fill" MaxWidth="1500" MinWidth="1500">
        <Image.RenderTransform>
                <TranslateTransform x:Name="bgTranslate" X="0"></TranslateTransform>
            </Image.RenderTransform>
        </Image>

Answer 1

Grid 控件使用可用的单元格大小排列图像。然后，在应用任何 RenderTransform 之前，Image 控件会切掉位于排列矩形之外(因此不可见)的图像部分。

一个简单的解决方法是将图像放在 Canvas 中，它会按照所需的大小排列其子元素:

<Grid ...>
    ...
    <Canvas Grid.Row="1">
        <Image x:Name="background" Width="1500">
            <Image.RenderTransform>
                <TranslateTransform x:Name="bgTranslate"/>
            </Image.RenderTransform>
        </Image>
    </Canvas>
    ...
</Grid>