WPF：如何使 (0,0) 位于画布中心

Question

WPF Canvas 有一个坐标系，从控件左上角的 (0,0) 开始。

例如，设置以下内容将使我的控件显示在左上角：

<Control Canvas.Left="0" Canvas.Top="0">

如何将其更改为标准 笛卡尔坐标？

基本上：

• （0,0）在中心
• 翻转Y

我注意到这篇文章 类似，但它没有讨论转换坐标系。我尝试添加 TranslateTransform，但无法使其工作。

Answer 1

无需创建自定义面板。Canvas 就可以了。只需将其包裹在另一个控件（例如边框）内，将其居中，将其大小设置为零，然后使用 RenderTransform 翻转它：

<Border>
  <Canvas HorizontalAlignment="Center" VerticalAlignment="Center"
          Width="0" Height="0"
          RenderTransform="1 0 0 -1 0 0">
    ...
  </Canvas>
</Border>

您可以执行此操作，画布中的所有内容仍然会出现，除了 (0,0) 位于包含控件的中心（在本例中为边框的中心）和 +Y 将向上而不是向下。

同样，不需要为此创建自定义面板。

Answer 2

这很容易做到。我使用 .NET Reflector 查看了原始 Canvas 的代码，发现实现实际上非常简单。唯一需要的就是重写函数 ArrangeOverride(...)

public class CartesianCanvas : Canvas
{
    public CartesianCanvas()
    {
        LayoutTransform = new ScaleTransform() { ScaleX = 1, ScaleY = -1 };
    }
    protected override Size ArrangeOverride( Size arrangeSize )
    {
        Point middle = new Point( arrangeSize.Width / 2, arrangeSize.Height / 2 );

        foreach( UIElement element in base.InternalChildren )
        {
            if( element == null )
            {
                continue;
            }
            double x = 0.0;
            double y = 0.0;
            double left = GetLeft( element );
            if( !double.IsNaN( left ) )
            {
                x = left;
            }

            double top = GetTop( element );
            if( !double.IsNaN( top ) )
            {
                y = top;
            }

            element.Arrange( new Rect( new Point( middle.X + x, middle.Y + y ), element.DesiredSize ) );
        }
        return arrangeSize;
    }
}

Answer 3

您只需使用 RenderTransformOrigin 更改原点即可。

    <Canvas Width="Auto" Height="Auto"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            RenderTransformOrigin="0.5,0.5">
        <Canvas.RenderTransform>
            <TransformGroup>
                <ScaleTransform ScaleY="-1" ScaleX="1" />
            </TransformGroup>
        </Canvas.RenderTransform>
    </Canvas>

Answer 4

最好的就是写一个自定义的Canvas，在里面可以这样写ArrangeOverride，以0,0为中心。

更新：我在下面的答案中给出了另一条评论（@decasteljau），我不建议从 Canvas 派生，您可以从 Panel 派生并添加两个附加依赖属性“顶部”和“左侧”，并放置与上面粘贴的相同代码。也不需要带有 LayoutTransform 的构造函数，并且不要在面板代码上使用任何转换，使用适当的测量并根据面板的 DesiredSize 进行排列，这样您也可以获得良好的内容调整大小行为。当 Canvas 大小发生变化时，Canvas 不会动态定位项目。