NetAdvantage Silverlight および NetAdvantage WPF - 入門編

0 ユーザーが評価
この投稿には確認済みの回答があります。 0 返信 | 1 サポーター

トップ 10 投稿者 
女性
投稿 18
IG Employee
[IG] Yoshimi 投稿済み: 2011/1/21 16:11

NetAdvantage Silverlight および NetAdvantage WPF - 入門編

元記事 (英語) : Curtis Taylor http://community.infragistics.com/blogs/curtis_taylor/archive/2010/06/09/getting-started-with-netadvantage-silverlight-and-wpf-adding-sample-data.aspx

 

この記事では、WPF および Silverlight プロジェクトのサンプル データを作成する方法を紹介します。インフラジスティックス NetAdvantage Silverlight または WPF を使用し、さまざまなサンプル データを用いたプロジェクトを作成します。今回はサンプル データをすばやく準備するために、Expression Blend 4 を使用してモック データを作成します。Silverlight を使用する場合も、この記事と同じ手順で Silverlight アプリケーションを作成できます。この記事では、Silverlight と WPF の違いも合わせてご紹介します。

Expression Blend は開発者の Photoshop?

 

以前、Photoshop や InDesign のプラグインを開発したことがありました。その機能はベーシックなものから高度ものまで機能はさまざまです。初心者にも簡単に色々な機能が使えるアプリケーションであると同時に、深い知識が必要な高度な機能も多数あります。Blend も同様、要素にグラデーションを適用するなど簡単に高度なエフェクトを設定できます。レイアウトからテンプレート編集、完璧なピクセル変換、アニメーション推移、アイコンの作成、コントロールの作成とカスタマイズ、バインド式の作成など、開発のすべての過程において Blend を使用しています。また、Blend は最高のリファクタリング ツールだといえるでしょう。Blend は UserControls から Resources まで、XAML 生成やファクタリングをすばやく行うことができるのです。Visual Studio はどうでしょうか。特に最新版 Visual Studio 2010 は機能が充実しています。製品の管理やコードの作成はすべて Visual Studio で行っています。XAML は両方のツールに保存してあり、両方のタスクで使用できるようにしています。入力作業には Visual Studio を使用します。XAML の生成には Blend を使用します。もちろん 2010 では XAML を生成できますが、以前のバージョンではできませんでした。

Blend の試用版はマイクロソフト サイトからダウンロードできます。

データの作成から始めます。データは通常 MVVM パターンに従って、ViewModel がデータに基づいて作成されました。
Blend には Data タブがあります。このパネルにはデータを作成するためのエディターがあり、デザインタイムのみに有効にできます。つまり、既存のデータ ソースにフックできます。最初のポップアップ メニューをクリックしてサンプル データを作成します。

   

Blend には Collection という ObservableCollection から継承されたクラスを含む SampleDataSource という名前のクラスがあります。このクラスは項目リストとジェネリック プロパティを含みます。データ ツリーで項目をクリックしてクラス名とプロパティ名を変更します。プロパティの右の矢印をクリックしてデータ型を変更します。プロパティを追加する Plus アイコンをクリックします。

 

プラス  (+) アイコンの隣の下矢印をクリックして Collection 項目を追加します。このメニューは次のタイプを含みます。プロパティを追加できる新しいクラスである Complex プロパティ、コレクション項目 (階層データに最適な組み込みコレクション) の 2 つです。クラスを Hierarchical Collection へ変換することもできます。これは各項目に同じ方のコレクションを追加します。つまり、ツリー パターンを作成します。

サンプルでは、Collection を TeamCollection という名前にします。Name という名の文字列プロパティおよび Current という名の Boolean、ID という名の Number があります。Collection 項目を Team Collection に追加します。これをプレイヤーと名付けて、名前、電話番号、住所、メールアドレスなどにプロパティを追加します。型を String に変更すると、Format にメールアドレス、ウェブサイト、その他多くのオプションの項目が含まれます。Number を選択すると数値の型を定義できます。画像を指定してサンプル画像をプロジェクトに追加できます。または、サンプル データを画像のディレクトリに指定できます。Blend は、作成したすべてのオブジェクトとプロパティにサンプル データを生成します。このデータは、デザインタイムのみの描画、マニュアル テスト、ユニット テスト、または実データのベースとして使用することができます。データを所有する場合、クラスを独自の名前空間へ理ファクタリングして Blend から切り離すことをお勧めします。Blend はデータを指定フォルダー、そして名前空間 (xpression.Blend.SampleData.SampleDataSource) へ配置します。

サンプル データ値を編集できます。コレクションの隣のデータ ボタンをクリックするとサンプル値の編集ダイアログが開きます。データを編集でき、自動生成するレコードの数を変更できます。生成された XAML ファイルを開いてデータを直接変更することも可能です。

NetAdvantage のデータ バインディング

ライブ データを表示する簡単な方法として、Infragistics Grid へのバインディングがあります。WPF の場合は XamDataGrid を追加します。Silverlight の場合は XamWebGrid です。

これには、NetAdvantage 製品で参照をすべての DLL または特定の DLL へ追加します。どの DLL を追加するか分からない場合はすべて追加しても構いません。

 

DLL を追加すると、アセット パネルに XamDataGrid が表示されます。

アセットの XamDataGrid をダブルクリック、またはデザイン領域へドラッグします。

Blend で Layout プロパティが設定されます。すべてのプロパティをデフォルトにリセットします。Width と Height、HorizontalAlignment と VerticalAlignment を Stretch に設定し、すべての Margin を 0 に設定します。

最後に DataSource を設定します。XamWebGrid を使用している場合、ItemsSource プロパティを配置します。

Advanced Options ボタンをクリックして、データ バインディングする項目を選択します。

データ バインディングの作成ダイアログが開きます。このダイアログでは、SampleDataSource の TeamCollection プロパティを選択します。Blend を使用してデータを追加したため、Data Field セクションに配置されます。ViewModel を XAML のDataContext にフックしたい場合、Data Context タブで設定できます。Element Property タブでは、XAML ビューの他の要素へバインドできます。

ダイアログを閉じてプロジェクトを実行します。グリッドでデータが表示されます。階層チェックボックスを展開すると、データを階層表示できます。

無事サンプル データが生成できました。サンプル データはプロトタイプを作成するために大変便利です。サンプルですばやくデータを生成でき、ViewModels にデータを提供します。SketchFlow にもプロトタイプを作成するための同じ機能がありますが、
SketchFlow についてはまた他の記事でご紹介します。

-->

ページ 1 / 1 (1 項目) | RSS
Infragistics Japan
インフラジスティックス ジャパン