Silverlight 图形的转换

这篇是以 Blend 设计工具上的功能按钮为线索来介绍几种Silverlight 图形的转换。转换一般不影响布局，通常是在动画处理或向元素应用添加临时效果时用。

变化中心点的定义

变化的中心点在Blend工具上有2个地方定义：

一个是可以通过鼠标点击就可以使用的9个常用位置，

如下图的 就是。我们可用鼠标来点击这9个点，对应设置这个元素的中心位置。

对应到Xaml 文件中，就是修改选择元素的 RenderTransformOrigin 属性。

UIElement.RenderTransformOrigin 属性用于获取或设置由 RenderTransform 声明中，任何可能导致转换的中心点，这个中心点是相对于元素的边界而言的。

设置的值类似： RenderTransformOrigin="0.5,1"， 依次是水平原点因子，垂直原点因子。通常这两个值为 0 至 1 之间的值。

0 和 1 之间的值被解释为当前元素在每个 X 轴和 Y 轴上的范围的因子。例如，(0.5,0.5) 将使呈现转换位于元素中心，而 (1,1) 会将呈现转换置于元素的右下角。

默认值是一个坐标为 (0,0) 的 Point。即：

RenderTransformOrigin 也可以接受 0 和 1 以外的值，并且将导致更不寻常的转换效果。例如，如果将 RenderTransformOrigin 设为 (5,5)，然后应用 RotateTransform，则旋转点将位于元素自身边界之外。转换将沿圆心远在右下方的大圆旋转元素。原点可能位于其父元素的某处，并可能位于框架或视图之外。负点值与此类似，这将超出左上边界。

Blend 中另外一个设置中心点的位置如下：在这里我们可以更灵活的设置，而不是之前的9个固定的常用点。

平移 TranslateTransform

沿 X、Y 平移对象 跟定义常用的9个中心点在同一界面，如下：

上图中，指定元素按照X轴移动10个像素 ，Y轴移动10个像素。这两个属性的默认值都是0。可以为正值，可以为负值，可以为非整数。比如下面设置就是可以的

<translatetransform x="-10.842" y="7.468"></translatetransform>

上面图片中，当我们把“使用相对值”打上勾时，表示我们要在目前平移数据上再相对增加的值，这时候输入相对值后，需要点击应用才会起作用。

在输入数字框里面，我们使用滚轮，也可以自动增加或者减少数字。

这个变化可以用来做伪3D效果。比如下面的例子：

Xaml 文件

TextBlock
  FontFamily="Verdana"
  FontSize="32"
  FontWeight="Bold" 
  Foreground="Black"
  Text="Translated Text">
  TextBlock.RenderTransform>
    TranslateTransform X="2" Y="2" />
  TextBlock.RenderTransform>
TextBlock>
TextBlock
  FontFamily="Verdana"
  FontSize="32"
  FontWeight="Bold" 
  Foreground="Coral"
  Text="Translated Text"/>

执行效果：

旋转 RotateTransform

旋转是以之前定义的中心点为圆心，进行旋转指定的角度。 正数表示顺时针旋转，负数表示逆时针旋转。

上述功能页的“使用相对值”的逻辑跟 TranslateTransform 的逻辑一样。

我们在 上拖动鼠标，也可以实现手工旋转。

在输入数字框里面，我们使用滚轮，也可以自动增加或者减少数字。

在 Xaml 中是类似如下的代码：

<rotatetransform angle="58.884002685546875"></rotatetransform>

注：

RotateTransform 本身具有定义中心点的功能，类似代码如后：<rotatetransform angle="30" centerx="1" centery="0.8"></rotatetransform>

但是，一旦我们定义了元素的 RenderTransformOrigin， 则 RenderTransformOrigin 优先级高于 RotateTransform 定义的中心点。

缩放 ScaleTransform

如下图所示，我们可以使用 ScaleTransform 沿水平或垂直方向拉伸或收缩对象。

ScaleX 属性指定使对象沿 x 轴拉伸或收缩的量，ScaleY 属性指定使对象沿 y 轴拉伸或收缩的量。

缩放是以之前的中心点为原点进行的缩放。可以为负值，表示到了中心点的左边（ScaleX 为负），上面（ScaleY 为负）。

在Xaml中代码类似如下：

<scaletransform scalex="-0.95" scaley="1.05"></scaletransform>

缩放常用于选中某个对象时突出显示。

注：

ScaleTransform 本身具有定义中心点的功能，类似代码如后：<scaletransform scaley="2" centerx="0.8" centery="1"></scaletransform>

但是，一旦我们定义了元素的 RenderTransformOrigin， 则 RenderTransformOrigin 优先级高于 ScaleTransform 定义的中心点。

倾斜 SkewTransform

以之前定义的中心点为原点，进行倾斜。

默认是不倾斜的，即都是0。

可以为正数，也可以为负数。数字表示以中心点为中心倾斜的度数。

在Xaml中代码类似如下：

<skewtransform anglex="30" angley="-1"></skewtransform>

注：

SkewTransform 本身具有定义中心点的功能，类似代码如后：<skewtransform anglex="26" angley="0" centerx="0.8" centery="1.0"></skewtransform>

但是，一旦我们定义了元素的 RenderTransformOrigin， 则 RenderTransformOrigin 优先级高于 SkewTransform 定义的中心点。

翻转

至于Blend 中的“反转”则是上述四种转换的一个汇总使用的几个可能会比较常用的场景。

X 轴翻转，则它的缩放变化 ScaleTransform 的 ScaleX 再乘以-1。

X 轴翻转，则它的缩放变化 ScaleTransform 的 ScaleY 再乘以-1。

参考资料：

Silverlight学习笔记--通用绘图属性
http://blog.joycode.com/ghj/archive/2009/11/30/115793.joy

UIElement.RenderTransformOrigin 属性
http://msdn.microsoft.com/zh-cn/library/system.windows.uielement.rendertransformorigin.aspx

TranslateTransform 类
http://msdn.microsoft.com/zh-cn/library/system.windows.media.translatetransform(VS.95).aspx

RotateTransform 类
http://msdn.microsoft.com/zh-cn/library/system.windows.media.rotatetransform.aspx

ScaleTransform 类
http://msdn.microsoft.com/zh-cn/library/system.windows.media.scaletransform.aspx

SkewTransform 类
http://msdn.microsoft.com/zh-cn/library/system.windows.media.skewtransform(VS.95).aspx