如何：缩放元素

该示例演示如何使用 ScaleTransform 缩放元素。

使用 ScaleX 和 ScaleY 属性按指定的因素调整元素大小。 例如，ScaleX 值为 1.5 时，会将元素拉伸到其原始宽度的 150%。 ScaleY 值为 0.5 时，会将元素的高度缩短 50%。

使用 CenterX 和 CenterY 属性指定缩放操作的中心点。 默认情况下，ScaleTransform 的中心点为 (0,0)，该点对应于矩形的左上角。 这会导致该元素移动并使其看上去更大，因为当应用 Transform 时，你会改变对象所在的坐标空间。

下面的示例使用 ScaleTransform 将 50*50 的 Rectangle 的大小增加一倍。 对于 CenterX 和 CenterY，ScaleTransform 的值均为 0（默认值）。

示例

<!-- Scales a rectangle by 200% from a center of (0,0).-->
<Rectangle Height="50" Width="50" Fill="#CCCCCCFF" 
  Stroke="Blue" StrokeThickness="2"
  Canvas.Left="100" Canvas.Top="100">
  <Rectangle.RenderTransform>
    <ScaleTransform CenterX="0" CenterY="0" ScaleX="2" ScaleY="2" />
  </Rectangle.RenderTransform>
</Rectangle>

通常，将 CenterX 和 CenterY 设置为缩放对象的中心：（Width/2、Height/2）。

下面的示例显示另一个 Rectangle 的大小增加了一倍；但是，对于 CenterX 和 CenterY，ScaleTransform 的值都是 25，这对应于矩形的中心。

<!-- Scales a rectangle by 200% from a center of (25,25).-->
<Rectangle Height="50" Width="50" Fill="#CCCCCCFF"
  Canvas.Left="100" Canvas.Top="100" Stroke="Blue" StrokeThickness="2">
  <Rectangle.RenderTransform>
    <ScaleTransform CenterX="25" CenterY="25" ScaleX="2" ScaleY="2" />
  </Rectangle.RenderTransform>
</Rectangle>

下图显示了两个 ScaleTransform 操作之间的差异。 虚线显示的是矩形在缩放之前的大小和位置。

两个具有相同 ScaleX 和 ScaleY 值但中心不同的 ScaleTransform 操作

有关完整示例，请参阅 2D 转换示例。

另请参阅

• Transform
• ScaleTransform
• 转换概述
• 操作指南主题