atelier:mitsuba

i love UI/UX, Blend, XAML, Behavior, P5, oF, Web, Tangible Bits and Physical computing. なにかあればお気軽にご連絡ください。atelier@c-mitsuba.com

その26:Behavior ControlStoryboardAction

囲む会名古屋で@coelacanthさんに
「0から始めるExpression Blend 4は続き書かないんですか!」「ぜひビヘイビアをですねry」
なんて言われてしまったので、これはやらないといけないなぁ。。と
あつた蓬莱軒で4000円の大盛ひつまぶしを食べながら考えていました。

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

                                                                                                                  • -

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

ビヘイビアとはちっちゃなコードの集まりで、
「だれの」「なにを」「いつ」「どうする」をBlendのパネルで簡単に指定して使うことができます。
一方でVSではそういう気の利いた者はないので、ビヘイビアを使いたかったら全部手書きになります。
なので、基本的にBlendで使うのがいいでしょう。

今回ははじめにControlStoryboardActionを紹介します。
これは名前のとおりStoryboardを制御するビヘイビアです。
とりあえずこんな感じにXAMLを書きました。

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


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

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

で、ドラッグしたビヘイビアを選択。
すると右側にトリガーとプロパティのパネルが現れます。

トリガーはいわゆる「いつ」です。
現時点では[親]がClickされたら、となっています。
わかりやすくボタンにビヘイビアをつけていますが、[親]の右にある二重丸をターゲットにしたいコントロールにドラッグすれば、そのコントロールをトリガーにすることができます。
今回は、このまま[親]のボタンが[Click]されたとき
でいいでしょう。

[親]のボタンが[Click]されたとき、「どうする」のか
これが共通パネルです。今回は[Storyboard1]を[Play]しています。

実行してみましょう。
ボタンを押すとStoryboard1が再生されるはずです。

さらに連打してみましょう。
Storyboard1が最初から再生されます。
これはStoryboardがStop->Startで実行されていることがわかります。
ちなみに、こういうStoryboardにすれば現在地から目的地までなので、連打しても遂行されます。

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

play = 再生
stop = 最初の位置に戻す
pause = 一時停止
skip = 一時停止したものを最後まで飛ばす
resume = 一時停止を再開する
TogglePlayPause = 最初は再生したり一時停止したり再開したりを1ボタンで実現する。

いろいろありますね。こんなに簡単にStoryboardが制御できます。
プログラミングなんてできなくてもへっちゃらですね!

最後に条件についてご紹介します。
トグルがOnの時にだけ有効なTogglePlayPauseButtonを作成してみましょう。
こんなボタンを用意しました。

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

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

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

まず、条件一覧右にある+ボタンで条件を作成します。
次に比較の1つめの右にある小さな□をクリックしてデータバインドを選択します。

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

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

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

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

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

今回は最初のビヘイビア特集なので、ControlStoryboardActionの部分以外にも
ビヘイビアの基礎をいろいろ丁寧に書いてみました。
バインディングとビヘイビアがあれば怖いものナシですね!


//それにしてもSilverlightのToggleButtonってイケてないなぁ。
////久々なんだからツイートしても★つけてもいいんだからねっ!