[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プロパティのみが表示され、このプロパティで左寄せ、中央、右寄せの設定を行うことが可能です。

 

[Silverlight][プロパティウィンドウ] ブラシ

プロパティウィンドウのブラシの使用方法について見ていきましょう。

まず、XAMLページに ButtonコントロールとTextBoxコントロールを配置します。

配置したButtonコントロールを選択してプロパティウィンドウのブラシのところを見ると下図左側のようになります。同様にTextBoxコントロールを選択すると下図右側のようになります。

プロパティウィンドウのブラシ欄

コントロールによってブラシが使えるプロパティは異なります。

代表的なものには以下があります。

プロパティ 説明
Background  コントロールの背景色を設定
BorderBrush コントロールの枠線の色を設定
ForeGround コントロールの前景色を設定
OpacityMask コントロールの不透明度マスクを設定

次にエディター部分について見ていきましょう。

ブラシなし

任意のプロパティのブラシを「ブラシなし」の状態にするには

  1. ブラシを「なし」にしたいプロパティを選択
  2. [ブラシなし]ボタンをクリックする

の手順で行います。

下記は、Backgroundプロパティを選択して、[ブラシなし]のボタンをクリックした状態のスクリーンショットです。

ブラシなし


単色ブラシ

任意のプロパティを単色に設定したい場合は、[単色ブラシ]ボタンをクリックします。

その後、色の選択カーソル(○印)をドラッグする、RGBAの値を指定する、16審数値で色を指定することができます。

また「スポイト」を使用すると、画面内の任意の場所の色を単色ブラシの色として設定することも可能です。スポイトはVisual Studio内だけではなく、画面に表示されている範囲であればどこからでも色を吸い取ることができます。

単色ブラシ


 グラデーションブラシ

グラデーション色にしたい場合は、[グラデーション ブラシ]ボタンをクリックします。

グラデーションは線形、放射状のどちらかを選択することが可能です。

グラデーションを設定するには、「グラデーションの開始点」を選択して開始位置の色を設定します、また「グラデーションの終了点」を選択して終了位置の色を設定します。

開始点と終了点は、「グラデーションの開始点と終了点の入れ替え」のボタンをクリックして入れ替えることが可能です。

また、グラデーションの分岐点を増やすことも可能です。

グラデーションブラシ


タイルブラシ

ブラシではイメージを使用することも可能です。

この場合は[タイルブラシ]ボタンをクリックします。

プロパティは StretchとImageSouceの2つがあります。

Strecthプロパティに設定できる値は以下の通りです。

説明
None イメージの現在のサイズを維持します
Fill オブジェクト全体を塗りつぶすように配置します。縦横比は無視されます
Uniform オブジェクト内に完全に収まって表示されるように、縦横比を維持したまま配置されます。
UniformToFill オブジェクト全体を塗りつぶすように、縦横比を維持して配置します。オブジェクトとイメージの縦横比が一致しない場合は、イメージがオブジェクトのサイズに合わせて切り取られます。

ImageSourceプロパティは、プロジェクトに[追加されているイメージが選択可能です。タイルブラシ

[Silverlight][プロパティ] 外観

プロパティウィンドウの「外観」について見ていきましょう。

選択するコントロールによってプロパティウィンドウの内容が異なることに注意してください。

まずは XAMLページに TextBox コントロールを配置して、プロパティウィンドウの外観を見て見ましょう。

プロパティウィンドウ「外観」

 

プロパティとして Opacity, Viibility, BorderThickness, Effect があります。

大抵のコントロールに備わっているプロパティなので、1つずつ見ていきます。


Opacity

Opacityは不透明度を表します。不透明度なので100%で不透明、0%で透明になります。

以下は、オレンジの四角形の上に Opacityを設定したTextBox コントロールを配置した例です。

Opacityの設定例


Visibility

Visibilityはコントロールの表示を設定するプロパティです。

Visibleで表示、Collapsed で非表示になります。


BorderThickness

BorderThicknessはコントロールの各辺の太さを設定するプロパティです。

以下は 左20、右5、上2、下3に設定した例です。

BorderThicknessプロパティ


Effect

Effectは、その名の通りコントロールにエフェクトをかけます。

Effect欄にある [新規]ボタンをクリックすると「オブジェクトの選択」ダイアログが表示されます。

このダイアログでエフェクトを選択します。

例としてコントロールに陰を付けてみます。「オブジェクトの選択」ダイアログで「DropShadowEffect」を選択して[OK]ボタンをクリックします。

エフェクトの選択

「DropShadowEffect」がかけられると、TextBoxコントロールは以下のように陰がつきます。

DropShadowEffect