使用WPF中的XAML，通过其中心（而不是左上角）在Canvas中定位元素 [英] Positioning an element inside the Canvas by its center (instead of the top left corner) using only XAML in WPF
问题描述
关于在 Canvas 中定位元素的常见问题是如何定位元素的中心（而不是左上角）。
The common question about positioning an element inside a Canvas is "How to position the center of element (instead of the top left corner)".
- WPF: Resizing a circle, keeping the center point instead of TopLeft?
- WPF Center Ellipse at X, Y
- WPF element positioning on a Canvas
解决方案，但他们都有缺点。
Several solutions are presented, but they all have drawbacks.
最简单的解决方案是适应元素大小期间设置 Canvas.Left 和 Canvas.Top 属性。这工作，但只有一次。此解决方案不支持绑定，它会在元素大小更改时中断。您也不能使用
The easiest solution is to accommodate the element size during while setting the Canvas.Left and Canvas.Top properties programmatically. This works, but only once. This solution doesn't support bindings and it will break when the element size is changed. You also cannot set the Canvas.Left or Canvas.Top using
另一组解决方案涉及使用 RenderTransform 或 Margin 的转换转换。这些解决方案需要绑定一些属性到 -0.5 * Width 或 -0.5 * Height 。这种绑定需要创建一个自定义的 ValueConverter ，并且不可能仅使用XAML创建。
Another set of solutions involve translate transformations utilizing either RenderTransform or Margin. These solutions require binding some property to the -0.5 * Width or -0.5 * Height. Such binding requires creating a custom ValueConverter and is impossible to create using only XAML.
有一个简单的方法定位一个元素在画布中，使其 Canvas.Left 和 Canvas.Top 对应于元素中心，大小和位置属性可以绑定到一些其他属性？
So, is there a simple way to position an element inside canvas so that its Canvas.Left and Canvas.Top correspond to the element's center and both size and position properties can be bound to some other properties?
推荐答案
XAML和绑定似乎非常强大，但有时还有简单的问题，需要非常复杂的解决方案。在我的绑定库中创建这样的绑定将像编写 element.Center = position 或 element.TopLeft = position - element.Size / 2 ，但不要让我失望。
XAML and bindings seem very powerful, but sometimes there are simple problems that require very complex solutions. In my bindings library creating such binding would be as easy as writing element.Center = position or element.TopLeft = position - element.Size / 2, but don't let me get carried away.
我发现一个非常简单的解决方案，只使用XAML和支持绑定元素的大小和位置属性。看起来当对齐集合的WPF控件 Stretch 或中心放置在画布中时，元素gravitates 向中心作为（Canvas.Left，Canvas.Top）点（我们希望的状态），但被角板 code>（Canvas.Left，Canvas.Top）点。我怎么知道这个引力？当你通过将元素的 Margin 设置为负值来缓解块时，这是很明显的。设置负边距允许元素向其中心目标移动。元素移动，直到 Margin 达到（ - Height / 2，-Width / 2）中心在（Canvas.Left，Canvas.Top）点。
I've found a very simple solution which uses only XAML and supports binding both size and position properties of the element. It seems that when the WPF control with alignment set too Stretch or Center is placed inside the canvas, the element "gravitates" towards centering as the (Canvas.Left, Canvas.Top) point (the state that we desire), but is stopped by the "angle plate" placed at the same (Canvas.Left, Canvas.Top) point. How do I know about this "gravitation"? It's evident when you ease the block by setting the Margin of the element to a negative value. Setting the negative margin allows the element to move towards its center goal. The element moves until the Margin reaches (-Height / 2, -Width / 2) so that the element becomes perfectly centered at the (Canvas.Left, Canvas.Top) point. Further changes don't cause any movement since the element is already perfectly positioned.
解决方案：set Margin = - 1000000。
Solution: set Margin="-1000000".
因此在下面的代码中，椭圆都以（200，200）点为中心。第一个椭圆具有与椭圆中心相对应的 Left 和顶部属性，允许轻松地将它们与一些其他对象的属性。
So in the following code the ellipses are both centered at the (200, 200) point. The first ellipse has Left and Top properties corresponding to the ellipse center allowing to easily bind them with some other objects' properties.
<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没有描述的行为。
The bad thing is this solution only work in WPF. Silverlight and WinRT don't have the described behavior.
这篇关于使用WPF中的XAML，通过其中心（而不是左上角）在Canvas中定位元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
