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