Blend for Visual Studio 2013 の新機能Blend for VS2013 の Windows ストア アプリ開発の機能を見てみよう

Microsoft MVP for Client App Dev 2011/07-2014/06大田　一希

自己紹介

▪ 大田 一希▪ Microsoft MVP for Client App Dev 2011/06-2014/07

▪ Twitter: @okazuki

▪ Blog: かずきの Blog@hatenahttp://okazuki.hatenablog.com/

▪本書いてます▪ Windows 8 ストア アプリ開発入門▪ Windows ストア アプリ開発のレシピ 110

▪トピックス▪ 最近改宗して iPhone 5 買いました

注意

▪ Blend for Visual Studio 2013 RC 時点の情報です。正式版では異なる可能性があります。

▪ Blend for Visual Studio 2013 は長いので、 Blend for VS2013 と略してます

▪ 文中で特に断りなく” Blend for VS2013 の機能”のように書いてある場合は原則として Windows ストア アプリ開発のための 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 ストア アプリは Express Edition あり )

▪ つまり開発者のためのツールなんですか…？（疑問）

とはいいつつ

▪ 最高の XAML の画面デザインツール▪使い勝手のいい画面デザイナ ( 主観 )

▪サンプルデータ (New!!)

▪ドラッグでデータバインドの作成▪ Behavior (New!!)

▪ストーリーボード▪ Visual State Manager

▪デザイン時 DataContext の作成 (New!!)

Blend for Visual Studio 2013 とは まとめ

▪ Visual Studio と同じソリューションファイルを対象に作業ができる

▪ XAML で画面デザインする上で最高のツール

▪ 2013 で待望の新機能が諸々追加されてる▪ WPF や Silverlight や Windows Phone では既にあった機能がほとん

どですが…

Blend for Visual Studio 2013 新機能

新機能

▪ デザイン時 DataContext の設定▪デザイナ用の DataContext を GUI で設定できる機能

▪ サンプルデータ▪デザイナに表示するためのダミーデータ作成機能

▪ Behavior▪ UI ロジックを部品化して再利用する機能

デザイン時 DataContext の設定

▪ 今まで▪以下を手書き

{d:DataContext DesignType= hoge:HogeHogeViewModel, IsDesignTimeCreate=True}

▪ Blend for VS2013▪ GUI

サンプルデータ

▪ 今まで▪ SampleDataSource クラスに

あるようにコード直書き

▪ Blend for VS2013▪ GUI▪ クラスをベースにサンプルデータを

組み立てる▪ Blend を使ってサンプルデータを

組み立てる

Behavior

▪ XAML 系プラットフォームで唯一 Windows ストア アプリになかった機能

▪ Blend for VS2013 で復活！！！

Windows ストア アプリのBehavior

Behavior とは

▪ UI ロジックを部品化したもの（ロジックを再利用できる・・・！）▪ UI ロジック「○○したら ×× する」

▪ 例▪ボタンをクリックしたら MainPage.xaml に遷移する▪プロパティの値が変わったら Storyboard1 を再生する

▪ Blend でドラッグアンドドロップで使用できる

使い勝手は他のプラットフォームの Behavior と”似てる”

▪ コントロールにドラッグアンドドロップして使用する

▪ 操作の起点となる TriggerBehavior▪他のプラットフォームでは単に Trigger

▪ 操作を表す Action

▪ デザイナ上の表示が少し異なる

例：ボタンに GoToStateAction をドロップした場合

WPF

▪ Button

▪ GoToAtateAction

Windows ストア アプリ

▪ Button

▪ EventTriggerBehavior▪ GoToStateAction

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>

機能面でもちょっと少ない

▪ 条件式が無い▪ WPF などの他のプラットフォームでは”○○したら ×× する”の ××

をするときの条件を記載できる。▪ 例：プロパティ A の値が” abc” だったら実行する

▪ Behavior 自体の数がちょっと少ない

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

ちょっと少ない※赤色が相手に無いもの

基本機能はそろってる

▪ ViewModel の▪メソッドを呼ぶ▪コマンドを実行する▪プロパティを変える

▪ 画面の▪ VisualState を変える▪プロパティを変える▪ストーリーボードを操作する

サンプルデータと Behavior のデモ

▪ サンプルデータの作成

▪ ビヘイビアで画面遷移

Windows ストア アプリのBehaviorBehavior を作る人向け

クラス構造

▪ 今まで▪ IAttachedObject▪ Behavior<T> : Freezable, IAttachedObject▪ TriggerBase<T> : Freezable, IAttachedObject▪ EventTrigger

▪ ActionBase<T> : Freezable, IAttachedObject▪ GoToStateAction

▪ ストア アプリ▪ IBehavior▪ EventTriggerBehavior : DependencyObject, IBehavior

▪ IAction▪ GoToStateAction : DependencyObject, IBehavior

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; }}

ビヘイビア実装のサンプル

▪ 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 の編集で編集可能（ Visual Sutdio ではポップアッ

プの編集 )

CommandBar

▪ 一般的な AppBar▪ PrimaryCommands▪ 右側に表示する AppBarButton を置く

▪ SecondaryCommands▪ 左側に表示する AppBarButton を置く

▪ AppBarButton の数と Window サイズに応じて適切に AppBarButtonのサイズ調整などをしてくれる。

Hub コントロール

▪ いかにも Windows ストア アプリ！といった見た目を簡単に作れるコントロール▪ HubSection の追加▪ハブセクションの編集

まとめ

Blend for VS2013

▪ 最高の XAML の画面デザインツール▪使い勝手のいい画面デザイナ ( 主観 )

▪サンプルデータ ▪ドラッグでデータバインドの作成▪ビヘイビア ▪ストーリーボード▪ Visual State Manager

▪デザイン時 DataContext の作成

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