Silverlight3とBlend3とビヘイビア

Silverlightの開発、ビヘイビアが結構便利なのだけど、あまりまだ洗練されてないのと情報少ないので発見したこと共有しておきます。

まとめを書きたいけどちょっと時間取れないので、ざっくり、どんなものかを書いておきます。

とにかくコードを書かなくて良くなる

コード書く量が減れば、コードをビジネスロジックに集中できるので、見通しが良くなります。デザイナに渡すのも楽かもしれないですね。

簡単な処理はストーリーボードも不要

全部ストーリーボードでやろうとしていたら、結局制御のためにプログラムを書かなきゃいけない事態になっていたので、これも便利ですね。イージングもかけられます。

ときどき動かない条件があるらしい?

マウスオーバーで画像を切り替える処理をやりたくて、ChangePropertyActionに親コントロール(Image)のSourceを切り替える処理をやらせたら、Silverlight自体表示されなくなってしまいました。ローディング100%の状態で先に進まない…。

他にもHyperlinkActionに直接http://から始まるURLを書いたら同じ現象になりました。使い方間違ってるだけだとは思うけど。これについての情報はこっちで解決。

Blend 3 silverlight application & website

<HyperlinkButton Tag="/Views/Page1.xaml" Background="Black" Height="47" HorizontalAlignment="Left" VerticalAlignment="Top" Width="133" NavigateUri="/Page1.xaml" Cursor="Stylus" />

ビヘイビア使わずにHyperlinkButtonにするってことですね…

状態を制するとインターフェースの設計が楽になる

やっぱりインターフェースを重点的に考えられているだけあって、状態を作ってしまえば、あとは状態の遷移だけ意識すればいいという点で便利。

マウスオーバーでずるっと出てくるメニューとか、GoToStateActionを使うと簡単に作れます。状態を先に保存しておいて、それぞれの状態を切り替える処理をクリックイベントだのチェックボックスのチェックだののイベントに関連付けられます。

ただし、「状態」を使うために別コントロールにしておく必要あり。あと、別コントロールにしたあと、一度ビルドしないとプロジェクト内の他のXAMLから使えないっぽい?アセットにコントロールが出てこないと焦ったときはとりあえずビルド。

マウスオーバーでずるっと出てくるメニューはストーリーボードでやらないほうがいい

なぜならアニメーション中にフォーカス外れたとき、MouseLeaveイベントにストーリーボードのBeginとか書いてあると、メニューが出きっていないのにストーリーボードのスタート地点で出きった位置に飛ばされるからです。

その点、GoToStateActionはその辺もきれいに処理してくれるので便利。

ずるずる並び替えられる処理もビヘイビアで

FluidMoveBehaviorを使えばパネルの中の要素をドラッグアンドドロップで変更する処理を一発で設定できるらしいです。試してないけど。

動画あった。これかな?

Animated WPF Panels (animating collection views) | Software and UX

トリガーはビヘイビアを選択したときにプロパティに出てくる

もう一度言う、「トリガーはビヘイビアを選択したときにプロパティに出てくる」。わかりにくい探しにくい…一度覚えてしまえば大丈夫なのだろうけど…

ついでに言うと、状態の選択を解除するには状態タブの中のベースを選択しておけばいいと思う。

その他、デモとか

色々解説してくれているサイトがあったので、紹介しておきます。

kirupa.com – Using Custom Visual States, Page 1 (Visual StatesとGoToStateActionの話)

kirupa.com – Using the FluidMove Behavior, Page 1 (FluidMoveBehaviorのデモあり)

サイト上で全部のデモを見られないのが残念だけど、ソース公開してくれているので、一度ダウンロードして動きを見てみるといいと思いますよ。


タグ: ,

新しく会社作りました!

コメントをどうぞ