WPF 动态变换（RenderTransform和LayoutTransform）-CSDN博客

本文详细介绍了WPF中的LayoutTransform和RenderTransform的区别，以及如何使用这两种变换方式进行元素的布局和渲染。同时，文章列举了四种基本的变换类型：TranslateTransform（平移）、RotateTransform（旋转）、ScaleTransform（缩放）和SkewTransform（扭曲），并展示了它们在实际应用中的例子。此外，还提到了TransformGroup用于组合多种变换效果，以及MatrixTransform的使用，通过矩阵算法实现复杂变换。

布局系统

WPF提供两种变换方式，分别是LayoutTransform和RenderTransform。从字面意思来讲LayoutTransform是布局变换，后者RenderTransform是渲染变换。

在WPF中，许多绘图任务通过使用变换(transform)可以变得更加简单——变换是通过不加通告地切换形状或元素使用的坐标系统来改变形状或元素绘制方式的对象。在WPF中，变换的一些类大多继承自System.Windows.Media.Trandform。下面是这些类的列表：

TranslateTransform:将坐标系统移动一定的距离。
RolateTransform:旋转坐标系统。
ScaleTransform:放大或最小坐标系统。
SkewTransform:通过倾斜一定的角度扭曲坐标系统。
MatrixTransform:使用提供的矩阵的乘积修改坐标系统。
TransfromGroup:组合多个变换。

变换形状

　为了变换形状，将RenderTransform属性指定为希望使用的变换对象，根据使用的变换对象，需要填充不同的属性以配置变换对象，也就是我们上面列举的一些类。列如：

 <Button Content="I AM Rotated 35" Width="100">
         <Button.RenderTransform>
                 <RotateTransform Angle="35"></RotateTransform>
           </Button.RenderTransform>
 </Button>

　这里我们将按钮旋转了35度。但是RenderTransform不是在WPF积累中定义的唯一与变换相关的属性。FrameworkElement类还定义了一个LayoutTransform属性。LayoutTransform属性以相同的方式变换元素，但它是在布局之前执行工作，开销比RenderTransform要大，那么我们看一下两者的区别：

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <StackPanel>
            <Button Content="I AM Rotated 35" Width="100">
                <Button.RenderTransform>
                    <RotateTransform Angle="35"></RotateTransform>
                </Button.RenderTransform>
            </Button>
            <Button>I am not</Button>
        </StackPanel>

        <StackPanel Grid.Row="1">
            <Button Content="I AM Rotated 35" Width="100">
                <Button.LayoutTransform>
                    <RotateTransform Angle="35"></RotateTransform>
                </Button.LayoutTransform>
            </Button>
            <Button>I am not</Button>
        </StackPanel>
    </Grid>

该窗口包含两个StackPanel，分别都有两个按钮，一个使用了RenderTransform属性，另一个使用LayoutTransform，第一个StackPanel对两个按钮进行布局时，第一个按钮正常定位，并且在即将呈现之前旋转改按钮。因此旋转过的按钮被重叠在下面。而第二个StackPanel容器中，第一个按钮在呈现之后才进行旋转，也就是LayoutTransform在布局之前执行其工作。看一下效果：

TranslateTransform(平移变化)：

包含X、Y 两种属性，以原来的对象为坐标原点(0,0),然后向X轴、Y轴进行平移变换。

<Canvas>
         <Image Canvas.Top="160" Canvas.Left="140" Source="sun.jpg" Opacity="0.5"></Image>
         <Image Canvas.Top="160" Canvas.Left="140"  Source="sun.jpg">
             <Image.RenderTransform>
                 <TranslateTransform X="120" Y="120"></TranslateTransform>
             </Image.RenderTransform>
         </Image>
</Canvas>

RotateTransform(旋转变化):

包括属性Angle（旋转角度），CenterX、CenterY（旋转的中心）

<Canvas>
         <Image Canvas.Top="160" Canvas.Left="140" Source="sun.jpg" Opacity="0.5"></Image>
         <Image Canvas.Top="160" Canvas.Left="140"  Source="sun.jpg">
             <Image.RenderTransform>
                 <RotateTransform Angle="45" CenterX="0" CenterY="0"></RotateTransform>
             </Image.RenderTransform>
         </Image>
</Canvas>

ScaleTransform(缩放变化)：

包括属性ScaleX、ScaleY、CenterX、CenterY，其中ScaleX、ScaleY属性表示对象在X、Y轴进行缩放的倍数，使用CenterX 和 CenterY属性指定一个中心点。

<Canvas>
         <Image Canvas.Top="160" Canvas.Left="140" Source="sun.jpg" Opacity="0.5"></Image>
         <Image Canvas.Top="160" Canvas.Left="140"  Source="sun.jpg">
             <Image.RenderTransform>
                 <ScaleTransform ScaleX="0.5" ScaleY="0.5"></ScaleTransform>
             </Image.RenderTransform>
         </Image>
</Canvas>

SkewTransform(扭曲变化)：

包括属性AngleX、AngleY、CenterX、CenterY。其中使用AngleX让元素相对X轴倾斜角度，AngleY是让元素围绕Y轴的倾斜角度。同样CenterX和CenterY是中心点位置。

<Canvas>
         <Image Canvas.Top="160" Canvas.Left="140" Source="sun.jpg" Opacity="0.5"></Image>
         <Image Canvas.Top="160" Canvas.Left="140"  Source="sun.jpg">
             <Image.RenderTransform>
                 <SkewTransform AngleX="30" AngleY="10"></SkewTransform>
             </Image.RenderTransform>
         </Image>
</Canvas>

TransformGroup：

缩放、旋转、扭曲等变化效果合并起来。以上四种基本变化只是单一的变化，如果想要实现多种效果的叠加，那么就要使用到TransformGroup，否则会报错。TransformGroup的作用类似于在控件布局中的StackPanel内嵌的作用，是把多种变化元素组合成一种变化的容器。

<Canvas Width="640" Height="480">
         <Rectangle Canvas.Top="20" Canvas.Left="200" Width="400" Height="300" Stroke="Black" StrokeThickness="5">
             <Rectangle.RenderTransform>
                 <TransformGroup>
                     <!--RotateTransform 变换-->
                     <RotateTransform Angle="10"></RotateTransform>
                     <!--SkewTransform变换-->
                     <SkewTransform AngleX="-10" AngleY="30" CenterX="20" CenterY="50"></SkewTransform>
                 </TransformGroup>
             </Rectangle.RenderTransform>
             <Rectangle.Fill>
                 <ImageBrush ImageSource="sun.jpg"></ImageBrush>
             </Rectangle.Fill>
         </Rectangle>
 </Canvas>

MatrixTransform矩阵变换：

其实就是其他变形类的底层实现的代码，其他的类都是基于这个类的扩展，以让用户可以更加简单方便的应用，至于MatrixTransform则是通过一种矩阵算法来进行运算得到相应的变形的效果的。

矩阵中第三列的值是固定不变的！

原理：

原坐标（x0，y0）通过这个3*3矩阵，通过矩阵乘法可得到坐标 (x0 * M11+x0 * M21,y0 * M12+y0 * M22)之后，再加上 (OffsetX,OffsetY) 即可得到新坐标（x1，y1）。也即是说最终坐标 (x1,y1) : x1 = x0 * M11 + x0 * M21 + OffsetX , y1 = y0 * M12 + y0 * M22 + OffsetY.

<!--源码用法--> 
<MatrixTransform Matrix="M11 M12 M21 M22 OffsetX OffsetY"></MatrixTransform>

下面使用MatrixTransform矩阵变换实现以上五种基本的变换效果。

<Canvas Width="1200" Height="300">
         <StackPanel Orientation="Horizontal" Canvas.Top="50">
             <!-- TranslateTransform 平移 -->
             <Image Source="Images/adobe_Ai.png" Height="100" Width="100" Stretch="Fill"
                    Margin="10" Opacity="0.5"></Image>
             <Image Source="Images/adobe_Ai.png" Height="100" Width="100" Stretch="Fill"
                    Margin="10">
                 <Image.RenderTransform>
                     <MatrixTransform Matrix="1 0 0 1 -80 30"></MatrixTransform>
                 </Image.RenderTransform>
             </Image>
 
             <!-- RotateTransform 旋转 -->
             <Image Source="Images/adobe_Dw.png" Height="100" Width="100" Stretch="Fill"
                    Margin="10" Opacity="0.5"></Image>
             <Image Source="Images/adobe_Dw.png" Height="100" Width="100" Stretch="Fill"
                    Margin="10">
                 <Image.RenderTransform>
                     <!-- 90°旋转 -->
                     <MatrixTransform Matrix="0 1 -1 0 30 0"></MatrixTransform>
                 </Image.RenderTransform>
             </Image>
 
             <!-- ScaleTransform 缩放 -->
             <Image Source="Images/adobe_Fl.png" Height="100" Width="100" Stretch="Fill"
                    Margin="10" Opacity="0.5"></Image>
             <Image Source="Images/adobe_Fl.png" Height="100" Width="100" Stretch="Fill"
                    Margin="10">
                 <Image.RenderTransform>
                     <!--放大1.5倍-->
                     <MatrixTransform Matrix="1.5 0 0 1.5 -80 0"></MatrixTransform>
                 </Image.RenderTransform>
             </Image>
 
             <!-- SkewTransform 扭曲倾斜 -->
             <Image Source="Images/adobe_Fw.png" Height="100" Width="100" Stretch="Fill"
                    Margin="10" Opacity="0.5"></Image>
             <Image Source="Images/adobe_Fw.png" Height="100" Width="100" Stretch="Fill"
                    Margin="10">
                 <Image.RenderTransform>
                     <!-- x轴倾斜 -->
                     <MatrixTransform Matrix="1 0 1 1 -80 0"></MatrixTransform>
                 </Image.RenderTransform>
             </Image>
 
             <!-- TransformGroup 扭曲、缩放 -->
             <Image Source="Images/adobe_Id.png" Height="100" Width="100" Stretch="Fill"
                    Margin="10" Opacity="0.5"></Image>
             <Image Source="Images/adobe_Id.png" Height="100" Width="100" Stretch="Fill"
                    Margin="10">
                 <Image.RenderTransform>
                     <!-- x轴倾斜 -->
                     <!--放大1.5倍-->
                     <MatrixTransform Matrix="1.5 0 1 1.5 -120 0"></MatrixTransform>
                 </Image.RenderTransform>
             </Image>
         </StackPanel>
 </Canvas>