HOW TO:使用相對值指定轉換的原點
更新:2007 年 11 月
本範例說明如何使用相對值指定套用到 FrameworkElement 之 RenderTransform 的原點。
當您使用 RenderTransform 屬性旋轉、縮放或傾斜FrameworkElement 時,預設設定會將轉換套用到項目左上角。如果您要從項目的中心旋轉、縮放或傾斜,可以將轉換的中心設為項目的中心來因應。不過,這方法需要知道項目的大小。要將轉換套用到項目中心,更簡單的方式就是將項目的 RenderTransformOrigin 屬性設為 (0.5, 0.5),而不是在轉換本身設定中心值。
範例
下列範例會使用 RotateTransform 順時針旋轉 Button 45 度。由於範例沒有指定中心,按鈕會以點 (0, 0),也就是左上角為中心旋轉。RotateTransform 會套用到 RenderTransform 屬性。
下圖顯示後面所接範例的轉換結果。
使用 RenderTransform 屬性順時針旋轉 45 度
<Border Margin="30"
HorizontalAlignment="Left" VerticalAlignment="Top"
BorderBrush="Black" BorderThickness="1" >
<StackPanel Orientation="Vertical">
<Button Content="A Button" Opacity="1" />
<Button Content="Rotated Button">
<Button.RenderTransform>
<RotateTransform Angle="45" />
</Button.RenderTransform>
</Button>
<Button Content="A Button" Opacity="1" />
</StackPanel>
</Border>
下列範例也使用 RotateTransform 順時針旋轉 Button 45 度,不過,此範例會將按鈕的 RenderTransformOrigin 設為 (0.5, 0.5)。因此,旋轉會套用到按鈕的中心,而非左上角。
下圖顯示後面所接範例的轉換結果。
使用 RenderTransform 屬性以 RenderTransformOrigin 為 (0.5, 0.5) 旋轉 45 度
<Border Margin="30"
HorizontalAlignment="Left" VerticalAlignment="Top"
BorderBrush="Black" BorderThickness="1">
<StackPanel Orientation="Vertical">
<Button Content="A Button" Opacity="1" />
<Button Content="Rotated Button"
RenderTransformOrigin="0.5,0.5">
<Button.RenderTransform>
<RotateTransform Angle="45" />
</Button.RenderTransform>
</Button>
<Button Content="A Button" Opacity="1" />
</StackPanel>
</Border>
如需轉換 FrameworkElement 物件的詳細資訊,請參閱轉換概觀。