Blend for visual studio 2013の新機能

9,843 views

Published on

めとべや東京 #2で発表した資料になります

Blend for visual studio 2013の新機能

  1. 1. Blend for Visual Studio 2013の新機能 Blend for VS2013のWindows ストア アプリ開発の機能を見てみよう Microsoft MVP for Client App Dev 2011/07-2014/06 大田 一希
  2. 2. 自己紹介 ▪ 大田 一希 ▪ Microsoft MVP for Client App Dev 2011/06-2014/07 ▪ Twitter: @okazuki ▪ Blog: かずきのBlog@hatena http://okazuki.hatenablog.com/ ▪ 本書いてます ▪ Windows 8 ストア アプリ開発入門 ▪ Windows ストア アプリ開発のレシピ110 ▪ トピックス ▪ 最近改宗してiPhone 5買いました
  3. 3. 注意 ▪ Blend for Visual Studio 2013 RC時点の情報です。正式版では異 なる可能性があります。 ▪ Blend for Visual Studio 2013は長いので、Blend for VS2013と略 してます ▪ 文中で特に断りなく”Blend for VS2013の機能”のように書いて ある場合は原則としてWindows ストア アプリ開発のための Blend for VS2013の機能のことをさします。 ▪ 掲載内容は私自身の見解であり、所属する組織を代表する ものではありません
  4. 4. 目標 ▪ 画面作成はBlendでやったほうが便利かも?って思ってもら う。
  5. 5. 目次 ▪ Blend for Visual Studio 2013とは ▪ Blend for Visual Studio 2013新機能 ▪ Windows ストア アプリのBehavior ▪ 新しいコントロールのサポート ▪ まとめ
  6. 6. Blend for Visual Studio 2013とは Blend for VS2013について
  7. 7. プログラマとデザイナの共同開発のためのツール!! ▪ Visual Studio ▪ コーディング ▪ Expression Blend ▪ デザイン デザイナ 開発者 同じファイルを使ってして作業可能
  8. 8. 現状 ▪ Visual Studioに同梱 ▪ Visual Studio 2012/2013を買うとBlend for Visual Studio 2012/2013が ついてくる (Windows PhoneとWindows ストア アプリはExpress Editionあり) ▪ つまり開発者のためのツールなんですか…?(疑問)
  9. 9. とはいいつつ ▪ 最高のXAMLの画面デザインツール ▪ 使い勝手のいい画面デザイナ (主観) ▪ サンプルデータ (New!!) ▪ ドラッグでデータバインドの作成 ▪ Behavior (New!!) ▪ ストーリーボード ▪ Visual State Manager ▪ デザイン時DataContextの作成 (New!!)
  10. 10. Blend for Visual Studio 2013とは まとめ ▪ Visual Studioと同じソリューションファイルを対象に作業が できる ▪ XAMLで画面デザインする上で最高のツール ▪ 2013で待望の新機能が諸々追加されてる ▪ WPFやSilverlightやWindows Phoneでは既にあった機能がほとんど ですが…
  11. 11. Blend for Visual Studio 2013新機能
  12. 12. 新機能 ▪ デザイン時DataContextの設定 ▪ デザイナ用のDataContextをGUIで設定できる機能 ▪ サンプルデータ ▪ デザイナに表示するためのダミーデータ作成機能 ▪ Behavior ▪ UIロジックを部品化して再利用する機能
  13. 13. デザイン時DataContextの設定 ▪ 今まで ▪ 以下を手書き {d:DataContext DesignType= hoge:HogeHogeViewModel, IsDesignTimeCreate=True} ▪ Blend for VS2013 ▪ GUI
  14. 14. サンプルデータ ▪ 今まで ▪ SampleDataSourceクラスに あるようにコード直書き ▪ Blend for VS2013 ▪ GUI ▪ クラスをベースにサンプルデータを 組み立てる ▪ Blendを使ってサンプルデータを 組み立てる
  15. 15. Behavior ▪ XAML系プラットフォームで唯一Windows ストア アプリにな かった機能 ▪ Blend for VS2013で復活!!!
  16. 16. Windows ストア アプリの Behavior
  17. 17. Behaviorとは ▪ UIロジックを部品化したもの(ロジックを再利用でき る・・・!) ▪ UIロジック「○○したら××する」 ▪ 例 ▪ ボタンをクリックしたらMainPage.xamlに遷移する ▪ プロパティの値が変わったらStoryboard1を再生する ▪ Blendでドラッグアンドドロップで使用できる
  18. 18. 使い勝手は他のプラットフォームのBehaviorと”似てる” ▪ コントロールにドラッグアンドドロップして使用する ▪ 操作の起点となるTriggerBehavior ▪ 他のプラットフォームでは単にTrigger ▪ 操作を表すAction ▪ デザイナ上の表示が少し異なる
  19. 19. 例:ボタンにGoToStateActionをドロップした場合 WPF ▪ Button ▪ GoToAtateAction Windows ストア アプリ ▪ Button ▪ EventTriggerBehavior ▪ GoToStateAction
  20. 20. XAML的にはTriggerもBehavior ▪ WPF ▪ Windows ストア アプリ <i:Interaction.Triggers> <i:EventTrigger EventName="Click"> <ei:GoToStateAction/> </i:EventTrigger> </i:Interaction.Triggers> <Interactivity:Interaction.Behaviors> <Core:EventTriggerBehavior EventName="Click"> <Core:GoToStateAction/> </Core:EventTriggerBehavior> </Interactivity:Interaction.Behaviors>
  21. 21. 機能面でもちょっと少ない ▪ 条件式が無い ▪ WPFなどの他のプラットフォームでは”○○したら××する”の ××をするときの条件を記載できる。 ▪ 例:プロパティAの値が”abc”だったら実行する ▪ Behavior自体の数がちょっと少ない
  22. 22. Blend for VS2013で提供されるBehavior ▪ Windows ストア アプリ(10個) ▪ CallMethodAction ▪ ChangePropertyAction ▪ ControlStoryboardAction ▪ DataTriggerBehavior ▪ EventTriggerBehavior ▪ GoToStateAction ▪ IncrementalUpdateBehavior ▪ InvokeCommandAction ▪ NavigateToPageAction ▪ PlaySoundAction ▪ WPF(14個) ▪ CallMethodAction ▪ ChangePropertyAction ▪ ControlStoryboardAction ▪ DataStateBehavior ▪ FuidMoveBehavior ▪ FluidMoveSetTagBehavior ▪ GoToStateAction ▪ InvokeCommandAction ▪ LaunchUriOrFileAction ▪ MouseDragEementBehavior ▪ PlaySoundAction ▪ RemoveEementAction ▪ SetDataStoreValueAction ▪ TranslateZoomRotateBehavior ちょっと少ない ※赤色が相手に無いもの
  23. 23. 基本機能はそろってる ▪ ViewModelの ▪ メソッドを呼ぶ ▪ コマンドを実行する ▪ プロパティを変える ▪ 画面の ▪ VisualStateを変える ▪ プロパティを変える ▪ ストーリーボードを操作する
  24. 24. サンプルデータとBehaviorのデモ ▪ サンプルデータの作成 ▪ ビヘイビアで画面遷移
  25. 25. Windows ストア アプリの Behavior Behaviorを作る人向け
  26. 26. クラス構造 ▪ 今まで ▪ IAttachedObject ▪ Behavior<T> : Freezable, IAttachedObject ▪ TriggerBase<T> : Freezable, IAttachedObject ▪ EventTrigger ▪ ActionBase<T> : Freezable, IAttachedObject ▪ GoToStateAction ▪ ストア アプリ ▪ IBehavior ▪ EventTriggerBehavior : DependencyObject, IBehavior ▪ IAction ▪ GoToStateAction : DependencyObject, IBehavior
  27. 27. TriggerBehaviorになるには? ▪ DependencyObjectを継承 ▪ IBehaviorを実装 ▪ OnAttachedメソッドの実装 ▪ OnDetachingメソッドの実装 ▪ ActionCollection型のActionsという依存プロパティが必要 ▪ public static readonly DependencyProperty ActionsProperty = DependencyProperty.Register….(…); public ActionCollection Actions { get { var value = this.GetValue(ActionsProperty) as ActionCollection; if (value == null) { value = new ActionCollection(); this.SetValue(ActionsProperty, value); } return value; } }
  28. 28. ビヘイビア実装のサンプル ▪ Windows 8.1のBlendのBehaviorに自作Behaviorを追加する ▪ http://code.msdn.microsoft.com/Windows-81BlendBehavior-4bbdef19
  29. 29. 新しいコントロールのサポー ト (Visual Studioでも同じことができます)
  30. 30. Flyout ▪ Windows 8.1のストアアプリから追加 ▪ Flyoutコントロール Buttonには、自動で付けれる。 ▪ Visual Studioでボタンにドラッグすることで使える ▪ 右クリックからFlyoutの編集で編集可能(Visual Sutdioではポップアップ の編集)
  31. 31. CommandBar ▪ 一般的なAppBar ▪ PrimaryCommands ▪ 右側に表示するAppBarButtonを置く ▪ SecondaryCommands ▪ 左側に表示するAppBarButtonを置く ▪ AppBarButtonの数とWindowサイズに応じて適切にAppBarButtonの サイズ調整などをしてくれる。
  32. 32. Hubコントロール ▪ いかにもWindows ストア アプリ!といった見た目を簡単に 作れるコントロール ▪ HubSectionの追加 ▪ ハブセクションの編集
  33. 33. まとめ
  34. 34. Blend for VS2013 ▪ 最高のXAMLの画面デザインツール ▪ 使い勝手のいい画面デザイナ (主観) ▪ サンプルデータ ▪ ドラッグでデータバインドの作成 ▪ ビヘイビア ▪ ストーリーボード ▪ Visual State Manager ▪ デザイン時DataContextの作成
  35. 35. 画面デザインはBlendを使お う!

×