WPF中如何进行相对定位？

Question

如何在WPF中相对定位元素？ 标准模型是使用布局管理器来完成所有操作，但如果您只想基于其他元素的位置（例如在Canvas上）定位元素，应该怎么办？

例如，您可能希望将一个元素（比如一个按钮）附加到另一个元素（例如一个面板）的一侧，而不考虑该面板的位置或布局。 任何使用工程工具（例如SolidWorks、AutoCad等）的人都熟悉这种相对定位。

在某些情况下，强制将所有内容都放入布局管理器（不同的WPF面板）并不是很合理，特别是当您不关心元素是否由某个父容器维护，并且您不希望其他子元素受到彼此布局/外观变化的影响时。WPF是否以任何方式支持此相对定位模型？

- Marchy

---

我不确定我完全理解这个问题。你能举一个屏幕布局的例子，你认为不能用WPF模型实现吗？ - 17 of 26

我同意，这个问题很令人困惑...看起来一个简单的StackPanel就可以解决问题。 - cplotts

我认为这并不令人困惑，而且 StackPanel 只能处理最简单的情况。他想要的是在 Android 中等效于 RelativeLayout 的功能。 - user316117

这就是它（Android的RelativeLayout）。似乎WPF不支持这种布局场景。我找到的最佳解决方案是在想要相对定位的任何UI元素周围包装一个Canvas，然后使用Canvas.Top/Bottom/Left/Right将元素相对于画布的边界（以及包装元素）放置。 - Marchy

15年后... Android在2017年迎来了更好的继任者"ConstraintLayout"（还有一些我还没怎么关注的新选项，比如Compose），而你在WPF中做的是像25年前的HTML一样的表格布局... :D - undefined

Answer 1

不要像你的示例那样直接在画布上放置按钮，而是可以在画布上放置一个水平对齐的堆栈面板，并将两个按钮放入其中。

就像这样：

<Canvas>
  <StackPanel Canvas.Left="100" Canvas.Top="100" Orientation="Horizontal">
    <Button>Button 1</Button><Button>Button 2</Button>
  </StackPanel>
</Canvas>

我认为当你在一个表单中使用多个布局时，它是非常灵活的，你可以创建几乎任何你想要的配置。

- Dave Arkell

---

将Jobi Joy的建议与此建议结合起来，我想这可能是一个解决方法： 您可以在Canvas中放置一个Stackpanel，并使用TranslateTransform来调整元素之间的距离。 - ArthurT

Answer 2

好问题。据我所知，我们需要有一个不同的自定义面板才能获得此功能。由于WPF是基于视觉层次结构的，因此在平台上没有办法对元素进行此类平面结构。

但是这里有一个技巧可以实现。将您的元素放置在相同位置，并使用RenderTransform.TranslateTransform给予相对位移。这样，您的TranslateTransform的X和Y将始终与其他元素相关。

- Jobi Joy

---

“WPF基于可视化层次结构，这是不可能的” - 这自从WPF的第一个版本以来就是错误的。请参考Grid。 - Gusdor

@Gusdor 如果你使用拖放设计器，它会将所有内容放在 Grid（或其他根元素）内，并给它们添加边距以保持它们的位置。我认为你可以称之为平面视觉结构。 - Zack