通过缩放和滚动保持 child 在 Canvas 中的位置 - WPF

Question

我想实现以下功能。

我有一个 canvas，里面有几个 UIElements。 Canvas 允许缩放和滚动应用缩放和平移变换。

我想保持红色方块始终在同一位置（Canvas 的左下角），作为浮动控件，因此当我更改缩放或滚动时，红色square 始终保持其大小和位置。类似于 google 地图 "Earth window":

实现它的最佳方法是什么？

注意：我尝试使用 WPF adorner layer 但它不响应鼠标事件，我需要与红色方块进行交互。

Answer 1

正如Clemens所说，把它放在上面的另一层。 Grid 可以在同一个单元格中承载多个项目，因此为您的 Canvas 创建一个 1 x 1 Grid 在顶部添加内容，就像任何其他 WPF 布局一样。后面的项目出现在最上面（除非指定了 Z 层）：

<Grid>
    <Canvas>
        ... do all my fancy drawing
    </Canvas>
    <Rectangle VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="100" Height="100" />
</Grid>

请注意，如果 canvas 有任何非 WPF 渲染，例如视频或嵌入的 WindowsForms 内容，您可能会遇到麻烦。我见过有人在上面绘制 WPF 东西时遇到问题。

我也相信你可以设置Canvas.Bottom="20"来设置相对于底部边缘的位置，但我从未使用过它。

通过缩放和滚动保持 child 在 Canvas 中的位置 - WPF

Maintain position for child in a Canvas with zoom and scroll - WPF

wpf

scroll

canvas

zooming