次の方法で共有

方法: 変換の原点を相対値で指定する

  • [アーティクル]

この例は、相対値を使用して、FrameworkElement に適用される RenderTransform の原点を指定する方法を示します。

RenderTransform プロパティを使用して FrameworkElement の回転、拡大縮小、または傾斜を行うと、既定の設定により変換が要素の左上隅に適用されます。 要素の中心から回転、拡大縮小、または傾斜させる場合は、要素の中心に変換の中心を設定して補正することができます。 ただし、そのソリューションでは、要素のサイズがわかっている必要があります。 要素の中心に変換を適用する簡単な方法は、変換自体に中心値を設定する代わりに、RenderTransformOrigin プロパティを (0.5, 0.5) に設定することです。

例

次の例では、RotateTransform を使用して、Button を 45 度時計回りに回転しています。 この例では中心を指定していないので、ボタンは、左上隅の点 (0, 0) の周りを回転します。 RotateTransform は RenderTransform プロパティに適用されます。

次の図は、それに続く例の変換結果を示しています。

A button transformed using 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>

次の例では、Button を 45 度時計回りに回転するために RotateTransform も使用しています。ただし、この例ではボタンの RenderTransformOrigin が (0.5, 0.5) に設定されています。 その結果、回転は、左上隅ではなくボタンの中心に適用されています。

次の図は、それに続く例の変換結果を示しています。

A button transformed about its center
RenderTransformOrigin が (0.5, 0.5) の 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"
      RenderTransformOrigin="0.5,0.5">
      <Button.RenderTransform>
        <RotateTransform Angle="45" />
      </Button.RenderTransform>
    </Button>
    <Button Content="A Button" Opacity="1" />
  </StackPanel>
</Border>

FrameworkElement オブジェクトの変換について詳しくは、「変換の概要」をご覧ください。

関連項目