ホーム > Expression Blend > 0からはじめるExpression Blend再入門

その32:コントロールを回転させる

0からはじめるExpression Blend再入門
蜜葉 優@Silverlight Square & Windows Phone Arch[著], わにちゃん@ExpressionTech.jp[編集]
2012年1月2日 from Atelier:Mitsuba

はじめに

「コントロールの回転ってどうやってやるの?」

そう言われて扱ってなかったことに気が付きました。

操作方法

f:id:c-mitsuba:20120102060833p:image

<Image HorizontalAlignment="Right" Margin="0,203,108,104" Source="/Background.png" Stretch="Fill" Width="173" RenderTransformOrigin="0.5,0.5">
		<Image.RenderTransform>
			<CompositeTransform Rotation="47.526"/>
		</Image.RenderTransform>
</Image>

Expression Blendのデザインプレビューで回転したいコントロールの角にマウスカーソルを近づけると、回転するカーソルに変化します。そこでドラッグすると回転します。

その際コントロールには以下が追記され、コントロールの中心を軸に回転します。

... RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
	<CompositeTransform Rotation="47.526"/>
</Image.RenderTransform>

RenderTransformOriginが定義されていない場合、デフォルト値は"0,0"なので、左上を中心に回転します。

f:id:c-mitsuba:20120102061236p:image

<Image HorizontalAlignment="Left" Height="173" Source="/Background.png" Stretch="Fill" Width="173" UseLayoutRounding="False" d:LayoutRounding="Auto">
		<Image.RenderTransform>
			<CompositeTransform Rotation="765.124"/>
		</Image.RenderTransform>
</Image>

また、RenderTransformOriginは変換パネルの中心点から

f:id:c-mitsuba:20120102061445p:image

CompositeTransform Rotationは変換パネルの回転から設定することができます。

f:id:c-mitsuba:20120102061513p:image

次の記事

0からはじめるExpression Blend再入門』最新記事

コメント

コメント

▲このページのトップへ