WinUI中应用变换的正确方法？如何在后台代码实现矩阵变换

问题背景 #

在官方文档中能看到XAML层面实现矩阵变换的示例，比如这段让红色矩形沿X轴平移200单位的代码：

<Rectangle Width="100" Height="100" Fill="Red">
<Rectangle.RenderTransform>
    <MatrixTransform Matrix="1,0,0,1,200,0">
    </MatrixTransform>
</Rectangle.RenderTransform>
</Rectangle>

但很多时候需要在后台C#代码中实现这类变换，比如旋转矩形、动态调整RenderTransform，下面是几种常用的实现方式：

1. 直接创建MatrixTransform赋值 #

对应XAML中的示例，后台代码可以直接实例化MatrixTransform，设置矩阵参数后绑定到元素的RenderTransform属性：

// 假设已获取目标Rectangle实例（比如通过x:Name="myRectangle"）
var matrixTransform = new MatrixTransform();
// Matrix参数顺序：M11, M12, M21, M22, OffsetX, OffsetY
// 此处和XAML示例效果一致，实现X轴平移200单位
matrixTransform.Matrix = new Matrix(1, 0, 0, 1, 200, 0);
myRectangle.RenderTransform = matrixTransform;

2. 使用封装好的变换类（快速实现常见效果） #

如果只是做旋转、缩放这类常规变换，UWP提供了RotateTransform、ScaleTransform等封装类，比手动编写矩阵更直观：

// 让矩形以自身中心为轴旋转45度
var rotateTransform = new RotateTransform();
rotateTransform.Angle = 45;
// 设置旋转中心为矩形自身中心
rotateTransform.CenterX = myRectangle.Width / 2;
rotateTransform.CenterY = myRectangle.Height / 2;
myRectangle.RenderTransform = rotateTransform;

3. 手动构建矩阵实现复杂组合变换 #

如果需要同时实现多种变换（比如旋转+平移+缩放），可以通过Matrix的方法逐步构建变换矩阵：

Matrix matrix = Matrix.Identity;

// 步骤1：将坐标原点移到矩形中心（避免旋转时偏离中心）
matrix.Translate(myRectangle.Width / 2, myRectangle.Height / 2);
// 步骤2：旋转45度
matrix.Rotate(45);
// 步骤3：将坐标原点移回原位置
matrix.Translate(-myRectangle.Width / 2, -myRectangle.Height / 2);
// 步骤4：添加X轴100、Y轴50的平移
matrix.Translate(100, 50);

var matrixTransform = new MatrixTransform();
matrixTransform.Matrix = matrix;
myRectangle.RenderTransform = matrixTransform;

4. 组合多个变换（TransformGroup） #

如果需要给元素叠加多个独立变换，推荐使用TransformGroup将多个变换组合：

var transformGroup = new TransformGroup();
// 添加30度旋转
transformGroup.Children.Add(new RotateTransform { Angle = 30 });
// 添加X轴50单位平移
transformGroup.Children.Add(new TranslateTransform { X = 50 });
myRectangle.RenderTransform = transformGroup;

注意点 #

• RenderTransform仅改变元素的视觉呈现，不会影响它在布局中的占位；如果需要变换影响布局计算，可使用LayoutTransform（仅支持基础变换类型，且会触发布局重算）。

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