Blend for Visual Studio
2013の新機能
Blend for VS2013のWindows ストア アプリ開発の機能を見てみよう
Microsoft MVP for Client App Dev 2011/07-2014...
自己紹介
▪ 大田 一希
▪ Microsoft MVP for Client App Dev 2011/06-2014/07
▪ Twitter: @okazuki
▪ Blog: かずきのBlog@hatena
http://okazuki...
注意
▪ Blend for Visual Studio 2013 RC時点の情報です。正式版では異
なる可能性があります。
▪ Blend for Visual Studio 2013は長いので、Blend for VS2013と略
してます...
目標
▪ 画面作成はBlendでやったほうが便利かも?って思ってもら
う。
目次
▪ Blend for Visual Studio 2013とは
▪ Blend for Visual Studio 2013新機能
▪ Windows ストア アプリのBehavior
▪ 新しいコントロールのサポート
▪ まとめ
Blend for
Visual Studio 2013とは
Blend for VS2013について
プログラマとデザイナの共同開発のためのツール!!
▪ Visual Studio
▪ コーディング
▪ Expression Blend
▪ デザイン
デザイナ 開発者
同じファイルを使ってして作業可能
現状
▪ Visual Studioに同梱
▪ Visual Studio 2012/2013を買うとBlend for Visual Studio 2012/2013が
ついてくる
(Windows PhoneとWindows ストア アプリ...
とはいいつつ
▪ 最高のXAMLの画面デザインツール
▪ 使い勝手のいい画面デザイナ (主観)
▪ サンプルデータ (New!!)
▪ ドラッグでデータバインドの作成
▪ Behavior (New!!)
▪ ストーリーボード
▪ Visual...
Blend for Visual Studio 2013とは まとめ
▪ Visual Studioと同じソリューションファイルを対象に作業が
できる
▪ XAMLで画面デザインする上で最高のツール
▪ 2013で待望の新機能が諸々追加されてる...
Blend for
Visual Studio 2013新機能
新機能
▪ デザイン時DataContextの設定
▪ デザイナ用のDataContextをGUIで設定できる機能
▪ サンプルデータ
▪ デザイナに表示するためのダミーデータ作成機能
▪ Behavior
▪ UIロジックを部品化して再利用す...
デザイン時DataContextの設定
▪ 今まで
▪ 以下を手書き
{d:DataContext DesignType=
hoge:HogeHogeViewModel,
IsDesignTimeCreate=True}
▪ Blend for...
サンプルデータ
▪ 今まで
▪ SampleDataSourceクラスに
あるようにコード直書き
▪ Blend for VS2013
▪ GUI
▪ クラスをベースにサンプルデータを
組み立てる
▪ Blendを使ってサンプルデータを
組み立...
Behavior
▪ XAML系プラットフォームで唯一Windows ストア アプリにな
かった機能
▪ Blend for VS2013で復活!!!
Windows ストア アプリの
Behavior
Behaviorとは
▪ UIロジックを部品化したもの(ロジックを再利用でき
る・・・!)
▪ UIロジック「○○したら××する」
▪ 例
▪ ボタンをクリックしたらMainPage.xamlに遷移する
▪ プロパティの値が変わったらStory...
使い勝手は他のプラットフォームのBehaviorと”似てる”
▪ コントロールにドラッグアンドドロップして使用する
▪ 操作の起点となるTriggerBehavior
▪ 他のプラットフォームでは単にTrigger
▪ 操作を表すAction
...
例:ボタンにGoToStateActionをドロップした場合
WPF
▪ Button
▪ GoToAtateAction
Windows ストア アプリ
▪ Button
▪ EventTriggerBehavior
▪ GoToStateA...
XAML的にはTriggerもBehavior
▪ WPF
▪ Windows ストア アプリ
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:GoToStateA...
機能面でもちょっと少ない
▪ 条件式が無い
▪ WPFなどの他のプラットフォームでは”○○したら××する”の
××をするときの条件を記載できる。
▪ 例:プロパティAの値が”abc”だったら実行する
▪ Behavior自体の数がちょっと少ない
Blend for VS2013で提供されるBehavior
▪ Windows ストア アプリ(10個)
▪ CallMethodAction
▪ ChangePropertyAction
▪ ControlStoryboardAction
...
基本機能はそろってる
▪ ViewModelの
▪ メソッドを呼ぶ
▪ コマンドを実行する
▪ プロパティを変える
▪ 画面の
▪ VisualStateを変える
▪ プロパティを変える
▪ ストーリーボードを操作する
サンプルデータとBehaviorのデモ
▪ サンプルデータの作成
▪ ビヘイビアで画面遷移
Windows ストア アプリの
Behavior
Behaviorを作る人向け
クラス構造
▪ 今まで
▪ IAttachedObject
▪ Behavior<T> : Freezable, IAttachedObject
▪ TriggerBase<T> : Freezable, IAttachedObject
▪ E...
TriggerBehaviorになるには?
▪ DependencyObjectを継承
▪ IBehaviorを実装
▪ OnAttachedメソッドの実装
▪ OnDetachingメソッドの実装
▪ ActionCollection型のAc...
ビヘイビア実装のサンプル
▪ Windows 8.1のBlendのBehaviorに自作Behaviorを追加する
▪ http://code.msdn.microsoft.com/Windows-81BlendBehavior-4bbdef19
新しいコントロールのサポー
ト
(Visual Studioでも同じことができます)
Flyout
▪ Windows 8.1のストアアプリから追加
▪ Flyoutコントロール
Buttonには、自動で付けれる。
▪ Visual Studioでボタンにドラッグすることで使える
▪ 右クリックからFlyoutの編集で編集可能(...
CommandBar
▪ 一般的なAppBar
▪ PrimaryCommands
▪ 右側に表示するAppBarButtonを置く
▪ SecondaryCommands
▪ 左側に表示するAppBarButtonを置く
▪ AppBarBu...
Hubコントロール
▪ いかにもWindows ストア アプリ!といった見た目を簡単に
作れるコントロール
▪ HubSectionの追加
▪ ハブセクションの編集
まとめ
Blend for VS2013
▪ 最高のXAMLの画面デザインツール
▪ 使い勝手のいい画面デザイナ (主観)
▪ サンプルデータ
▪ ドラッグでデータバインドの作成
▪ ビヘイビア
▪ ストーリーボード
▪ Visual State Ma...
画面デザインはBlendを使お
う!
Upcoming SlideShare
Loading in...5
×

Blend for visual studio 2013の新機能

8,064

Published on

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

Transcript of "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を使お う!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×