勉強会オフ会の資料

1. MVVM開発をさらに加速させる
ノンコーディングUI開発
泉本 優輝

2. • 泉本優輝 [Yuki Izumoto]
• Microsoft MVP for Client Development
• コードがかけるフリーのデザイナー
• 最近はカメラが趣味
– パワポの表紙は
いつも自分で撮った写真
• Web:http://c-mitsuba.com
• Windows 8 UI / UX デザイン入門とか
profile

3. Windows 8.1 RTM
+
Blend for VS 2013 RC

4. RTM + RC 現在の情報のため、
公開時とは異なる場合があります。

5. ノンコーディングUI開
発
＝
Behavior

6. Behavior
• 日本語訳：振る舞い
• Windows Formのぽとぺたで作れるのは
コントロールだけだった。
• UI = XAMLの動きの部分もぽとぺたで組
めるようになる。
• ただし、WPF / SL / WP のみだった。

7. だれが
どうされたときに
だれの
なにを
どうする。
これさえ覚えておけば大丈夫

8. Buttonが
Clickされたときに
Rectangleの
Visibilityを
Visibleに変更する。

9. もっと具体的に
なにができるの？
https://dl.dropboxu
sercontent.com/u/
1321204/BlendBe
havior.docx

10. private void buttonPanel_Loaded(object
sender, System.Windows.RoutedEventArgs e)
{
var RandomList =
buttonPanel.Items.OrderBy(i =>
Guid.NewGuid()).ToArray();
buttonPanel.ItemsSource = null;
foreach(var item in RandomList)
{
buttonPanel.Items.Add(item);
}
}

11. ようやくBehaviorが
Windows Store Apps 8.1
にもつきました。

12. ただ、WPF / SL / WPのころと
少し変わっていて
癖もありました。
なので、使い方をご紹介。

13. Windows Store Apps Behavior
• Behaviorが２つのコントロールで構成さ
れるようになりました。
• TriggerBehavior = タイミング
• Action = 処理

14. TriggerBehavior
だれが
どうされたときに
• 実行するタイミングを定義するBehavior
• Actionをまとめられます。
Buttonが
Clickされたときに＝

15. Action = 実際の処理
だれの
なにを
どうする
プロパティの指定などは、
グラフィカルに行えます。
Rectangleの
Visibilityを
Visibleにする
＝

16. ２種類のTriggerBehavior
• EventTriggerBehavior
Click、Tapped、KeyDown、LostFocus
etc...基本的なイベントで発火する。
• DataTriggerBehavior
Data (Control.Property、ViewModel、
DataContext）
Equal、NotEqual、LessThan etc...
Value で発火する。

17. ６種類のAction
• ChangePropertyAction
プロパティを変更する
• ControlStoryboardAction
アニメーションを再生したり止めたりする
• GoToStateAction
VisualStateを変更する
• InvokeCommandAction
Commandを実行する
• NavigateToPageAction
ページ遷移する
• PlaySoundAction
音を鳴らす

18. Controlの構成例
GridViewItem
EventTriggerBehavior = Tapされたら
ChangePropertyAction = 自分のIsSelectedをOnにする
ChangePropertyAction = 子ImageのOpacityを60にする
EventTriggerBehavior = MouseEnterされたら
ControlStoryboardAction = Storyboard1をPlayする
PlaySoundAction = SE.mp3をPlayする

19. Demo

20. まとめ

21. Behaviorの使い方
• TriggerBehavior
• だれが = ElementBindingで指定
• どうされたときに = 発火条件を指定
• だれの = ElementBindingで指定
• Action
• なにを = Property名で指定
• どうする = Propertyを指定
• DataBinding、ElementBinding、Converter
を駆使して、UIをXAMLで思いのままに操
作！

22. 経験則
• EventTriggerBehavior
• ChangePropertyAction
• NavigateToPageAction
• ControlStoryboardAction
• この４つさえ使えれば、だいたいのこと
はできる。

23. 注意点
• ElementBindingすると、勝手にControlに
x:Nameが振られます。
• x:Name = rectangle1など
• この名前はXAML内でのみ使用されるため、
影響範囲は少ないが、適当すぎてよくない。

24. Behaviorを使えば
• UIの処理をxaml.csに書かなくて済む。
• UIのためのコードとVMのためのコードが
混ざらない。
• VMの操作に集中できる！
• XAMLだけで振る舞いが完結する
• そもそもXAML直接いじるほうが難しい
• MVVMで、よりViewの分離が可能！
• XAMLのコピペができる！
ページ内でも他ページでも別アプリにでも！