方法 : 要素をスケーリングする

[アーティクル]
08/09/2011

ScaleTransform を使用して要素をスケーリングする方法を次の例に示します。

ScaleX および ScaleY プロパティを使用して、指定するファクターごとに要素のサイズを変更します。たとえば、ScaleX の値が 1.5 である場合、要素は元の幅の 150% に引き伸ばされます。 ScaleY の値が 0.5 である場合、要素の高さは 50% 縮められます。

CenterX および CenterY プロパティを使用して、スケール操作の中心となる点を指定します。既定では、ScaleTransform は中心点 (0,0) に配置されます。これは四角形の左上隅に相当します。 Transform を適用すると、オブジェクトが存在する座標空間が変更されるため、これには要素を移動する効果、および要素を大きく表示する効果もあります。

次のコード例では、ScaleTransform を使用して、縦横 50 サイズの Rectangle を 2 倍にします。 ScaleTransform には、CenterX と CenterY の両方に対して値 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)。

サイズが 2 倍にされている別の Rectangle の例を次に示します。ただし、この ScaleTransform には、CenterX と CenterY の両方に対して、四角形の中心に対応する値 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>

2 つの ScaleTransform の操作の違いを次の図に示します。点線は、スケーリング前の四角形のサイズと位置を示します。

ScaleX 値と ScaleY 値が同じであっても中心が異なる 2 つの ScaleTransform 操作

中心点が異なる 2 倍のスケール