[Silverlight][プロパティウィンドウ] 変換 ~Projection ~

今回は「変換」グループのProjectionについて見ていきます。


回転

回転タブでは、コントロールを3次元の中で回転させることができます。

「回転」タブ

 

X, Y, Z にそれぞれ回転角度を指定します。

実際に入力して、どの方向に回転するのかを確かめてみることをおすすめします。

また、「回転」タブ内にある○の中に+が書かれたエリアをマウスでドラッグすると、リアルタイムでコントロールが回転します。

以下は、X=-30, Y=20, Z=15 に設定した例です。

回転の例


 

回転の中心

「回転の中心」タブでは、コントロールの中心点を指定します。

ここで指定した中心点を起点として、「回転」タブで指定した値が反映されます。

「回転の中心」タブ


 

グローバルオフセット

「グローバルオフセット」タブでは、画面を基準としたオフセット位置を設定します。

「グローバルオフセット」タブ


ローカルオフセット

「ローカルオフセット」タブでは、オブジェクトを基準としたオフセット位置を設定します。

「ローカルオフセット」タブ

 

[Silverlight][プロパティウィンドウ] 変換 ~RenderTransform~

プロパティウィンドウの「変換」の使用方法について見ていきましょう。

「変換」は主にアニメーションで使用されます。

「変換」は以下のようにRenderTransforとProjectionから構成されます。

RenderTransformではコントロールの平面的な形状を、Projectionではコントロールの立体的な形状を編集します。

「変換」のプロパティ

変換には多くのプロパティがあるので、今回はRenderTransformについて見ていきます。


 平行移動

「平行移動」タブでは、コントロールを現在の位置から平行移動させるための項目です。

「平行」

平行はXとYを指定することが可能です。

平行を設定する前と、設定後の例を以下に示します。

「平行」の設定例

 


回転

「回転」タブではコントロールを回転させることができます。

「回転」

Angleには角度を数値で指定します。

以下は90度を設定した例です。

Angleに90を設定した例


拡大・縮小

「拡大・縮小」タブでは、コントロールを拡大・縮小させることができます。

「拡大・縮小」

XにはX方向の拡大・縮小倍率を、YにはY方向の拡大・縮小率を設定します。

以下はXを2倍、Yを2倍にした場合の例です。

「拡大・縮小」の設定例


傾斜

「傾斜」タブではコントロールに傾斜を付けることができます。

「傾斜」タブ

Xを設定すると、コントロールの上辺と下辺が指定した分ずれます。

Yを設定すると、コントロールの左辺と右辺が指定した分ずれます。

以下は、Xに-10を設定した例です。

「傾斜」の設定例


 

中心

「中心」タブでは、コントロールの中心をどこに置くかを設定します。

コントロールの変形や移動はこの中心位置を起点として設定されます。

コントロールの真ん中に中心を置きたい場合はXとYに0.5を指定します。

「中心」タブ


反転

「反転」タブでは、コントロールの見た目そのものをX方向、Y方向に反転させます。

コントロールはX方向、Y方向に反転させることができます。

「反転」タブ

以下は、X方向を反転させた例です。

X方向を反転させた例

 

[Silverlight][プロパティウィンドウ] レイアウト

プロパティウィンドウのレイアウトの使用方法について見ていきましょう。

XAMLページに TextBoxコントロールを配置してプロパティウィンドウを見ると以下のようになります。

プロパティウィンドウの「レイアウト」

実に多くのプロパティがあることがわかります。

選択するコントロールによって表示される内容は異なりますので、主要なプロパティについて見ていきます。


コントロールのサイズを設定する

コントロールのサイズはWidthとHeightプロパティで指定します。

Widthは幅、Heightは高さを表します。


 

配置位置を設定する

選択しているコントロールを配置している親コントロールが Grid の場合には、RowプロパティやColumnプロパティでGridのどの位置(Gridが表のように分割されている場合)に配置するかを設定できます。

また、HorizontalAlignmentで水平方向の配置位置を、VerticalAlignmentで垂直方向での配置位置を設定することができます。

Marginプロパティでは、現在選択しているコントロールの余白(左、上、右、下)を設定することができます。このプロパティはHorizontalAlignment と VerticalAlignmentプロパティと関連しますので注意が必要です。実際に動作させてみることで動きがわかると思います。


文字の配置位置を設定する

文字の配置位置は HorizontalContentAlignment(水平方向)、VerticalContentAlignment(垂直方向)を使用します。

ただし、残念ながら TextBoxコントロールではこれらのプロパティで文字の配置位置を設定することはできません。代わりに今後紹介予定の「テキスト」の項目にあるTextAlignmentで設定することができます。

Buttonコントロールの場合は、HorizontalContentAlignmentプロパティのみが表示され、このプロパティで左寄せ、中央、右寄せの設定を行うことが可能です。