### RenderTransform 在 WPF 中的作用 `RenderTransform` 是 WPF 提供的一个属性，用于指定应用于 UIElement 的转换。它允许开发人员对元素应用平移、缩放、旋转和倾斜等变换操作[^1]。 以下是 `RenderTransform` 常见的使用场景以及一些示例代码： --- ### 示例代码：基本的 RotateTransform (旋转) 下面是一个简单的例子，展示如何通过 `RotateTransform` 对按钮进行旋转： ```xml <Window x:Class="WpfApp.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="RenderTransform Example" Height="350" Width="525"> <Grid> <Button Content="Rotating Button" HorizontalAlignment="Center" VerticalAlignment="Center" Width="150" Height="50"> <Button.RenderTransform> <RotateTransform Angle="45" CenterX="75" CenterY="25"/> </Button.RenderTransform> </Button> </Grid> </Window> ``` 在这个例子中，按钮被顺时针旋转了 45 度，并设置了旋转中心点 `(75, 25)`[^1]。 --- ### 示例代码：ScaleTransform (缩放) 以下是如何利用 `ScaleTransform` 来放大或缩小一个矩形的例子： ```xml <Rectangle Fill="Blue" Width="100" Height="100" Margin="10"> <Rectangle.RenderTransform> <ScaleTransform ScaleX="2" ScaleY="0.5"/> </Rectangle.RenderTransform> </Rectangle> ``` 这段代码会将蓝色矩形水平方向拉伸两倍 (`ScaleX=2`) 并垂直压缩一半 (`ScaleY=0.5`)[^1]。 --- ### 示例代码：TranslateTransform (位移) 如果想让某个控件移动到新的位置，则可以使用 `TranslateTransform`： ```xml <Ellipse Fill="Red" Width="50" Height="50"> <Ellipse.RenderTransform> <TranslateTransform X="100" Y="100"/> </Ellipse.RenderTransform> </Ellipse> ``` 此代码片段中的椭圆会被向右偏移 100 单位并向下方偏移 100 单位。 --- ### 组合多个 Transform 还可以组合多种类型的变换来达到更复杂的效果。例如，同时执行旋转和平移的操作如下所示： ```xml <Button Content="Combined Transforms" Width="150" Height="50"> <Button.RenderTransform> <TransformGroup> <RotateTransform Angle="-30"/> <TranslateTransform X="80" Y="80"/> </TransformGroup> </Button.RenderTransform> </Button> ``` 在这里，按钮首先逆时针旋转 `-30` 度，接着再沿坐标轴正方向分别移动 80 个单位距离。 --- ### 动画配合 RenderTransform 实现动态效果 为了使界面更加生动有趣，通常还会结合动画技术一起运用这些变换功能。比如制作一个不断变大又恢复原状的圆形动画： ```xml <Window.Resources> <Storyboard x:Key="GrowShrinkAnimation"> <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" From="1" To="1.5" Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever"/> <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" From="1" To="1.5" Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever"/> </Storyboard> </Window.Resources> <Grid> <Ellipse Fill="Green" Width="100" Height="100"> <Ellipse.Triggers> <EventTrigger RoutedEvent="Loaded"> <BeginStoryboard Storyboard="{StaticResource GrowShrinkAnimation}"/> </EventTrigger> </Ellipse.Triggers> <Ellipse.RenderTransform> <ScaleTransform/> </Ellipse.RenderTransform> </Ellipse> </Grid> ``` 该部分展示了当窗口加载完成后立即启动一个无限循环播放的大小变化动画过程[^2]。 --- #### 注意事项 虽然可以通过设置 `RenderTransformOrigin` 属性改变默认的变换基点，默认值为 `(0.5, 0.5)` 表示对象中心作为参考点；但如果希望获得精确控制的话建议显式声明具体的数值范围应位于 `[0..1]` 区间内。