今回から数回に分けて、WPFにおけるオブジェクトの

• 回転
• スケーリング
• 傾斜

について学んでいきたいと思います。

今回はオブジェクトの回転についてです。

Visual Studio上でデザインする場合、回転、スケーリング、傾斜といった項目はプロパティウィンドウに表示されないため、XAMLに直接手を加えることになります。

Expresion Blendがあるとマウス操作によるデザインが可能なのですが、理解しておくことでマウス操作では出来ない微調整も可能となりますのでこれを機会に覚えてしまいましょう。

Buttonコントロールを例に、それぞれについてサンプルを示します

基本
2-D平面での変換(回転、スケーリング、傾斜など)を行うには、

<オブジェクト.RenderTransform>～</オブジェクト.RenderTransform>タグが必要です。

Buttonコントロールを2-D平面で変換(回転、スケーリング、傾斜など)する場合の基本XAMLは

<Button Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" 
        Name="Button1" VerticalAlignment="Top" Width="75">
    <Button.RenderTransform>
    <!--ここに回転、スケーリング、傾斜などのタグを挿入-->
    </Button.RenderTransform>
    Button
</Button>

となります。あとは回転、スケーリング、傾斜などのタグを<オブジェクト.RenderTransform>～</オブジェクト.RenderTransform>へ挿入します。

回転　RotateTransform
オブジェクトの回転を行うには<RotateTransform>タグを使用します。
<RotateTransform>は、点 (CenterX、CenterY) を中心として、指定した Angle(単位:度) だけオブジェクトを回転します。

CenterX=0, CenterY=0, Angle=45とした場合のXAMLは

<RotateTransform CenterX="0" CenterY="0" Angle="45"/>

オブジェクトの中点を中心点として回転させたい場合には、
CenterX=オブジェクト幅÷2、CenterY=オブジェクト高さ÷2
とすればよいことになります。
幅:75、高さ:23のボタンを中心を軸に回転させる場合は、下記XAMLとなります。

<RotateTransform CenterX="37.5" CenterY="11.5" Angle="45"/>

まとめ

<RotateTransform> を使用すれば、自由にオブジェクトを回転できることがおわかりいただけたかと思います。

Buttonコントロール以外にも使用できますので、是非いろいろと使用してみてください。