Expression Blend 4 で デザインする Silverlight 4 アプリケーション セッション ID: T6-304 Expression Blend 4 で デザインする Silverlight 4 アプリケーション マイクロソフト株式会社 デベロッパー & プラットフォーム統括本部 エバンジェリスト/Windows Phone 7 Champ 高橋 忍 @shinoblogavi

セッションの目的とゴール Session Objectives and Takeaways Expression Blend 4 を使って Silverlight 4 の アプリケーション ユーザー インターフェースを どのようにデザインするのかをお伝えする デザイン手法を通じて、Silverlight 4 アプリケーションを どのように開発するのか、また デザインの為の開発者の役割について理解していただく セッションのゴール Silverlight 4 アプリケーションの UI 構成要素を理解する Silverlight 4 アプリケーションの開発方法を理解する Silverlight 4アプリケーション開発の体制を理解する

アジェンダ Expression Blend 4 でデザインする Silverlight 4 アプリケーション 開発方法の変化 UI 構成要素 データの取り扱い デザインの為の開発 開発プロジェクト まとめ

Silverlight 4 アプリケーション 開発方法の変化

VB/WinForm での開発との違い VB 開発者は何を変えないといけないのか [デザイン] XAML による UI の実装 XAML ＝定義による UI の実装 UI の基本設計は同じ 動的処理に関する準備、考え方の違い [設計] 構成要素における実装モデルの違い コントロールの拡張性 レイアウトのためのコントロール インタラクションの実装 [実装] Silverlight は元々 Web テクノロジ 非同期処理 リソース アクセスへの制限

Silverlight アプリケーション開発環境 Silverlight 4 アプリケーション開発するには Expression Blend 4 「Visual Studio で編集」コマンド Visual Studio 2010 Team Foundation Server (TFS) のサポート

Silverlight アプリケーションの開発 Silverlight アプリケーション開発プロジェクト データ構造・アプリケーション構成の検討・設計 UI イメージ・画面設計 データ ソース コンバーター等 アプリケーション開発 ビジネス ロジック開発 デザイン レイアウト インタラクション データ連携 結合テスト・検証 作業見積もり・開発環境整備 Development Design

Silverlight 4 アプリケーション UI 構成要素

Silverlight アプリケーションの UI Silverlight の UI を構成する要素と技術 コントロールのデザイン テンプレート化 ビジュアル ステート マネージャー コントロールの機能拡張 オブジェクト バインディング ビヘイビアー レイアウト要素 ナビゲーション

コントロール 重要なのは数に非ず 必要十分なコントロール 60 種類以上 重要なのは数ではなくそのカスタマイズ性 デザイン要素の拡張 機能の拡張 2 つの拡張要素をテンプレート化 プリミティブ からコントロールの作成も可能 基本コントロール + テンプレート (デザイン定義 + 機能定義)

コントロールの拡張/デザイン コントロールをどのように拡張するか Photoshop や Illustrator からレイヤ構造を維持しながら直接読込が可能。(添付) デザイン要素 プリミティブ ブラシ 状態の変化に対する表現 アニメーション/ストーリー ボード イージング アニメーションの変化曲線 各要素の管理 ビジュアルステートマネージャー リソース ディクショナリ 数十種類の イージングにより アニメーションが より効果的に!

コントロールの拡張/テンプレート コントロールをどのように拡張するか 色やサイズなど標準のプロパティを変更 スタイル テンプレート 複数の変更をまとめて管理 コントロールのビジュアルを完全に変える コントロール テンプレート スタイルも含めて管理 複数の状態のスタイルを定義 ビジュアル ステート マネージャー T7-404 で、より詳しく

ビジュアル ステート マネージャー 複数の状態のデザインをまとめて定義 ボタンの場合 通常のステート Normal MouseOver Pressed Disabled フォーカス ステート Unfocused Focused

コントロールの拡張/機能 コントロールをどのように拡張するか 要素の紐づけ オブジェクト バインディング コントロールからのイベント ビヘイビアー イベント ハンドリング ビヘイビアーで コードレスのイベント 処理方法を実現

オブジェクト バインディング もっとも簡単な動的な表示処理 オブジェクトのプロパティを紐付ける データの変更に合わせて反映 一方向/双方向 バインディング エンジン 値コンバーター Object (Control) 依存関係プロパティ バインディング ターゲット バインディング ソース

ビヘイビアー コード不要のインタラクション定義 コードなしでインタラクションを定義 オブジェクトをドラッグ & ドロップするだけ 組み込みビヘイビアー ビヘイビアー アクション 条件付きビヘイビアー 独自のビヘイビアーの 定義も可能(SDK 参照)

カスタムビヘイビアー 独自のビヘイビアーの実装 クラスライブラリで実装 Behavior<T>クラス ターゲットオブジェクト イベント 振る舞い 読み込んで再利用可能 Microsoft Expression Community Gallery でも公開 http://gallery.expression.microsoft.com/en-us/

レイアウト要素 グループ化でもありフォームでもある Silverlight エレメントの基本 エレメントは階層で定義される が、基本的に子要素は持てない パネルコントロール 複数のエレメントを子要素として保持 論理的なグループ化としての利用 例えば処理単位毎にグループ化 子要素の (画面上での) 配置を管理 レイアウトを一元管理 配置方法が異なるパネル

ナビゲーション 画面遷移を管理する Silverlight 4 のナビゲーション機能 アプリケーション ナビゲーション Frame コントロール Page コントロール Web ブラウザーに統合されたナビゲーション 外部ナビゲーション Hyperlink

Silverlight 4 アプリケーション データの取り扱い

データ ソース 実質はオブジェクト データ ソースしかない Silverlight で扱うことのできるデータ XML データ ソース ライブ XML データ ソースは NG LINQ to XML/XmlReader オブジェクト データ ソース サンプル データ ソース 典型的なサンプルデータで UI の実装をフォロー

XMLデータの読み込み DownloadStringAsync で非同期の読込み WebClient client = new WebClient(); Client.DownloadComplete += new DownloadStringCompletedEventHandler( client_DownloadCompleted); Uri xmlUri = new Uri(“Dat.xml”, UriKind.Relative); Client.DownloadStringAsync(xmlUri); Void client_DownloadComplete(object sender, …) { // 終了後処理 }

データ バインディング モデル Silverlight のデータ バインディング モデル データの表示はデータの管理とは分離 接続を確立後、UI とデータ オブジェクト間をデータが移動できる ソースとコントロールの連携を定義 バインディング エンジン 値コンバーター Object プロパティ FrameworkElement 依存関係プロパティ テンプレート ビヘイビアー バインディング ターゲット バインディング ソース

バインディング ターゲット バインディング ターゲットの違いによる影響 上位のDataContext とバインディングすることで、下位のオブジェクトがバインドしたデータソースの子要素とバインド可能 Text={Binding Path=FirstName} データソースをまとめて管理 TextBlock Text {Binding} Grid DataContext {Binding Source} Data DataValue データ ソース ビジュアル ツリー

Silverlight 4 アプリケーション デザインのための開発

開発者は何をするべきか Expression Blend を使ってデザインする 人のために開発者は何を用意するべきか? UI デザインのためのオブジェクトの準備 オブジェクト データ ソース コンバーター カスタム ビヘイビアー

オブジェクト データ ソース Silverlight アプリケーションのための オブジェクト データ ソース INotifyPropertyChanged を継承 public class MyData : INotifyPropertyChanged { private name _name; public event PropertyChangedEventHandler PropertyChanged; public string Name { get{ return _name }; set{ … }}; } , ErrorMessage = "Bad!"

バリデーション バインド時に入力項目のチェック Two Way で Binding [Required()] Publiv string MyName {・・・} [StringLength(25, MinimumLength=5)] [Range(0,100)] Publiv int UnitStock

カスタムバリデーション 独自のバリデーションロジックを組み込み Public class User { [CustomValidation(typeof(validmethod),”valid”)] Publiv string MyName{ get; set; } } public class validmethod public static ValidationResult valid( string MyName, ValidationContext context) //独自のバリデーションロジック

コンバーター IValueConverter を継承 Convert, ConvertBack の実装 Public class DataConverter : IValueConverter { public object Convert(object value, … ) DateTime date = (DateTime)value; return( date.ToShortDateString()); } public object ConvertBack(object value, …) string s = (string)value; return( DateTime.Parse(s));

カスタム ビヘイビアー Behavior<> クラスを継承 public class SB : Behavior<FrameworkElement> { 　　protected override void OnAttached(){ base.OnAttached(); this.AssociatedObject.MouseLeftButtonDown += 　　} 　　protected override void OnDetaching() { 　　　　base.OnDetaching(); 　　 　　　　this.AssociatedObject.MouseLeftButtonDown -= 　　void　AssociatedObject_MouseLeftButtonDown(…) 　　{ 　　　　MessageBox.Show("left button down");

Silverlight 4 アプリケーション 開発プロジェクト

Silverlight アプリケーション プロジェクト 用意された標準アプリケーション テンプレート Expression Blend 4 Silverlight アプリケーション Silverlight SketchFlow アプリケーション Silverlight データ バインド アプリケーション Silverlight コントロールライブラリ Visual Studio 2010 Silverlight Business Application Silverlight ナビゲーションアプリケーション

Silverlight アプリケーション プロジェクト SketchFlow アプリケーション ドラフトデザインをツールで容易に作成 画面を線でつなぐだけで、画面遷移を定義 紙プロトタイピングのような専用コントロール 注釈やコメントをつけられるビューアー Word 文書に出力して、マニュアルや要件定義書に

Silverlight アプリケーション プロジェクト Silverlight データ バインド アプリケーション MVVMモデルをベースとしたテンプレート データとコマンドのバインドを実現 XAMLによるエンティティのインスタンス MainView MainViewModelSample MainViewModel MianView Button TextBlock Bind Data Behavior XAML

Silverlight アプリケーション プロジェクト Visual Studio のプロジェクト オプション WCF RIA サービスの有効化 ブラウザ外実行の設定 ブラウザ外実行時の設定ダイアログ

まとめ

Silverlight アプリケーションの開発 Silverlight アプリケーション開発プロジェクト オブジェクト データ ソース・テンプレート UI イメージ・画面設計 (SketchFlow) コンバーター ビヘイビアー アプリケーション開発 ビジネス ロジック開発 デザイン 　スタイル 　テンプレート インタラクション 　アニメーション 　ステートマネージャー レイアウト 　パネル データバインド 結合テスト・検証 作業見積もり・開発環境整備 Development Design

Silverlight アプリケーション開発 Expression Blend でデザインために Silverlight アプリは Blend でデザイン デザインを細分化 デザイン：スタイル・テンプレート インタラクション：アニメーション・ 　ビジュアル ステート マネージャー レイアウト バインド デザインの為のコンポーネント開発が重要 プロジェクトの初めから UI 設計を!

詳しくは、9月2日に”MSDNオンライン”上に公開される 【予告】9月2日よりスタート！ 『Windows 7 アプリ投稿キャンペーン』 Windows 7 の最新機能を 実装したアプリケーションを大募集！！ 投稿いただいたアプリケーションはマイクロソフトサイトでご紹介 抽選で素敵な 『開発快適グッズ』 もプレゼント!! 詳しくは、9月2日に”MSDNオンライン”上に公開される キャンペーンページをチェック！

関連セッション T6-303：Silverlight 4 のブラウザー外実行 徹底解説 第 2 弾 T6-401：WCF RIA Services を使った Silverlight 4 アプリケーション開発 ～ 迅速性と効率性の追求 ～ T7-302：Windows Presentation Foundation 4 ～ ビジュアル ステートを使ったカスタム コントロールの作り方 ～ T7-403：最新 OS WES 7 / WEC 7 / .NET Micro Framework に よるクラウド時代のデバイス UX 開発 Special Session

リファレンス Silverlight デベロッパー センター http://msdn.microsoft.com/ja-jp/silverlight/default.aspx Silverlight ブラウザー外実行のサポート http://gallery.expression.microsoft.com/en-us/ Microsoft Expression Blend 4 http://www.microsoft.com/japan/products/expression/products/blend_overview.aspx Official Microsoft Silverlight Site http://www.silverlight.net/ Microsoft Web Platform http://www.microsoft.com/web

ご清聴ありがとうございました。 T6-304 アンケートにご協力ください。

© 2010 Microsoft Corporation. All rights reserved © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.