Silverlight: 使用 XAML 和 Expression Blend 创建动画

例如，下面的 XAML 将创建一个宽 96 像素、高 88 像素的红色矩形：

<Rectangle Fill="#FFFF0404" Stroke="#FF000000"
　Width="96" Height="88"
　Canvas.Left="112" Canvas.Top="72" />

图 2 演示了此对象在 Silverlight 中呈现时的外观。

图 2 呈现矩形

要对此对象应用 ScaleTransform，可使用 RenderTransform 并将转换指定为 ScaleTransform。XAML 如下：

<Rectangle Fill="#FFFF0404" Stroke="#FF000000"
　Width="96" Height="88" Canvas.Left="112" Canvas.Top="72">
　<Rectangle.RenderTransform>
　　<ScaleTransform ScaleX="2" />
　</Rectangle.RenderTransform>
</Rectangle>

如果您熟悉编码，您会发现，使用 ScaleTransform，该矩形在水平上的大小扩展到了右侧。这是因为未指定缩放中心。您可以使用 CenterX 属性进行水平缩放或使用 CenterY 属性进行垂直缩放来指定缩放中心。这两个属性指定缩放中心的坐标。请注意，此坐标是相对于矩形左上角的。此外，默认坐标为 0，表示缩放会发生在水平轴的右侧和垂直轴的下侧。

如果将 CenterX 属性设置为正值（例如，50），则将绕 X 点将此矩形的最左端向右缩放 50 像素。这看起来像是 CenterX 未更改位置而矩形向左移动了一定的像素数（此大小取决于比例因子的大小）。这是因为拉伸是以该点为中心进行的，将此矩形的左侧向左推而将其右侧向右推。您可以利用相同的方式设置 ScaleY 和 CenterY 值以获得相似的效果：

<Rectangle Fill="#FFFF0404" Stroke="#FF000000"
　Width="96" Height="88"
　Canvas.Left="80" Canvas.Top="80">
　<Rectangle.RenderTransform>
　　<ScaleTransform ScaleX="2"
　　　CenterX="50"/>
　</Rectangle.RenderTransform>
</Rectangle>