如何使边距相对于 UIElement 的中心而不是网格中的左上角？答案

【问题标题】：How to make margin be relative to the center of the UIElement and not its top-left corner in a Grid?如何使边距相对于 UIElement 的中心而不是网格中的左上角？
【发布时间】：2012-04-20 10:49:39
【问题描述】：

我希望Margin 属性引用UIElement 的中心，而不是左上角。这样，当我更改 UIElement 的宽度/高度时，它会保持在同一个位置。

有没有办法配置这种行为，否则我将不得不依靠 Binding 来进行调整？

谢谢。

例如，如果我更改以下矩形的Width/Height，它的中心会移动。

<Grid>
    <Rectangle Fill="#FF991C1C" Width="10" Height="40" HorizontalAlignment="Left" Margin="90,161,0,0" VerticalAlignment="Top"/>
</Grid>

【问题讨论】：

元素的边距不是“相对于它的左上角”，它只是元素边界矩形周围框架的thickness（或四种不同的厚度）。从这个意义上说，它也不能相对于元素的中心。
在这种情况下，设置在 Rectangle 上的 Margin 用于将其定位在 Grid 内，对吗？而且margin的Offset是相对于Rectangle的左上角的吧？
这取决于网格单元内的对齐方式。如果 HorizontalAlignment 为 Right，则元素以相对于上right角的右侧边距右对齐。
明白了！我不知道为什么我昨天能弄明白，对我来说肯定已经太晚了。谢谢你，你的解释帮助很大！

标签： wpf grid margin uielement

【解决方案1】：

为什么不去掉边距，然后使用这些？

HorizontalAlignment="Center"
VerticalAlignment="Center"

【讨论】：

我不希望矩形位于网格的中心，我仍然想将它定位在网格内的给定位置，但该位置必须相对于网格的中心矩形。
你在这点上几乎是正确的。我应该将对齐切换到中心，但保留边距。我几乎可以肯定我昨天在 Blend 上测试了它，但我无法得到我想要的结果，但现在我从头开始做了一个新的测试，它可以工作了！还是谢谢。
如果您将对象居中对齐，您仍然可以应用LayoutTransform 或RenderTransform 将其偏离中心一定量。

【解决方案2】：

由于一个模糊的原因，如果我希望边距相对于中心，我无法弄清楚矩形对齐应该是中心。这段代码使我的 Rectangle 表现得像我想要的那样。

<Grid>
    <Rectangle Fill="#FF991C1C" Width="10" Height="40" HorizontalAlignment="Center" Margin="90,161,0,0" VerticalAlignment="Center"/>
</Grid>

【讨论】：

【解决方案3】：

在某些情况下，当尝试基于元素的中心而不是边缘仅使用单个边距属性定位元素时，我发现此解决方案很有用：

/* Declare a CSS variable equal to your element's width. */

:root{
   --my-element-width: 40px;
}

/* Declare your margin as 50% minus half the element's width */

.myClass {
  margin-right: calc(50% - var(--my-element-width));
}

/* Apply this class to the element in question. */

【讨论】：