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

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の機能のことをさします。
▪ 掲載内容は私自身の見解であり、所属する組織を代表する
ものではありません

4. 目標
▪ 画面作成はBlendでやったほうが便利かも？って思ってもら
う。

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で復活！！！

16. Windows ストア アプリの
Behavior

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を変える
▪ プロパティを変える
▪ ストーリーボードを操作する

24. サンプルデータとBehaviorのデモ
▪ サンプルデータの作成
▪ ビヘイビアで画面遷移

25. Windows ストア アプリの
Behavior
Behaviorを作る人向け

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

29. 新しいコントロールのサポー
ト
(Visual Studioでも同じことができます）

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の作成

35. 画面デザインはBlendを使お
う！