如何防止 WPF 剪切我的图像？答案

【问题标题】：How can I prevent WPF from clipping my image?如何防止 WPF 剪切我的图像？
【发布时间】：2023-03-19 08:18:01
【问题描述】：

我正在编写一个 WPF 应用程序，它显示最初居中的图像。用户可以放大/缩小和移动图像，使用ScaleTransform和TranslateTransform实现。效果很好。

问题是当图像明显大于窗口时，用户移动图像或缩小到足以使整个图像可见。最初隐藏的图像部分不会被渲染，而是只绘制图像最初可见的部分。

基于一些other questions，如果我将我的图像放在Canvas 中，这将导致整个图像被渲染，并且在移动时它将被正确渲染。问题是我不希望我的图像位于 Canvas 中，因为这会阻止任何其他布局发生 - HorizontalAlignment 和 VerticalAlignment 属性被忽略（因此图像不再居中），并且我需要实现一个选项，该选项将尽可能大地绘制图像以填充不再起作用的窗口的整个区域（将Stretch 属性设置为UniformToFill 没有任何作用）。

目前这两个转换都设置为RenderTransform 属性。如果我改用LayoutTransform，则会绘制整个图像，但这也会阻止用户将图像的任何部分移出窗口边缘（这是我希望保留的行为）。

如何告诉 WPF 在不使用 Canvas 或 LayoutTransform 的情况下始终呈现整个图像？

【问题讨论】：

标签： wpf clipping

【解决方案1】：

我建议不要使用 TranslateTransform，而是使用 ScrollViewer。

<ScrollViewer>
   <Grid>
      <Image Source="blabla">
          <Image.LayoutTransform>
              <ScaleTransform />
          </Image.LayoutTransform>
      </Image>
   </Grid>
</ScrollViewer>

ScrollViewer 给 Image 无限的扩展空间，整个图片都会被渲染。网格强制居中布局，同时仍允许图像扩展。如果您不喜欢滚动条来控制翻译，那么您可以隐藏它们并滚动您自己的解决方案。

LayoutTransform 绝对是要走的路，以便图像的实际像素大小（基于缩放）正确反映到您的窗口上。

【讨论】：

这似乎工作得很好。一件事不起作用（我承认我忘了在问题中提到 - 对不起！）是我的图像有一个 RenderTransformOrigin 设置为 0.5, 0.5 以便缩放在图像的中心进行。随着ScrollViewer 的放大，最终会聚焦在图像的左上角。在这种情况下，有没有办法强制缩放在图像的中心进行？
安迪：stackoverflow.com/questions/6447114/… 应该回答你的问题。
是的，这似乎工作得很好。我必须做的唯一更改是更改滚动偏移以响应 ScrollViewer 的 OnScrollChanged()，因为在我的情况下，滚动信息尚未更新，我得到了一些奇怪的结果。谢谢您的帮助。 :)