方法 : 変換の原点を相対値で指定する
更新 : 2007 年 11 月
この例では、相対値を使用して、FrameworkElement に適用する RenderTransform の原点を指定する方法を示します。
RenderTransform プロパティを使用して FrameworkElement を回転、拡大縮小、または傾斜させる場合、既定の設定では、要素の左上隅に変換が適用されます。要素の中心を基準にして回転、拡大縮小、または傾斜させる場合は、変換の中心を要素の中心に設定することで補正できます。ただし、この方法を使用するには、要素のサイズがわかっている必要があります。さらに簡単に変換を要素の中心に適用するには、変換自体で中心の値を設定する代わりに、要素の RenderTransformOrigin プロパティを (0.5, 0.5) に設定します。
使用例
次の例では、RotateTransform を使用して、Button を時計回りに 45°回転します。この例では中心を指定しないため、ボタンはその左上隅の点 (0, 0) を中心として回転します。RotateTransform は、RenderTransform プロパティに適用されます。
この例の変換結果を次の図に示します。
RenderTransform プロパティを使用して時計回りに 45°回転
.png "RenderTransform を使用して変換されたボタン")
<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) に設定しています。その結果、回転はボタンの左上隅ではなく中心に適用されます。
この例の変換結果を次の図に示します。
RenderTransformOrigin を (0.5, 0.5) に設定した RenderTransform プロパティを使用して時計回りに 45°回転
.png "中心の周りで変換されたボタン")
<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 オブジェクトの変換の詳細については、「変換の概要」を参照してください。