SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Silverlight 3徹底入門

デザインツールの進化
― Expression Blend 3入門

Silverlight3徹底入門(3)


ビヘイビアー

 Expression BlendでSilverlightのデザインをしているときに、マウスがあるコントロールに入ったときにアニメーションを動かしたいとします。Silverlight 2まではC#やVisual Basicのコードを記述してアニメーションを再生する必要がありました。

 Silverlight 3からは簡単な命令であれば、事前に設定された命令の集まり(ビヘイビアー)を指定することでC#やVisual Basicなどのコーディングをすることなく画面の動きを定義することができます。

 例えば前回の記事で使用したで作成したTreeViewのサンプルで、TreeViewにマウスカーソルが入った時に色を変え、外れたときに色を元に戻したい場合は、ChangePropertyActionビヘイビアーをTreeViewに追加してビヘイビアーのプロパティを変更するだけです。コーディングは必要ありません。

 Expression Blendでの操作を図5に示します。

図5 ビヘイビアーを使ったコントロールの操作
図5 ビヘイビアーを使ったコントロールの操作

1. ビヘイビアーの追加

 アセットパネルのビヘイビアーからChangePropertyActionビヘイビアーを選択し、ビヘイビアーを適応させたいコントロールにドロップします。

2. トリガーを設定 ※括弧の中は設定値です。

 SourceNameにトリガーの発生元のコントロールを、EventNameに発生元のイベント名を設定します。

3. 変更先を設定

 TargetNameに変更対象のコントロールを、PropertyNameに変更するプロパティ名を設定し、プロパティに応じた値を設定します。

 マウスがTreeViewに入った際にChangePropertyActionビヘイビアーを使って背景色を変更する設定を表2に示します。

表2 ChangePropertyActionビヘイビアーの背景色変更の設定値
分類 プロパティー名 設定値 備考
トリガー SourceName treeView イベントの発生元コントロール
EventName MouseEnter トリガーとするイベント
共通プロパティ TragetName treeView 変更対象のコントロール
PropertyName Background 変更するプロパティ
Value SolidColorBrush(#FFCCFF66) 設定するブラシ

 同様にマウスがTreeViewを抜ける際のChangePropertyActionビヘイビアーの設定値を表3に示します。

表3 ChangePropertyActionビヘイビアーの背景色変更の設定値
分類 プロパティー名 設定値 備考
トリガー SourceName treeView イベントの発生元コントロール
EventName MouseLeave トリガーとするイベント
共通プロパティ TragetName treeView 変更対象のコントロール
PropertyName Background 変更するプロパティ
Value No Brush 設定するブラシ

 実行結果を図6に示します。実行してみると、実際にこれだけでマウスの動作に合わせて背景色が変更されるアニメーションが行われていることを確認できると思います。単純なことではありますが、コードを書かないということは簡単に画面を作成できるだけでなく、コーディングによるバグが入り込む余地を少なくし製品の品質向上につながります。

図6 ChangePropertyActionビヘイビアーを使った背景色の変更の実行結果
図6 ChangePropertyActionビヘイビアーを使った背景色の変更の実行結果

カスタムビヘイビアー

 もともと用意されているビヘイビアーはアニメーションを実行したり、あるプロパティが変更されたときにターゲットのプロパティを変更するといった単純なものだけです。

 Expression BlendではExpression SDKを利用することでカスタムのビヘイビアーを定義できます。また、MicrosoftのExpression Galleryにはすぐに利用できるビヘイビアーが用意されています。

 ここではテキストボックスが空の際に、ボタンが押されたときに特定のメッセージを表示するビヘイビアーを作成します。

プロジェクトの作成

 まずはカスタムビヘイビアー用のプロジェクトを作成します。Silverlight向けのカスタムビヘイビアーを作成するためには、Silverlight向けのクラスライブラリを作成し、次のアセンブリを参照に加える必要があります。

1. 新規プロジェクトを作成する

 Visual Studioメニューの[ファイル]-[新規作成]-[プロジェクト]を選択し、Silverlightクラスライブラリを作成します。ここではプロジェクト名を「SampleBehaviors」とします(図7)。

図7 カスタムビヘイビアープロジェクトの作成
図7 カスタムビヘイビアープロジェクトの作成

2. 参照を追加する

 Visual Studioメニューの[プロジェクト]-[参照の追加]から「System.Windows.Interactivity」を追加します(図8)。

図8 System.Windows.Interactivityをプロジェクトに追加
図8 System.Windows.Interactivityをプロジェクトに追加

次のページ
カスタムビヘイビアーの作成

修正履歴

この記事は参考になりましたか?

Silverlight 3徹底入門連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト かるあ (杉山 洋一)(カルア(スギヤマ ヨウイチ))

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/4573 2009/12/16 15:05

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー