ホーム > Expression Blend > 0からはじめるExpression Blend再入門

その26:Behavior ControlStoryboardAction

0からはじめるExpression Blend再入門
蜜葉 優@Silverlight Square[著], わにちゃん@ExpressionTech.jp[編集]
2011年9月26日 from Atelier:Mitsuba

はじめに

囲む会名古屋で@coelacanthさんに

「0から始めるExpression Blend 4は続き書かないんですか!」「ぜひビヘイビアをですねry」

なんて言われてしまったので、これはやらないといけないなぁ。。と

あつた蓬莱軒で4000円の大盛ひつまぶしを食べながら考えていました。

f:id:c-mitsuba:20110926000436j:image

という訳でビヘイビア特集で再開です。

ビヘイビアとは

まず、このビヘイビア。いろいろあります。

ビヘイビアとはちっちゃなコードの集まりで、「だれの」「なにを」「いつ」「どうする」をBlendのパネルで簡単に指定して使うことができます。

一方でVSではそういう気の利いた者はないので、ビヘイビアを使いたかったら全部手書きになります。

なので、基本的にBlendで使うのがいいでしょう。

今回ははじめにControlStoryboardActionを紹介します。これは名前のとおりStoryboardを制御するビヘイビアです。

操作方法

とりあえずこんな感じにXAMLを書きました。

f:id:c-mitsuba:20110926001514p:image

つぎにこれまた適当にStoryboardをつくりました。

f:id:c-mitsuba:20110926001739p:image

f:id:c-mitsuba:20110926001738p:image

四角形は左から右に回転しながら動きます。

コントロール->ビヘイビアから、ControlStoryboardActionをボタンにドラッグアンドドロップします。

こんなかんじ。

f:id:c-mitsuba:20110926002042p:image

で、ドラッグしたビヘイビアを選択。

すると右側にトリガーとプロパティのパネルが現れます。

f:id:c-mitsuba:20110926002041p:image

トリガーはいわゆる「いつ」です。

現時点では[親]がClickされたら、となっています。

わかりやすくボタンにビヘイビアをつけていますが、[親]の右にある二重丸をターゲットにしたいコントロールにドラッグすれば、そのコントロールをトリガーにすることができます。

今回は、このまま[親]のボタンが[Click]されたとき

でいいでしょう。

[親]のボタンが[Click]されたとき、「どうする」のか

これが共通パネルです。今回は[Storyboard1]を[Play]しています。

f:id:c-mitsuba:20110926002625p:image

実行してみましょう。

ボタンを押すとStoryboard1が再生されるはずです。

f:id:c-mitsuba:20110926002857p:image

さらに連打してみましょう。

Storyboard1が最初から再生されます。

これはStoryboardがStop->Startで実行されていることがわかります。

ちなみに、こういうStoryboardにすれば現在地から目的地までなので、連打しても遂行されます。

f:id:c-mitsuba:20110926003535p:image

さて、ではボタンを複製して、いろいろな「いつ」を試してみましょう。

f:id:c-mitsuba:20110926004247p:image

play = 再生

stop = 最初の位置に戻す

pause = 一時停止

skip = 一時停止したものを最後まで飛ばす

resume = 一時停止を再開する

TogglePlayPause = 最初は再生したり一時停止したり再開したりを1ボタンで実現する。

いろいろありますね。こんなに簡単にStoryboardが制御できます。

プログラミングなんてできなくてもへっちゃらですね!

最後に条件についてご紹介します。

トグルがOnの時にだけ有効なTogglePlayPauseButtonを作成してみましょう。

こんなボタンを用意しました。

f:id:c-mitsuba:20110926004945p:image

さらにトグルボタンを適当なところにおきました。

f:id:c-mitsuba:20110926005110p:image

ビヘイビアは

[親]が[Click]されたら[Storyboard1]を[play/pause]するように記述しています。

では、間にある条件について確認します。

このパネルで作成した条件に見合っていればビヘイビアが有効化されます。

f:id:c-mitsuba:20110926005745p:image

まず、条件一覧右にある+ボタンで条件を作成します。

次に比較の1つめの右にある小さな□をクリックしてデータバインドを選択します。

f:id:c-mitsuba:20110926010049p:image

要素プロパティからtoggleButtonのIsCheckedプロパティを選択します。

データ バインドの作成

すると、値がFalseになっていますが、これは現在の値を表示しています。

f:id:c-mitsuba:20110926010305p:image

下の値にはTrueと入力しましょう。

f:id:c-mitsuba:20110926010345p:image

実行します。

toggleButtonにCheckが入っているときは条件付きplay/pauseボタンが操作可能なはずです。

f:id:c-mitsuba:20110926010507p:image

条件はいくつでも増やせますし、andかorの選択も可能です。

さいごに

今回は最初のビヘイビア特集なので、ControlStoryboardActionの部分以外にもビヘイビアの基礎をいろいろ丁寧に書いてみました。

バインディングとビヘイビアがあれば怖いものナシですね!


//それにしてもSilverlightのToggleButtonってイケてないなぁ。

////久々なんだからツイートしても★つけてもいいんだからねっ!

次の記事

0からはじめるExpression Blend再入門』最新記事

コメント

▲このページのトップへ