Blend for visual studio 2013の新機能
Download as PPTX, PDF•6 likes•10,743 views
めとべや東京 #2で発表した資料になります
Blend for visual studio 2013の新機能
- 1. Blend for Visual Studio 2013の新機能 Blend for VS2013のWindows ストア アプリ開発の機能を見てみよう Microsoft MVP for Client App Dev 2011/07-2014/06 大田 一希
- 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. 注意 ▪ Blend for Visual Studio 2013 RC時点の情報です。正式版では異 なる可能性があります。 ▪ Blend for Visual Studio 2013は長いので、Blend for VS2013と略 してます ▪ 文中で特に断りなく”Blend for VS2013の機能”のように書いて ある場合は原則としてWindows ストア アプリ開発のための Blend for VS2013の機能のことをさします。 ▪ 掲載内容は私自身の見解であり、所属する組織を代表する ものではありません
- 5. 目次 ▪ Blend for Visual Studio 2013とは ▪ Blend for Visual Studio 2013新機能 ▪ Windows ストア アプリのBehavior ▪ 新しいコントロールのサポート ▪ まとめ
- 6. Blend for Visual Studio 2013とは Blend for VS2013について
- 7. プログラマとデザイナの共同開発のためのツール！！ ▪ Visual Studio ▪ コーディング ▪ Expression Blend ▪ デザイン デザイナ 開発者 同じファイルを使ってして作業可能
- 8. 現状 ▪ Visual Studioに同梱 ▪ Visual Studio 2012/2013を買うとBlend for Visual Studio 2012/2013が ついてくる （Windows PhoneとWindows ストア アプリはExpress Editionあり) ▪ つまり開発者のためのツールなんですか…？（疑問）
- 9. とはいいつつ ▪ 最高のXAMLの画面デザインツール ▪ 使い勝手のいい画面デザイナ (主観) ▪ サンプルデータ (New!!) ▪ ドラッグでデータバインドの作成 ▪ Behavior (New!!) ▪ ストーリーボード ▪ Visual State Manager ▪ デザイン時DataContextの作成 (New!!)
- 10. Blend for Visual Studio 2013とは まとめ ▪ Visual Studioと同じソリューションファイルを対象に作業が できる ▪ XAMLで画面デザインする上で最高のツール ▪ 2013で待望の新機能が諸々追加されてる ▪ WPFやSilverlightやWindows Phoneでは既にあった機能がほとんど ですが…
- 11. Blend for Visual Studio 2013新機能
- 12. 新機能 ▪ デザイン時DataContextの設定 ▪ デザイナ用のDataContextをGUIで設定できる機能 ▪ サンプルデータ ▪ デザイナに表示するためのダミーデータ作成機能 ▪ Behavior ▪ UIロジックを部品化して再利用する機能
- 13. デザイン時DataContextの設定 ▪ 今まで ▪ 以下を手書き {d:DataContext DesignType= hoge:HogeHogeViewModel, IsDesignTimeCreate=True} ▪ Blend for VS2013 ▪ GUI
- 14. サンプルデータ ▪ 今まで ▪ SampleDataSourceクラスに あるようにコード直書き ▪ Blend for VS2013 ▪ GUI ▪ クラスをベースにサンプルデータを 組み立てる ▪ Blendを使ってサンプルデータを 組み立てる
- 15. Behavior ▪ XAML系プラットフォームで唯一Windows ストア アプリにな かった機能 ▪ Blend for VS2013で復活！！！
- 17. Behaviorとは ▪ UIロジックを部品化したもの（ロジックを再利用でき る・・・！） ▪ UIロジック「○○したら××する」 ▪ 例 ▪ ボタンをクリックしたらMainPage.xamlに遷移する ▪ プロパティの値が変わったらStoryboard1を再生する ▪ Blendでドラッグアンドドロップで使用できる
- 18. 使い勝手は他のプラットフォームのBehaviorと”似てる” ▪ コントロールにドラッグアンドドロップして使用する ▪ 操作の起点となるTriggerBehavior ▪ 他のプラットフォームでは単にTrigger ▪ 操作を表すAction ▪ デザイナ上の表示が少し異なる
- 19. 例：ボタンにGoToStateActionをドロップした場合 WPF ▪ Button ▪ GoToAtateAction Windows ストア アプリ ▪ Button ▪ EventTriggerBehavior ▪ GoToStateAction
- 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. 機能面でもちょっと少ない ▪ 条件式が無い ▪ WPFなどの他のプラットフォームでは”○○したら××する”の ××をするときの条件を記載できる。 ▪ 例：プロパティAの値が”abc”だったら実行する ▪ Behavior自体の数がちょっと少ない
- 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. 基本機能はそろってる ▪ ViewModelの ▪ メソッドを呼ぶ ▪ コマンドを実行する ▪ プロパティを変える ▪ 画面の ▪ VisualStateを変える ▪ プロパティを変える ▪ ストーリーボードを操作する
- 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. 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. ビヘイビア実装のサンプル ▪ Windows 8.1のBlendのBehaviorに自作Behaviorを追加する ▪ http://code.msdn.microsoft.com/Windows-81BlendBehavior-4bbdef19
- 30. Flyout ▪ Windows 8.1のストアアプリから追加 ▪ Flyoutコントロール Buttonには、自動で付けれる。 ▪ Visual Studioでボタンにドラッグすることで使える ▪ 右クリックからFlyoutの編集で編集可能（Visual Sutdioではポップアップ の編集)
- 31. CommandBar ▪ 一般的なAppBar ▪ PrimaryCommands ▪ 右側に表示するAppBarButtonを置く ▪ SecondaryCommands ▪ 左側に表示するAppBarButtonを置く ▪ AppBarButtonの数とWindowサイズに応じて適切にAppBarButtonの サイズ調整などをしてくれる。
- 32. Hubコントロール ▪ いかにもWindows ストア アプリ！といった見た目を簡単に 作れるコントロール ▪ HubSectionの追加 ▪ ハブセクションの編集
- 33. まとめ
- 34. Blend for VS2013 ▪ 最高のXAMLの画面デザインツール ▪ 使い勝手のいい画面デザイナ (主観) ▪ サンプルデータ ▪ ドラッグでデータバインドの作成 ▪ ビヘイビア ▪ ストーリーボード ▪ Visual State Manager ▪ デザイン時DataContextの作成