Your SlideShare is downloading. ×
MVVM開発をさらに加速させる ノンコーディングUI開発
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

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

2,128
views

Published on

勉強会オフ会の資料

勉強会オフ会の資料


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

No Downloads
Views
Total Views
2,128
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
6
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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が2つのコントロールで構成さ れるようになりました。 • TriggerBehavior = タイミング • Action = 処理
  • 14. TriggerBehavior だれが どうされたときに • 実行するタイミングを定義するBehavior • Actionをまとめられます。 Buttonが Clickされたときに=
  • 15. Action = 実際の処理 だれの なにを どうする プロパティの指定などは、 グラフィカルに行えます。 Rectangleの Visibilityを Visibleにする =
  • 16. 2種類のTriggerBehavior • EventTriggerBehavior Click、Tapped、KeyDown、LostFocus etc...基本的なイベントで発火する。 • DataTriggerBehavior Data (Control.Property、ViewModel、 DataContext) Equal、NotEqual、LessThan etc... Value で発火する。
  • 17. 6種類の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 • この4つさえ使えれば、だいたいのこと はできる。
  • 23. 注意点 • ElementBindingすると、勝手にControlに x:Nameが振られます。 • x:Name = rectangle1など • この名前はXAML内でのみ使用されるため、 影響範囲は少ないが、適当すぎてよくない。
  • 24. Behaviorを使えば • UIの処理をxaml.csに書かなくて済む。 • UIのためのコードとVMのためのコードが 混ざらない。 • VMの操作に集中できる! • XAMLだけで振る舞いが完結する • そもそもXAML直接いじるほうが難しい • MVVMで、よりViewの分離が可能! • XAMLのコピペができる! ページ内でも他ページでも別アプリにでも!