MVVM開発をさらに加速させる
ノンコーディングUI開発
泉本 優輝
• 泉本優輝 [Yuki Izumoto]
• Microsoft MVP for Client Development
• コードがかけるフリーのデザイナー
• 最近はカメラが趣味
– パワポの表紙は
いつも自分で撮った写真
• Web:ht...
Windows 8.1 RTM
+
Blend for VS 2013 RC
RTM + RC 現在の情報のため、
公開時とは異なる場合があります。
ノンコーディングUI開
発
=
Behavior
Behavior
• 日本語訳:振る舞い
• Windows Formのぽとぺたで作れるのは
コントロールだけだった。
• UI = XAMLの動きの部分もぽとぺたで組
めるようになる。
• ただし、WPF / SL / WP のみだった。
だれが
どうされたときに
だれの
なにを
どうする。
これさえ覚えておけば大丈夫
Buttonが
Clickされたときに
Rectangleの
Visibilityを
Visibleに変更する。
もっと具体的に
なにができるの?
https://dl.dropboxu
sercontent.com/u/
1321204/BlendBe
havior.docx
private void buttonPanel_Loaded(object
sender, System.Windows.RoutedEventArgs e)
{
var RandomList =
buttonPanel.Items.Orde...
ようやくBehaviorが
Windows Store Apps 8.1
にもつきました。
ただ、WPF / SL / WPのころと
少し変わっていて
癖もありました。
なので、使い方をご紹介。
Windows Store Apps Behavior
• Behaviorが2つのコントロールで構成さ
れるようになりました。
• TriggerBehavior = タイミング
• Action = 処理
TriggerBehavior
だれが
どうされたときに
• 実行するタイミングを定義するBehavior
• Actionをまとめられます。
Buttonが
Clickされたときに=
Action = 実際の処理
だれの
なにを
どうする
プロパティの指定などは、
グラフィカルに行えます。
Rectangleの
Visibilityを
Visibleにする
=
2種類のTriggerBehavior
• EventTriggerBehavior
Click、Tapped、KeyDown、LostFocus
etc...基本的なイベントで発火する。
• DataTriggerBehavior
Data ...
6種類のAction
• ChangePropertyAction
プロパティを変更する
• ControlStoryboardAction
アニメーションを再生したり止めたりする
• GoToStateAction
VisualStateを変...
Controlの構成例
GridViewItem
EventTriggerBehavior = Tapされたら
ChangePropertyAction = 自分のIsSelectedをOnにする
ChangePropertyAction = ...
Demo
まとめ
Behaviorの使い方
• TriggerBehavior
• だれが = ElementBindingで指定
• どうされたときに = 発火条件を指定
• だれの = ElementBindingで指定
• Action
• なにを = P...
経験則
• EventTriggerBehavior
• ChangePropertyAction
• NavigateToPageAction
• ControlStoryboardAction
• この4つさえ使えれば、だいたいのこと
はで...
注意点
• ElementBindingすると、勝手にControlに
x:Nameが振られます。
• x:Name = rectangle1など
• この名前はXAML内でのみ使用されるため、
影響範囲は少ないが、適当すぎてよくない。
Behaviorを使えば
• UIの処理をxaml.csに書かなくて済む。
• UIのためのコードとVMのためのコードが
混ざらない。
• VMの操作に集中できる!
• XAMLだけで振る舞いが完結する
• そもそもXAML直接いじるほうが難し...
Upcoming SlideShare
Loading in …5
×

MVVM開発をさらに加速させる ノンコーディングUI開発

3,362 views
3,092 views

Published on

勉強会オフ会の資料

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,362
On SlideShare
0
From Embeds
0
Number of Embeds
167
Actions
Shares
0
Downloads
12
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

MVVM開発をさらに加速させる ノンコーディングUI開発

  1. 1. MVVM開発をさらに加速させる ノンコーディングUI開発 泉本 優輝
  2. 2. • 泉本優輝 [Yuki Izumoto] • Microsoft MVP for Client Development • コードがかけるフリーのデザイナー • 最近はカメラが趣味 – パワポの表紙は いつも自分で撮った写真 • Web:http://c-mitsuba.com • Windows 8 UI / UX デザイン入門とか profile
  3. 3. Windows 8.1 RTM + Blend for VS 2013 RC
  4. 4. RTM + RC 現在の情報のため、 公開時とは異なる場合があります。
  5. 5. ノンコーディングUI開 発 = Behavior
  6. 6. Behavior • 日本語訳:振る舞い • Windows Formのぽとぺたで作れるのは コントロールだけだった。 • UI = XAMLの動きの部分もぽとぺたで組 めるようになる。 • ただし、WPF / SL / WP のみだった。
  7. 7. だれが どうされたときに だれの なにを どうする。 これさえ覚えておけば大丈夫
  8. 8. Buttonが Clickされたときに Rectangleの Visibilityを Visibleに変更する。
  9. 9. もっと具体的に なにができるの? https://dl.dropboxu sercontent.com/u/ 1321204/BlendBe havior.docx
  10. 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. 11. ようやくBehaviorが Windows Store Apps 8.1 にもつきました。
  12. 12. ただ、WPF / SL / WPのころと 少し変わっていて 癖もありました。 なので、使い方をご紹介。
  13. 13. Windows Store Apps Behavior • Behaviorが2つのコントロールで構成さ れるようになりました。 • TriggerBehavior = タイミング • Action = 処理
  14. 14. TriggerBehavior だれが どうされたときに • 実行するタイミングを定義するBehavior • Actionをまとめられます。 Buttonが Clickされたときに=
  15. 15. Action = 実際の処理 だれの なにを どうする プロパティの指定などは、 グラフィカルに行えます。 Rectangleの Visibilityを Visibleにする =
  16. 16. 2種類のTriggerBehavior • EventTriggerBehavior Click、Tapped、KeyDown、LostFocus etc...基本的なイベントで発火する。 • DataTriggerBehavior Data (Control.Property、ViewModel、 DataContext) Equal、NotEqual、LessThan etc... Value で発火する。
  17. 17. 6種類のAction • ChangePropertyAction プロパティを変更する • ControlStoryboardAction アニメーションを再生したり止めたりする • GoToStateAction VisualStateを変更する • InvokeCommandAction Commandを実行する • NavigateToPageAction ページ遷移する • PlaySoundAction 音を鳴らす
  18. 18. Controlの構成例 GridViewItem EventTriggerBehavior = Tapされたら ChangePropertyAction = 自分のIsSelectedをOnにする ChangePropertyAction = 子ImageのOpacityを60にする EventTriggerBehavior = MouseEnterされたら ControlStoryboardAction = Storyboard1をPlayする PlaySoundAction = SE.mp3をPlayする
  19. 19. Demo
  20. 20. まとめ
  21. 21. Behaviorの使い方 • TriggerBehavior • だれが = ElementBindingで指定 • どうされたときに = 発火条件を指定 • だれの = ElementBindingで指定 • Action • なにを = Property名で指定 • どうする = Propertyを指定 • DataBinding、ElementBinding、Converter を駆使して、UIをXAMLで思いのままに操 作!
  22. 22. 経験則 • EventTriggerBehavior • ChangePropertyAction • NavigateToPageAction • ControlStoryboardAction • この4つさえ使えれば、だいたいのこと はできる。
  23. 23. 注意点 • ElementBindingすると、勝手にControlに x:Nameが振られます。 • x:Name = rectangle1など • この名前はXAML内でのみ使用されるため、 影響範囲は少ないが、適当すぎてよくない。
  24. 24. Behaviorを使えば • UIの処理をxaml.csに書かなくて済む。 • UIのためのコードとVMのためのコードが 混ざらない。 • VMの操作に集中できる! • XAMLだけで振る舞いが完結する • そもそもXAML直接いじるほうが難しい • MVVMで、よりViewの分離が可能! • XAMLのコピペができる! ページ内でも他ページでも別アプリにでも!

×