ビヘイビアで動きのあるページを作ろう（Silverlight4+Expression Blend4）第4回

画像のドラッグ機能を追加するMouseDragElementBehavior

MouseDragElementBehaviorビヘイビアを使うと、画面上での要素のドラッグ機能を、簡単に追加することができます。では、まず初めに、このプログラムで実装する機能の動作を、下記に解説しておきます。画面上には1枚の画像が表示されています。画像上にマウスカーソルを乗せると、画像が少し透明化

PROJECT KySS

2011年1月24日 20:00

画面上には1枚の画像が表示されています。画像上にマウスカーソルを乗せると、画像が少し透明化し、Y軸を中心に回転を始めます。この状態からドラッグすると画像の移動が可能になります。画像上からマウスカーソルが離れると、画像の透明化は解除され、回転もストップします（図1）。

図1: 少し透明化した画像が、Y軸を中心に回転し、ドラッグが可能になる（クリックで拡大）

今回のサンプルは以下よりダウンロードできます。
→　SL4_MouseDragElementBehavior.zip

新規プロジェクトの作成と依存関係の設定

早速サンプルを作っていきましょう。

VS 2010のメニューから[ファイル（F）／新規作成（N）／プロジェクト（P）]を選択します。本稿では開発言語にVisual Basicを用います。次に、「Silverlight アプリケーション」を選択して、「名前（N）」に任意のプロジェクト名を指定します。ここでは「SL4_MouseDragElementBehavior」という名前を付けています。

ソリューションエクスプローラー内のプロジェクト名を選択して、マウスの右クリックで表示されるショートカットメニューから、「プロジェクト依存関係（S）」の設定も忘れないようにしてください。詳細については「これからはじめるSilverlight 4」の連載を参照してください。

まず、MainPage.xamlの要素のWidthに800、Heightに600を指定します。次に、ソリューションエクスプローラー内にImageというフォルダを作成して、1枚の画像も追加しておきます。ダウンロードされたサンプル・ファイルには画像は追加済みです。

コントロールのレイアウト

ツールボックスからTextBlockとImageコントロールを1個ずつレイアウトします。TextBlockコントロールのText、FontSize、FontWeightプロパティを設定します。ImageコントロールのWidthに160、Heightに120と指定します。[共通]プロパティ内のSourceプロパティに、Imageフォルダに取り込んだ画像を指定します。Sourceプロパティの横にある[…]ボタンをクリックすると、「イメージの選択」画面が表示され、Imageフォルダ内の画像が表示されます。画像を選択し、[OK（O）]ボタンをクリックするとImageコントロールに画像が表示されます（図2）。

図2: Imageコントロールに画像が表示された（クリックで拡大）

次に、ソリューションエクスプローラー内の、MainPage.xamlを選択し、マウスの右クリックで表示されるメニューの、「Expression Blendを開く（X）」を選択し、Blend4を起動します。

MouseElementBehaviorとChangePropertyActionを設定する

前述のように、MouseElementBehaviorビヘイビアは、画面上で項目を要素にドラッグする機能を追加できます。

また、ChangePropertyActionを使用して、オブジェクトのプロパティを変更することができます。

まず、ImageコントロールにChangePropertyActionを追加して、Image要素の上にマウスカーソルが乗ったときOpacityの値を50％だけ透明化し、カーソルが外れたときはOpacityの値を100%にして透明化を解除します。

「アセット」パネルから「ビヘイビア」を選択し、ChangePropertyActionを「オブジェクトとタイムライン（B）」内に表示されているImage1要素上にドラッグ&ドロップします（図3）。

図3: ChangePropertyActionをImage1要素上にドラッグ&ドロップする

Image1要素の子としてChangePropertyActionが追加されます（図4）。

図4: Image1要素の子としてChangePropertyActionが追加された

Image1要素の子として追加された、ChangePropertyActionのプロパティを設定します。[トリガー]内のEventNameプロパティの一覧からMouseEnterを選択します。[共通プロパティ]のPropertyNameの一覧から[外観]内のOpacityを選択します。表示されるValueプロパティには50と指定します。自動的に50%となります（図5）。

図5: ChangePropertyActionの各プロパティを設定した

同じ手順で、もう1つImage1要素の子として追加された、ChangePropertyActionを追加します。合計2個のChangePropertyActionを追加したことになります（図6）。

図6: ChangePropertyActionを2つImage1要素に追加した

ChangePropertyActionのプロパティを設定します。[トリガー]内のEventNameプロパティの一覧からMouseLeaveを選択します。[共通プロパティ]のPropertyNameの一覧から[外観]内のOpacityを選択します。表示されるValueプロパティには100と指定します。自動的に100%となります（図7）。これで、画像上にマウスカーソルが乗った時、画像が50％分透明化され、画像上からマウスカーソルが離れたとき、透明化が解除されるようになります。