WPF快速指导14：变换

WPF快速指导14：变换

变换，也叫变形（transform）。它定义了从一个坐标空间到另一个坐标空间的映射。变换通过矩阵来描述。变换包括旋转、伸缩、倾斜、调动，这些行为都是矩阵变换。用户还可以实现自己的矩阵。
各种变换通过RenderTransform属性来应用。RenderTransform是UIElement的一个公共属性，它的类型是Transform。类型Transform是一个抽象类。所以，要为元素的设置变化，就意味着要为元素的RenderTransform属性设置一个Transform的子类的一个实例对象。这话听上去有些拗口，但是下面的示例可以让大家明确这一点。


1：变换之RotateTransform
RotateTransform 就是抽象类Transform的一个子类，它负责在二维 x-y 坐标系内围绕指定点顺时针旋转对象。如，对一个rectangle转换角度45‘，前台代码如下：

<Rectangle x:Name="Rect1" Width="200" Height="100" Stroke="Black" StrokeThickness="5" RadiusX="50" RadiusY="5">
<Rectangle.RenderTransform>
<RotateTransform Angle="45"></RotateTransform>
</Rectangle.RenderTransform>
</Rectangle>

如果要使用后台代码，则如下：

前：

<Rectangle x:Name="Rect2" Width="200" Height="100" Stroke="Black">
</Rectangle>

后台：

Rect2.RenderTransform = new RotateTransform() { Angle = 30 };

默认的旋转点是矩形的左上角。为了更改旋转点，可以设置CenterX和CenterY。两个矩形的最终样式如下：




2：变换之ScaleTransform
ScaleTransform也是抽象类Transform的一个子类，它负责在二维 x-y 坐标系内缩放对象。
如，要对一个TextBlock宽度增大1.5，高度缩小0.5，应该像下面这样编码：
前台：

<TextBlock x:Name="textBlock1" Background="Blue" Width="100" Height="50">abc</TextBlock>

后台：

textBlock1.RenderTransform = new ScaleTransform() { ScaleX = 1.5, ScaleY = 0.5 };

3：变化之TranslateTransform
TranslateTransform也是抽象类Transform的一个子类，它负责在二维 x-y 坐标系内平移（移动）对象。
前台：

<TextBlock x:Name="textBlock1" Background="Blue" Width="100" Height="50">abc</TextBlock>
<Button x:Name="buttonTest" Click="buttonTest_Click" Canvas.Top="250">测试</Button>

后台：

private void buttonTest_Click(object sender, RoutedEventArgs e)
{
textBlock1.RenderTransform = new TranslateTransform() { X = 50, Y = 100 };
}

点击后，物体平移。

4：变化之SkewTransform
SkewTransform也是抽象类Transform的一个子类，它负责表示二维扭曲，可用于在二维对象中创建三维深度幻觉。
代码：

textBlock1.RenderTransform = new SkewTransform() { AngleX = 30, AngleY = 20, CenterX = 50, CenterY = 80 };

5：变化之MatrixTransform
所有的变换，最根本的就是MatrixTransform。也就是以上几种变换，都可以通过MatrixTransform来解决。这需要一些图形的矩阵变换的知识，在这里不做深入讨论。

6：变换合并
如果尝试将以上的变换合并起来，即，假设你进行这样的操作：第一步将textBlock1设置为倾斜45°角，第二步将其平移50，则发现，倾斜角度没有了。如果要合并这样的操作，需要用到TransformGroup。
假设控件的初始状态如下：

TransformGroup group = new TransformGroup();
group.Children.Add(new SkewTransform() { AngleX = 30, AngleY = 20, CenterX = 50, CenterY = 80 });
textBlock1.RenderTransform = group;

要移动的代码如下：

private void buttonTest_Click(object sender, RoutedEventArgs e)
{
TransformGroup group = ((textBlock1.RenderTransform) as TransformGroup);
group.Children.Add(new TranslateTransform() { X = 50, Y = 100 });
textBlock1.RenderTransform = group;
}