Blendの便利機能振り返り

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

自己紹介

 大田一希
– 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

お約束

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

アジェンダ

今日の目標と Visual Studioの
Blendの歴史 Blend for VS2012
使うものデザイナ

Storyboard ビヘイビア
RADでバインドまとめ
VSM データ系

今日の目標と使うもの

 Visual Studio 2012 Update2 CTP4
– Blend for Visual Studio 2012

 Windows Presentation Foundation 4.5
– 時々Silverlight 5


 個人的なゴール
– 1つくらい、これ便利かも！って思ってもらう

Blendの歴史

 デザイナ向けツールとして登場
– 2007年2月 Expression Blend
 使用経験なし

– 2008年7月 Expression Blend 2
 使ったけど挫折

 Adobe Photoshop, Adobe Illustrator形式対応！
 Sketch Flow対応！

Blendの歴史

 デザイナ向けツールとして登場

– 2012年9月 Blend for Visual Studio 2012
 Visual Studio 2012に同梱
 Windows ストアアプリのみ
 WPF4.5/Silverlight5は対応する正式版のBlendが無い状態
に…

ついに来ます！

 Visual Studio 2012 Update2
– Blend for VS2012に以下のサポートが追加！
 Windows Presentation Foundation 4.5
 Silverlight 5

 Visual Studioのデザイナでは出来ない機能

Visual State コントロールか
Storyboard らコントロールサンプルデータ
Manager
の作成

Visual Studioも結構やる

ContentControl 回転データテンプ
テンプレート
の入れ子変形レート

デモ

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

Visual Studioのデザイナまとめ

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

Visual Studioの本業はこっち

 コードエディタが超強力
 NuGetによるパッケージの管理
 etc…

 プログラミングを強力に支援する！！
– 最近は、ALMとかも強力ですよね。追いかけなきゃ。

Blend for VS2012の機能

 RADでのデータバインド
 データストア
 サンプルデータ
 ストーリーボード
 Visual State Manager
 ビヘイビア

RADでのデータバインド

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

ドラッグアンドドロップ

デモ

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

 Blendの場合
– BlendでDataContextの設定
– Blendでデータバインディング

Storyboard

 Storyboard
– アニメーションの集合

– Aの要素のBプロパティを何秒かけてCの値へ
– etc…

 イベントをきっかけに開始
 コードから開始
 コードで結果を計算して開始

Visual State Manager

 ストーリーボードを状態ごとに名前をつけて管理
するもの。

 コントロール内部でよく使われている
– フォーカスがあるときは
 A、B、Cのアニメーションをする
– マウスが上にあるときは
 D、E、Fのアニメーションをする

 アプリケーションを状態に応じて表示切替
– ログイン中とそうじゃないとき
– Windowsストアアプリでは画面の向きなど

Behavior

 コントロールに動作を追加
– 基本的にViewに閉じた操作にするのが良い

– ドラッグ操作に対応
– ピンチイン・ピンチアウトによる拡大縮小
– イベントに対応して何か処理を起動する
– etc…

デモ

 コントロールを作成
– Visual Stateの切り替え

 ビヘイビアー使ってみる
– タッチ操作対応
– いきすぎたサンプルプログラム
– ViewModelのメソッドを呼ぶ

データ

 サンプルデータ
– 適当なデータを表示するのに便利
 モックアップ
 デザイナで表示イメージ確認

 データソース
– データの置場を作れる
– 自作のクラスを使うこともできる

デモ

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

まとめ

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

Blendの便利機能振り返り

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to Blendの便利機能振り返り (20)

More from 一希大田 (20)