4. 变换

因为XAML基于矢量，所以可以重置每个元素的大小。在下面的例子中，基于矢量的图形现在可以缩放、旋转和倾斜。不需要手工计算位置，就可以进行单击测试(如移动鼠标和鼠标单击)。

下面的示例中，所有的矩形都定为在一个水平方向的StackPanel元素中，以并排放置矩形。第1个矩形有其原始大小和布局。第2个矩形重置了大小，第3个矩形移动了，第4个矩形旋转了，第5个矩形倾斜了，第6个矩形使用变换组进行变换，第7个矩形使用矩阵进行变换。下面个部分讲述所有这些选项的代码示例。

1. 缩放

将Rectangle元素的RenderTransform属性添加ScaleTransform元素，如下所示，将Rectangle在X轴方向上放大0.5倍，在Y轴方向上放大0.4倍。

            <Rectangle Width="120" Height="60" Fill="Red" Margin="20">
                <Rectangle.RenderTransform>
                    <ScaleTransform ScaleX="0.5" ScaleY="0.4"/>
                </Rectangle.RenderTransform>
            </Rectangle>

除了变换像矩形这样简单的形状之外，还可以变换任何XAML元素，因为XAML定义了矢量图形。在以下代码中，前面所示的脸部Canvas元素放在一个用户控件SmilingFace中，这个用户控件先显示没有转换的状态，再显示调整大小后的状态。结果如下图所示。

            <smile:SmilingFace Margin="20" VerticalAlignment="Center"/>
            <smile:SmilingFace Margin="100" VerticalAlignment="Center">
                <smile:SmilingFace.RenderTransform>
                    <ScaleTransform ScaleX="1.6" ScaleY="0.8" CenterY="180"/>
                </smile:SmilingFace.RenderTransform>
            </smile:SmilingFace>

2. 平移

 在X轴或Y轴方向上移动一个元素时，可以使用TranslateTransform。在以下代码片段中，给X指定-90，元素向左移动，给Y指定20，元素向底部移动：

            <Rectangle Width="120" Height="60" Fill="Green" Margin="20">
                <Rectangle.RenderTransform>
                    <TranslateTransform X="-90" Y="20"/>
                </Rectangle.RenderTransform>
            </Rectangle>

3. 旋转

使用RotateTransform元素，可以旋转元素。对于RotateTransform，设置旋转的角度，用CenterX和CenterY设置旋转中心：

            <Rectangle Width="120" Height="60" Fill="Pink" Margin="20">
                <Rectangle.RenderTransform>
                    <RotateTransform Angle="45" CenterX="10" CenterY="80"/>
                </Rectangle.RenderTransform>
            </Rectangle>

 

4. 倾斜

对于倾斜，可以使用SkewTransform元素。此时可以指定X轴和Y轴方向的倾斜角度：

            <Rectangle Width="120" Height="60" Fill="LightBlue" Margin="20">
                <Rectangle.RenderTransform>
                    <SkewTransform AngleX="20" AngleY="30" CenterX="40" CenterY="-40"/>
                </Rectangle.RenderTransform>
            </Rectangle>

5. 组合变换和复合变换 

同时执行多种变换的简单方式是使用CompositeTransform和TransformationGroup元素。TransformationGroup元素可以包含SkewTransform、RotateTransform、TranlateTransform和ScaleTransform作为其子元素：

            <Rectangle Width="120" Height="60" Fill="LightGray" Margin="20">
                <Rectangle.RenderTransform>
                    <TransformGroup>
                        <SkewTransform AngleX="45" AngleY="20" CenterX="390" CenterY="40"/>
                        <RotateTransform Angle="90"/>
                        <ScaleTransform ScaleX="0.5" ScaleY="1.2"/>
                    </TransformGroup>
                </Rectangle.RenderTransform>
            </Rectangle>

 为了同时执行旋转和倾斜操作，可以定义一个TransformGroup，它同时包含RotateTransform和SkewTransform。类CompositeTransform定义多个属性，用于一次进行多个变换。例如，ScaleX和ScaleY进行缩放，TranslateX和TranslateY移动元素。也可以定义一个MatrixTransform，其中Matrix元素指定了用于拉伸的M11和M22属性，以及用于倾斜的M12和M21属性，详见以下示例。

6. 使用矩阵的变换

同时执行多种变换的另一种选择是指定一个矩阵。这里使用MatrixTransform定义Matrix属性，它有6个值。设置值1,0,0,1,0,0不改变元素。值0.5,1.4,0.4,0.5,200,0会重置元素的大小、倾斜和平移元素：

            <Rectangle Width="120" Height="60" Fill="Gold" Margin="20">
                <Rectangle.RenderTransform>
                    <MatrixTransform Matrix="0.5,1.4,0.4,0.5,200,0"/>
                </Rectangle.RenderTransform>
            </Rectangle>

如果将一个字符串赋给Matrix属性，则MatrixTransform类按顺序定义公共字段M11、M12、M21、M22、OffsetX和OffsetY。MatrixTransform实现了一个仿射变换，所以9个矩阵成员中只有6个需要指定。其余矩阵成员使用固定值0、0、1。M11和M22字段具有默认值1，用于在x和y方向上伸缩。M12和M21的默认值为0，用于倾斜控件。OffsetX和OffsetY的默认值为0，用于平移控件。