ビヘイビアー
Expression BlendでSilverlightのデザインをしているときに、マウスがあるコントロールに入ったときにアニメーションを動かしたいとします。Silverlight 2まではC#やVisual Basicのコードを記述してアニメーションを再生する必要がありました。
Silverlight 3からは簡単な命令であれば、事前に設定された命令の集まり(ビヘイビアー)を指定することでC#やVisual Basicなどのコーディングをすることなく画面の動きを定義することができます。
例えば前回の記事で使用したで作成したTreeViewのサンプルで、TreeViewにマウスカーソルが入った時に色を変え、外れたときに色を元に戻したい場合は、ChangePropertyActionビヘイビアーをTreeViewに追加してビヘイビアーのプロパティを変更するだけです。コーディングは必要ありません。
Expression Blendでの操作を図5に示します。
1. ビヘイビアーの追加
アセットパネルのビヘイビアーからChangePropertyActionビヘイビアーを選択し、ビヘイビアーを適応させたいコントロールにドロップします。
2. トリガーを設定 ※括弧の中は設定値です。
SourceNameにトリガーの発生元のコントロールを、EventNameに発生元のイベント名を設定します。
3. 変更先を設定
TargetNameに変更対象のコントロールを、PropertyNameに変更するプロパティ名を設定し、プロパティに応じた値を設定します。
マウスがTreeViewに入った際にChangePropertyActionビヘイビアーを使って背景色を変更する設定を表2に示します。
| 分類 | プロパティー名 | 設定値 | 備考 |
| トリガー | SourceName | treeView | イベントの発生元コントロール |
| EventName | MouseEnter | トリガーとするイベント | |
| 共通プロパティ | TragetName | treeView | 変更対象のコントロール |
| PropertyName | Background | 変更するプロパティ | |
| Value | SolidColorBrush(#FFCCFF66) | 設定するブラシ |
同様にマウスがTreeViewを抜ける際のChangePropertyActionビヘイビアーの設定値を表3に示します。
| 分類 | プロパティー名 | 設定値 | 備考 |
| トリガー | SourceName | treeView | イベントの発生元コントロール |
| EventName | MouseLeave | トリガーとするイベント | |
| 共通プロパティ | TragetName | treeView | 変更対象のコントロール |
| PropertyName | Background | 変更するプロパティ | |
| Value | No Brush | 設定するブラシ |
実行結果を図6に示します。実行してみると、実際にこれだけでマウスの動作に合わせて背景色が変更されるアニメーションが行われていることを確認できると思います。単純なことではありますが、コードを書かないということは簡単に画面を作成できるだけでなく、コーディングによるバグが入り込む余地を少なくし製品の品質向上につながります。
カスタムビヘイビアー
もともと用意されているビヘイビアーはアニメーションを実行したり、あるプロパティが変更されたときにターゲットのプロパティを変更するといった単純なものだけです。
Expression BlendではExpression SDKを利用することでカスタムのビヘイビアーを定義できます。また、MicrosoftのExpression Galleryにはすぐに利用できるビヘイビアーが用意されています。
ここではテキストボックスが空の際に、ボタンが押されたときに特定のメッセージを表示するビヘイビアーを作成します。
プロジェクトの作成
まずはカスタムビヘイビアー用のプロジェクトを作成します。Silverlight向けのカスタムビヘイビアーを作成するためには、Silverlight向けのクラスライブラリを作成し、次のアセンブリを参照に加える必要があります。
1. 新規プロジェクトを作成する
Visual Studioメニューの[ファイル]-[新規作成]-[プロジェクト]を選択し、Silverlightクラスライブラリを作成します。ここではプロジェクト名を「SampleBehaviors」とします(図7)。
2. 参照を追加する
Visual Studioメニューの[プロジェクト]-[参照の追加]から「System.Windows.Interactivity」を追加します(図8)。




