如何根据容器的大小转换元素的位置

Question

这是一个假设性的问题，我希望这些是允许的。

我一直在试图弄清楚如何进行这种计算，而且看起来非常简单（这使得它更令人沮丧）。

假设我在500x500画布上有一个100x100子元素，我可以在父母内部移动。假设可拖动子元素的当前坐标是x = 42和y = 30.

<Canvas Width="500" Height="500">
 <Grid Background="Gray" Canvas.Left="42" Canvas.Top="30" Width="100" Height="100" />
</Canvas>

如果我要调整大小父画布，我将如何调整子元素的Top和Left属性，以便它们始终处于相对位置父母，无论父母是多大？

众所周知，这个功能在网格中很容易实现（通过设置水平和垂直对齐），但是一旦将控件拖动到网格中的另一个位置，内置网格定位就毫无价值。

如果有人知道如何实现这一点，我很乐意接受C＃，VB.NET或XAML中的任何想法。

Answer 1

您可以将事件处理程序附加到更改的画布大小。然后通过检查先前和当前大小按比例设置内部控件的上下。确定大小更改因子是什么，并将该因子乘以左侧和顶部的附加属性值。

请注意，高度和顶部的因子不同，宽度和左侧的因子也不同。

Answer 2

如果你想要一个恒定的上/下，那么公式就是保持偏移/尺寸比不变。所以：

• old left / old width = new left / new width
• new left = old left * new width / old width
• new left = 42/500 * new width

如果你想考虑孩子的宽度（我猜你可能会这样做），那么你会从计算中减去它的宽度。

• new left = old left *（新宽度 - 子宽度）/（旧宽度 - 子宽度）
• new left = 42 *（新宽度 - 100）/（500 - 100）
• new left =（42/400）*（新宽度 - 100）

第一种方法是给你一个比例上/下：

第二个给你一个比例中心：

Answer 3

如果您使用顶部和左侧的％值，该怎么办？

Canvas.Left =“10％”Canvas.Top =“15％”