HOW TO:縮放項目
本範例顯示如何使用 ScaleTransform 縮放項目。
請使用 ScaleX 和 ScaleY 屬性,以您指定的因數調整項目的大小。 例如,如果 ScaleX 值為 1.5,會將項目放大成原始寬度的 150%。 如果 ScaleY 值為 0.5,則會將物件的高度壓縮為 50%。
請使用 CenterX 和 CenterY 屬性來指定縮放作業的中心點。 根據預設,ScaleTransform 會以點 (0,0) 為中心,這也就是矩形的左上角。 這會有移動項目的效果,而且也會讓它看起來更大,因為當您套用 Transform 時,就變更了物件所在的座標空間。
下列範例會使用 ScaleTransform 將 50 x 50 的 Rectangle 放大成兩倍。 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)。
下列範例顯示另一個放大兩倍的 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>
下圖顯示這兩個 ScaleTransform 作業的差別。 虛線顯示的是矩形在縮放之前的大小和位置。
ScaleX 和 ScaleY 值完全相同但中心點不同的兩個 ScaleTransform 作業
如需完整範例,請參閱 2D 轉換範例 (英文)。