Transcript ビジュアル ステート マネージャー

Expression Blend 4 で
デザインする Silverlight 4
アプリケーション
セッションの目的とゴール
Session Objectives and Takeaways
セッションの目的
Silverlight 4 の
を
をお伝えする
デザイン手法を通じて、Silverlight 4 アプリケーションを
また
していただく
セッションのゴール
Silverlight 4 アプリケーションの
Silverlight 4 アプリケーションの
Silverlight 4アプリケーション
3
を理解する
を理解する
を理解する
アジェンダ
開発方法の変化
開発プロジェクト
まとめ
4
Silverlight 4 アプリケーション
開発方法の変化
VB/WinForm での開発との違い
VB 開発者は何を変えないといけないのか
XAML による UI の実装
による UI の実装
UI の基本設計は同じ
動的処理に関する準備、考え方の違い
構成要素における実装モデルの違い
コントロールの
のためのコントロール
の実装
Silverlight は元々
処理
リソース アクセスへの制限
6
Silverlight アプリケーション開発環境
Silverlight 4 アプリケーション開発するには
Expression Blend 4
「Visual Studio で編集」コマンド
Visual Studio 2010
Team Foundation Server (TFS) のサポート
7
7
Silverlight アプリケーションの開発
Silverlight アプリケーション開発プロジェクト
8
Silverlight 4 アプリケーション
UI 構成要素
Silverlight アプリケーションの UI
Silverlight の UI を構成する要素と技術
コントロールのデザイン
テンプレート化
ビジュアル ステート マネージャー
コントロールの機能拡張
オブジェクト バインディング
ビヘイビアー
レイアウト要素
ナビゲーション
10
コントロール
重要なのは数に非ず
必要十分なコントロール 60 種類以上
重要なのは数ではなくそのカスタマイズ性
デザイン要素の拡張
機能の拡張
2 つの拡張要素をテンプレート化
基本コントロール
+ テンプレート (デザイン定義 + 機能定義)
11
コントロールの拡張/デザイン
コントロールをどのように拡張するか
デザイン要素
状態の変化に対する表現
アニメーションの変化曲線
各要素の管理
12
コントロールの拡張/テンプレート
コントロールをどのように拡張するか
色やサイズなど標準のプロパティを変更
スタイル テンプレート
複数の変更をまとめて管理
コントロールのビジュアルを完全に変える
コントロール テンプレート
スタイルも含めて管理
複数の状態のスタイルを定義
ビジュアル ステート マネージャー
13
ビジュアル ステート マネージャー
複数の状態のデザインをまとめて定義
ボタンの場合
通常のステート
フォーカス ステート
14
コントロールの拡張/機能
コントロールをどのように拡張するか
要素の紐づけ
コントロールからのイベント
イベント ハンドリング
15
オブジェクト バインディング
もっとも簡単な動的な表示処理
オブジェクトのプロパティを紐付ける
データの変更に合わせて反映
一方向/双方向
16
ビヘイビアー
コード不要のインタラクション定義
コードなしでインタラクションを定義
オブジェクトをドラッグ & ドロップするだけ
組み込みビヘイビアー
ビヘイビアー
アクション
条件付きビヘイビアー
独自のビヘイビアーの
定義も可能(SDK 参照)
17
カスタムビヘイビアー
独自のビヘイビアーの実装
クラスライブラリで実装
Behavior<T>クラス
ターゲットオブジェクト
イベント
振る舞い
読み込んで再利用可能
Microsoft Expression
Community Gallery
でも公開
http://gallery.expression.microsoft.com/en-us/
18
レイアウト要素
グループ化でもありフォームでもある
Silverlight エレメントの基本
エレメントは階層で定義される
が、基本的に子要素は持てない
パネルコントロール
複数のエレメントを子要素として保持
の利用
例えば処理単位毎にグループ化
子要素の
レイアウトを一元管理
配置方法が異なるパネル
19
を管理
ナビゲーション
画面遷移を管理する
Silverlight 4 のナビゲーション機能
アプリケーション ナビゲーション
Frame コントロール
Page コントロール
Web ブラウザーに統合されたナビゲーション
外部ナビゲーション
Hyperlink
20
Silverlight 4 アプリケーション
データの取り扱い
データ ソース
実質はオブジェクト データ ソースしかない
Silverlight で扱うことのできるデータ
XML データ ソース
ライブ XML データ ソースは NG
LINQ to XML/XmlReader
サンプル データ ソース
典型的なサンプルデータで
UI の実装をフォロー
22
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, …)
{
// 終了後処理
}
23
データ バインディング モデル
Silverlight のデータ バインディング モデル
データの表示はデータの管理とは分離
接続を確立後、UI とデータ オブジェクト
間をデータが移動できる
ソースとコントロールの
を
24
バインディング ターゲット
バインディング ターゲットの違いによる影響
上位のDataContext とバインディングする
ことで、下位のオブジェクトがバインドした
データソースの子要素とバインド可能
Text={Binding Path=FirstName}
データソースをまとめて管理
DataContext
{Binding Source}
Data
DataValue
Text
{Binding}
25
Text
{Binding}
Silverlight 4 アプリケーション
デザインのための開発
開発者は何をするべきか
Expression Blend を使ってデザインする
人のために開発者は何を用意するべきか?
UI デザインのためのオブジェクトの準備
オブジェクト データ ソース
コンバーター
カスタム ビヘイビアー
27
オブジェクト データ ソース
Silverlight アプリケーションのための
オブジェクト データ ソース
INotifyPropertyChanged を継承
public class MyData, ErrorMessage
:
= "Bad!"
{
private name _name;
public event PropertyChangedEventHandler
PropertyChanged;
public string Name {
get{ return _name };
set{ … }};
}
28
バリデーション
バインド時に入力項目のチェック
Two Way で Binding
[Required()]
Publiv string MyName
{・・・}
[StringLength(25, MinimumLength=5)]
Publiv string MyName
{・・・}
[Range(0,100)]
Publiv int UnitStock
{・・・}
29
カスタムバリデーション
独自のバリデーションロジックを組み込み
Public class User
{
[CustomValidation(typeof(validmethod),”valid”)]
Publiv string MyName{ get; set; }
}
public class validmethod
{
public static ValidationResult valid(
string MyName, ValidationContext context)
{
//独自のバリデーションロジック
}
}
30
コンバーター
IValueConverter を継承
Convert, ConvertBack の実装
Public class DataConverter : IValueConverter
{
public object
(object value, … )
{
DateTime date = (DateTime)value;
return( date.ToShortDateString());
}
public object
(object value, …)
{
string s = (string)value;
return( DateTime.Parse(s));
}
31
カスタム ビヘイビアー
Behavior<> クラスを継承
public class SB : Behavior<FrameworkElement> {
protected override void
(){
base.OnAttached();
this.AssociatedObject.MouseLeftButtonDown +=
}
protected override void
() {
base.OnDetaching();
this.AssociatedObject.MouseLeftButtonDown -=
}
void AssociatedObject_MouseLeftButtonDown(…)
{
MessageBox.Show("left button down");
}
32
Silverlight 4 アプリケーション
開発プロジェクト
Silverlight アプリケーション プロジェクト
用意された標準アプリケーション テンプレート
Expression Blend 4
Silverlight アプリケーション
Silverlight コントロールライブラリ
Visual Studio 2010
34
Silverlight アプリケーション プロジェクト
SketchFlow アプリケーション
ドラフトデザインをツールで容易に作成
画面を線でつなぐだけで、画面遷移を定義
紙プロトタイピングのような専用コントロール
注釈やコメントをつけられるビューアー
Word 文書に出力して、マニュアルや要件定義書に
35 35
Silverlight アプリケーション プロジェクト
Silverlight データ バインド アプリケーション
MVVMモデルをベースとしたテンプレート
データとコマンドのバインドを実現
XAMLによるエンティティのインスタンス
36
Silverlight アプリケーション プロジェクト
Visual Studio のプロジェクト オプション
WCF RIA サービスの有効化
ブラウザ外実行の設定
ブラウザ外実行時の設定ダイアログ
37
まとめ
Silverlight アプリケーションの開発
Silverlight アプリケーション開発プロジェクト
39
Silverlight アプリケーション開発
Expression Blend でデザインために
Silverlight アプリは Blend でデザイン
デザインを細分化
：スタイル・テンプレート
：アニメーション・
ビジュアル ステート マネージャー
が重要
40
関連セッション
42
リファレンス
http://msdn.microsoft.com/ja-jp/silverlight/default.aspx
http://gallery.expression.microsoft.com/en-us/
http://www.microsoft.com/japan/products/expression/products/blend_overview.aspx
http://www.silverlight.net/
http://www.microsoft.com/web
43
ご清聴ありがとうございました。
アンケートにご協力ください。
© 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.