1. Blendの便利機能
振り返り
@okazuki
大田 一希

2. 自己紹介
 大田 一希
– Microsoft MVP for Client App Dev
2011/07-2013/06
– 富士通アドバンストエンジニアリング
– Twitter: okazuki
– Blog:
かずきのBlog@hatena
http://d.hatena.ne.jp/okazuki/
 本書きました！
– Windows 8 ストア アプリ 開発入門
– Windows ストア アプリ 開発のレシピ110

3. お約束
 掲載内容は私自身の見解であり、所属する組織
を代表するものではありません 。

4. アジェンダ
今日の目標と Visual Studioの
Blendの歴史 Blend for VS2012
使うもの デザイナ
Storyboard ビヘイビア
RADでバインド まとめ
VSM データ系

5. 今日の目標と使うもの
 Visual Studio 2012 Update2 CTP4
– Blend for Visual Studio 2012
 Windows Presentation Foundation 4.5
– 時々Silverlight 5

6. 今日の目標と使うもの
 個人的なゴール
– 1つくらい、これ便利かも！って思ってもらう

7. 今日の目標と使うもの

8. Blendの歴史
 デザイナ向けツールとして登場
– 2007年2月 Expression Blend
 使用経験なし
– 2008年7月 Expression Blend 2
 使ったけど挫折
– 2009年7月 Expression Blend 3
 Adobe Photoshop, Adobe Illustrator形式対応！
 Sketch Flow対応！

9. Blendの歴史
 デザイナ向けツールとして登場
– 2010年6月 Expression Blend 4
– 2012年9月 Blend for Visual Studio 2012
 Visual Studio 2012に同梱
 Windows ストア アプリのみ
 WPF4.5/Silverlight5は対応する正式版のBlendが無い状態
に…

10. ついに来ます！
 Visual Studio 2012 Update2
– Blend for VS2012に以下のサポートが追加！
 Windows Presentation Foundation 4.5
 Silverlight 5
 Visual Studioのデザイナでは出来ない機能
Visual State コントロールか
Storyboard らコントロール サンプルデータ
Manager
の作成

11. Visual Studioも結構やる
ContentControl 回転 データテンプ
テンプレート
の入れ子 変形 レート

12. デモ
 Visual Studio 2012のWPFデザイナ
– コンテンツ内にコンテンツを配置
– 色の設定
– 変形させる
– コントロールテンプレートの編集
– データバインドの設定

13. Visual Studioのデザイナまとめ
 基本的な機能は網羅
– Blendライクなデザイナ
– テンプレート
– 色選択
– 複雑なUIのデザイン
– データバインディング

14. Visual Studioの本業はこっち
 コードエディタが超強力
 NuGetによるパッケージの管理
 etc…
 プログラミングを強力に支援する！！
– 最近は、ALMとかも強力ですよね。追いかけなきゃ。

15. Blend for VS2012の機能
 RADでのデータバインド
 データストア
 サンプルデータ
 ストーリーボード
 Visual State Manager
 ビヘイビア

16. RADでのデータバインド
 DataContextからドラッグアンドドロップで
データバインド
ドラッグアンドドロップ

17. デモ
 画面に表示するデータの作成
 Visual Studioの場合
– Visual StudioでDataContextの設定
– Visual Studioでデータバインディング
 Blendの場合
– BlendでDataContextの設定
– Blendでデータバインディング

18. Storyboard
 Storyboard
– アニメーションの集合
– Aの要素のBプロパティを何秒かけてCの値へ
– etc…
 イベントをきっかけに開始
 コードから開始
 コードで結果を計算して開始

19. Visual State Manager
 ストーリーボードを状態ごとに名前をつけて管理
するもの。
 コントロール内部でよく使われている
– フォーカスがあるときは
 A、B、Cのアニメーションをする
– マウスが上にあるときは
 D、E、Fのアニメーションをする
 アプリケーションを状態に応じて表示切替
– ログイン中とそうじゃないとき
– Windowsストアアプリでは画面の向きなど

20. Behavior
 コントロールに動作を追加
– 基本的にViewに閉じた操作にするのが良い
– ドラッグ操作に対応
– ピンチイン・ピンチアウトによる拡大縮小
– イベントに対応して何か処理を起動する
– etc…

21. デモ
 コントロールを作成
– Visual Stateの切り替え
 ビヘイビアー使ってみる
– タッチ操作対応
– いきすぎたサンプルプログラム
– ViewModelのメソッドを呼ぶ

22. データ
 サンプルデータ
– 適当なデータを表示するのに便利
 モックアップ
 デザイナで表示イメージ確認
 データソース
– データの置場を作れる
– 自作のクラスを使うこともできる

23. デモ
 サンプルデータを使ってみる
 自作クラスをデータソースに

24. まとめ
 Visual Stduio 2012 Update2でBlend for
VS2012がWPF4.5とSilverlight 5対応に
 Visual Studio 2012でも大体のことはできる
 Blendにしかできないことも健在
 きちんと知って使いこなそう