如何使页边空白相对于UIElement的中心，而不是其相对于网格的左上角？

Question

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

是否可以配置此行为，否则我将不得不依靠Binding进行调整？

谢谢。

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

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

Answer 1

为什么不删除边距，并使用这些？

HorizontalAlignment="Center"
VerticalAlignment="Center"

Answer 2

出于不明确的原因，如果我想让Margin相对于中心，则我无法确定Rectangle Alignment应该为Center。此代码使我的Rectangle表现得像我想要的。

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

Answer 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. */