如何将UWP中Canvas控件的坐标原点调整为右下角？

UWP 原生 Canvas 默认坐标系以左上角为(0,0)原点，X轴向右增长、Y轴向下增长，要将原点改为右下角，可以参考以下三种方案：

方案1：通过变换属性直接修改坐标系（零业务代码侵入） #

直接给 Canvas 添加变换组合，一步调整坐标系，不需要修改原有子元素的坐标赋值逻辑：

• 给 Canvas 的 RenderTransform 属性配置 TransformGroup，包含两步变换：
  1. 先通过缩放翻转把X、Y轴的增长方向反转，让X轴向左增长、Y轴向上增长
  2. 再通过平移变换把翻转后的原点移动到原Canvas的右下角位置

XAML 示例代码：

<Canvas x:Name="CustomCanvas" Width="400" Height="300" Background="LightGray">
    <Canvas.RenderTransform>
        <TransformGroup>
            <!-- 水平+垂直翻转，反转轴方向 -->
            <ScaleTransform ScaleX="-1" ScaleY="-1" />
            <!-- 绑定Canvas实际宽高做平移，适配Canvas大小变化场景 -->
            <TranslateTransform X="{Binding ActualWidth, ElementName=CustomCanvas}" Y="{Binding ActualHeight, ElementName=CustomCanvas}" />
        </TransformGroup>
    </Canvas.RenderTransform>

    <!-- 测试：该矩形会显示在Canvas右下角，对应自定义坐标系的(0,0)位置 -->
    <Rectangle Canvas.Left="0" Canvas.Top="0" Width="50" Height="50" Fill="Red" />
</Canvas>

注意：该方案会让Canvas内所有子元素跟着同步翻转，如果需要子元素正常显示，可以给每个子元素单独再加一次ScaleX="-1" ScaleY="-1"的变换，或者选用后面两种方案。

方案2：手动坐标换算（无变换副作用） #

如果不想改动Canvas的渲染属性，避免子元素翻转问题，可以在给子元素赋值坐标时手动做换算，换算公式如下：

子元素原生Canvas.Left = Canvas实际宽度 - 目标坐标系X值 - 子元素自身宽度
子元素原生Canvas.Top = Canvas实际高度 - 目标坐标系Y值 - 子元素自身高度

C# 代码示例：

// 目标坐标系下的(0,0)位置
double targetX = 0;
double targetY = 0;

// 要添加的子元素
var testRect = new Rectangle
{
    Width = 50,
    Height = 50,
    Fill = new SolidColorBrush(Colors.Red)
};

// 换算为原生Canvas的坐标
double canvasX = CustomCanvas.ActualWidth - targetX - testRect.Width;
double canvasY = CustomCanvas.ActualHeight - targetY - testRect.Height;
Canvas.SetLeft(testRect, canvasX);
Canvas.SetTop(testRect, canvasY);

CustomCanvas.Children.Add(testRect);

方案3：封装自定义Canvas（适合高频复用场景） #

如果项目中经常需要使用右下角为原点的Canvas，可以继承原生Canvas类，重写ArrangeOverride方法，自动处理所有子元素的坐标换算，不需要业务层做额外处理，也不会有变换翻转的副作用。

内容的提问来源于stack exchange，提问作者semicolon