wpf - 带百分比坐标的面板

Question

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

我做了 2 次尝试:

1. 使用网格并将大小指定为星星 - 这还不够，因为默认情况下 AFAIK WPF 无法为星星指定的距离属性设置动画。我在某个地方找到了一个自定义类，它使我能够这样做，它甚至有效，但我认为该解决方案过于复杂，我正在寻找更简单的方法。

2. 使用固定宽度和高度的 Canvas 并将其放在 Viewbox 中 - 这是一个简单的解决方案，但在调整 Viewbox 大小时，Canvas 的整个内容也会调整大小。我希望内容具有固定大小。

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

干杯!

Answer 1

我会:

• 子类 Canvas ，也许称之为 RelativeCanvas或 RatioCanvas
• 添加两个附加属性:XRatio和 YRatio
• 覆盖ArrangeOverride并遍历所有 child 。对于每个 child ，使用他们的 XRatio和 YRatio连同 ActualWidth和 ActualHeight的 RelativeCanvas计算并应用其 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>

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