带有百分比坐标的面板答案

【问题标题】：Panel with percentage coordinates带有百分比坐标的面板
【发布时间】：2011-03-30 02:56:04
【问题描述】：

我想使用一个面板，其子项的坐标指定为面板总宽度/高度的百分比。此外，我应该能够为坐标属性设置动画，例如让按钮从面板宽度的 10% 移动到 50%。

我已经尝试了 2 次：

使用网格并将大小指定为星星 - 这还不够，因为 AFAIK 默认情况下 WPF 无法为星星指定的距离属性设置动画。我在某个地方找到了一个自定义类，它使我能够这样做，它甚至可以工作，但是我认为该解决方案过于复杂，我正在寻找更简单的东西。
使用具有固定宽度和高度的 Canvas 并将其放入 Viewbox - 这是一个简单的解决方案，但是当调整 Viewbox 的大小时，Canvas 的整个内容也会调整大小。我希望内容具有固定大小。

是否有一个简单的解决方案，或者我应该实现自己的面板（或者扩展现有面板之一，即 Canvas）？

干杯！

【问题讨论】：

使用没有 Viewbox 的 Canvas。内容将具有固定大小，然后您可以在代码中计算它的百分比。

标签： wpf animation resize panel coordinates

【解决方案1】：

我愿意：

子类Canvas，也许称它为RelativeCanvas 或RatioCanvas
添加两个附加属性：XRatio 和 YRatio
覆盖ArrangeOverride 并遍历所有子级。对于每个孩子，使用他们的XRatio 和YRatio 以及RelativeCanvas 的ActualWidth 和ActualHeight 来计算和应用他们的Canvas.Left 和Canvas.Top 附加属性的值

您可以按如下方式使用它：

<local:RelativeCanvas>
    <!-- the top-left of this button will be center of panel -->
    <Button local:RelativeCanvas.XRatio="50" local:RelativeCanvas.YRatio="50"/>
</local:RelativeCanvas>

在完成这项工作后，您可能想添加的一件事是控制对齐。例如，我可能会将控件的 center 对齐到指定的比例，而不是左上角。

【讨论】：

谢谢！我不知道 ArrangeOverride 方法，这似乎是最干净的解决方案。我会将新面板放入某个 dll 中，使其可重复使用。
你能详细解释一下吗？如何根据 XRatio 和 YRatio 计算新的 left 和 top？如何得到 XRatio 和 Yratio？
请注意，如果您要绑定 XRatio/YRatio（甚至绑定到 const 值），上述步骤还不够。尽管Canvas.Top 在ArrangeOverride() 期间设置正确，但对于数据绑定值（可能是一些内部排序问题？）不尊重。只有 XAML 文字似乎可以正常工作。

【解决方案2】：

这里有一个：WPF Proportional Panel

【讨论】：

链接失效
链接仍然失效