在WPF中仅使用XAML将元素定位在"画布"中的中心(而不是左上角)

Question

关于在a中定位元素的常见问题Canvas是"如何定位元素的中心(而不是左上角)".

• WPF:调整圆圈大小,保持中心点而不是TopLeft？
• X,Y处的WPF中心椭圆
• WPF元素在Canvas上的定位

提出了几种解决方案,但它们都有缺点.

最简单的解决方案是在以编程方式设置Canvas.Left和Canvas.Top属性期间适应元素大小.这有效,但只有一次.此解决方案不支持绑定,并且在元素大小更改时会中断.您也无法设置Canvas.Left或Canvas.Top使用

另一套方案涉及转换的转换利用两种RenderTransform或Margin.这些解决方案需要将一些属性绑定到-0.5 * Width或-0.5 * Height.这种绑定需要创建自定义ValueConverter,并且不可能仅使用XAML创建.

那么,是否有一种简单的方法可以在画布中定位元素,使其Canvas.Left与Canvas.Top元素的中心对应,并且大小和位置属性都可以绑定到其他属性？

Answer 1

XAML和绑定似乎非常强大,但有时会出现需要非常复杂的解决方案的简单问题.在我的绑定库创建这样的结合将是写作一样容易element.Center = position或element.TopLeft = position - element.Size / 2,但不要让我忘乎所以.

我发现了一个非常简单的解决方案,它只使用XAML并支持绑定元素的大小和位置属性.似乎当具有对齐设置的WPF控件Stretch或Center放置在画布内时,元素"重力"朝向居中作为(Canvas.Left, Canvas.Top)点(我们想要的状态),但是被放置在同(Canvas.Left, Canvas.Top)一点的"角板"停止.我怎么知道这个"万有引力"？当你通过将Margin元素设置为负值来缓解块时,这是显而易见的.设置负边距允许元素朝向其中心目标移动.元素移动直到Margin到达,(-Height / 2, -Width / 2)以便元素完全居中于(Canvas.Left, Canvas.Top)点.由于元素已经完美定位,因此进一步的更改不会导致任何移动.

解决方案:设置Margin="-1000000".

因此,在下面的代码中,省略号都以(200,200)点为中心.第一个椭圆具有Left与Top椭圆中心对应的属性,允许轻松地将它们与其他对象的属性绑定.

<Canvas>
    <Ellipse Width="100" Height="100" Canvas.Left="200" Canvas.Top="200" Opacity="0.5" Fill="Red" Margin="-100000" />
    <Ellipse Width="100" Height="100" Canvas.Left="150" Canvas.Top="150" Opacity="0.5" Fill="Blue" />
</Canvas>

不好的是这个解决方案只适用于WPF.Silverlight和WinRT没有描述的行为.