XamDataGrid - データ バインド ベーシック

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

トップ 10 投稿者 
女性
投稿 18
IG Employee
[IG] Yoshimi 投稿済み: 2010/11/25 13:36

XamDataGrid  - データ バインド ベーシック

元記事(英語) Curtis Taylor :http://forums.infragistics.com/blogs/curtis_taylor/archive/2010/11/06/xamdatagrid-101-data-binding-basics.aspx

今回は XamDataGrid コントロールのすばらしい機能をご紹介します。XamDataGrid にデータをバインドする方法とバインドされたデータがどのように表示されるのかといった質問をよく受けます。 XamDataGrid は非常に高い柔軟性を持ちます。

SQL やウェブ サービスで DataTables を使用したことがある方もいると思います。
あるいは、ObservableCollections をありとあらゆる場面で使用する WPF の熱狂的なファンかもしれません。XamDataGrid は両方とも使用することが可能です。 
もちろん、XamDataGrid は通常の Lists や Arrays を使用することも可能です。加えて、IBindingList や CollectionView もサポートされます。

さて今回は、Visual Studio 2010 と NetAdvantage 2010 を使用して WPF 3.5 プロジェクト サンプルを作成しました。このサンプルは、XamDataGrid のインスタンスを 4 つ紹介します。各インスタンスは ViewModel クラスのコレクション プロパティにバインディングされます。このサンプルを例として使用します。

Record のコレクション使用する場合に覚えておく必要のある重要なことが 2 つあります。 データ自身とデータの表現です。標準の WPF では、DataTemplate を使用して ItemsControl でデータ レコードを表示できます。  ただし、DataTemplate をコーティングするには、あらかじめデータについてよく知っておく必要があります。
XamDataGrid に DataTemplate は必要ありません。グリッドは、選択可能なヘッダーおよびレコード コレクションの各フィールドの型に基づいたエディターを含むレイアウトを動的に生成します。Field and UnboundField を宣言して、レイアウトをオーバーライドすることも可能です。

XamDataGrid にはデータをすばやく表示するための Record 管理システムがあります。API を明示的に呼び出したことはほとんどありませんが、UI をデータ モデル (明確には ViewModel) 駆動にすることがよくあります。たとえば、UI 以外でデータが変更された場合、UI で変更を知らせる必要があります。これは、UI でデータを変更した場合や基になるモデルが変更された場合に必要になります。WPF と .NET はこのような要求を満たすすべてのツールが用意されています。

これを 4 つのタイプのコレクションで実現する方法を紹介しましょう。すでに述べましたが、“SampleGridData” には、アプリケーションの View で XamDataGridの 4 つのインスタンスにバインドされた 4 つのプロパティがある ViewModel が含まれます。 この 4 つのプロパティは、ObservableCollection 型、CollectionView 型、BindingList 型 および DataTable 型から構成されています。

わたしは通常 ViewModel を  View と共に XAML で直接宣言しています。更に、メインのレイアウトの DataContext にバインドして、レイアウト内のプロパティやコマンドを参照できます。この方法を使用する利点は、Visual Studio と Expression Blend で実際に ViewModel を初期化し、データをデザイナーで表示できることです。XamDataGrid は、デザイン モードでのデータの表示されるかを表示するデータを必要とするコントロールの 1 つであるため、大変便利です。
デザイン モードに関しては、データをサービスから取得する場合、デザイン モードでチェックを使用してコードを確認するため、デザイン モードでサンプル データを表示しサービスを呼び出すことはありません。Visual Studio と Blend をデザイナーでインスタンスが作成されていることを確認するには、以下の静的メソッドを呼び出します。
DesignerProperties.GetIsInDesignMode().

このサンプルについて: XamDataGrid は、同じレイアウト コンストラクタ が 4 回繰り返されるため、自身の UserControl にリファクターされます。
この方法のマイナス面は、UserControl ビューが ViewModel のインスタンスを持たないことです。そのため、実行中のデータを見るためにデザイン モードの XAML のメイン ウィンドウへ戻る必要があります。
 
このサンプル プロジェクトは、UI の動的な更新をテストするために DispatcherTimer を利用してデータを定期的に更新します。
ここでお知らせしておきたいのは、Timer はデザイン モードで動作するため、デザイナーで作業しながらデータの更新を確認できる点です。

サンプルの最初のコレクションは、 ‘UserInfo’ オブジェクトの ObservableCollection です。‘UserInfo’ は、3 つのプロパティから構成されるシンプルはクラスで、Username、Password、および Age と通信します。 このクラスは INotifyPropertyChanged を実装します。これにより、DispatcherTimer がランタイムで Password プロパティを変更した場合に、変更を UI に通知して動的に更新されます。 ObservableCollection は INotifyCollectionChanged を実装します。つまり、項目がこの observable コレクションに追加されたり、削除されたりといったことを UI に通知するために何もする必要がありません。また、タイマーは、このコレクションにバインドされた XamDataGrid が自動的に更新されることを示すレコードを実行時にコレクションに追加します。

CollectionView と呼ばれるコレクションのラッパーとして動作するクラスがあります。WPF はデータの 明示的な ViewModel 型として ItemsControls の CollectionView を使用します。このコレクション ラッパー クラスは、現在の項目の並べ替え、フィルタリング、グループ化、履歴を保持するために使用されます。詳細については、Bea Stollnitz のブログ (英語) をご覧ください。XamDataGrid はこのクラスをサポートしているため、ぜひ利用してください。

ViewModel クラスは、CollectionView がデータのラッパーであるため ObservableCollection が CollectionView に割り当てられています。その結果、 2 つの XamDataGrids は常に同期されています。また、このサンプルでは現在の項目のトラッキングを実現しています。この機能は、XamDataGrid の ‘IsSynchronizedWithCurrentItem’プロパティを有効にする必要があります。
これにより、CollectionView.CurrentItem プロパティは 現在選択されている XamDataGrid の Record を返します。ここでは XamDataGrid を TextBlock へバインドするサンプルを示します。UserInfo クラスの ToString メソッドをオーバーライドして、レコードに Username を返します。

System.ComponentModel アセンブリは BindingList クラスを含みます。
このクラスは IBindingList を実装します。IBindingList は標準 .NET クラスで、WinForms  のユーザーには馴染みのあるクラスです。IBindingList は、項目の追加および削除の通知をサポートします。この IBindingList の通知モデルは、標準 WPF コントロール (WPF は ObservableCollection に移動しました) によってサポートされています。しかしながら、XamDataGrid はこのインターフェイスをサポートし、既存の .NET デスクトップ ソリューションと柔軟に動作します。

XamDataGrid には、ユーザーがグリッド UI 内からレコードを追加できる機能があります。 この UI は実際にレコードのインスタンスを作成し、データに追加することが可能です。ただし、この機能を使用するにはコレクションで IBindingList または IEditableCollectionView を実装する必要があります。
BindingList クラスは IBindingList を実装し、CollectionView のように BindingList が他のコレクションをラップします。このサンプルの ViewModel は、この 3 つめのグリッドのプロパティは最初の ObservableCollection をラップする BindingList です。

GridView.xaml で AllowAddNew を有効にします:

BindingList のサンプルでは、XamDataGrid 内で動作する Add Record UI を示します:

この方法では、BindingList のコレクションを ラップして新規レコードの追加する機能をサポートします。レコードがコレクションに追加された場合やプロパティがレコードで編国された場合に、コレクションの更新をサポートするには、更に他の手順を踏む必要があります。
既にタイマーでレコードをObservableCollection に追加し、Password プロパティを編集しています。
BindingList ラッパーは直接 UI と通知しないため、更新を実装しました。
これには、 2 つのイベント ハンドラー メソッドの実装が必要となります。
1 つはコレクションの CollectionChanged イベント、もう 1 つはコレクションの各レコードのための PropertyChanged イベントです。

UsersObservableCollection.CollectionChanged +=
          UsersObservableCollection_CollectionChanged;
user.PropertyChanged += UsersObservableCollection_PropertyChanged;


この両方のハンドラーは、BindingList と通信してソース コレクションへのバインドを更新します:

UsersBindingList.ResetBindings();

 


この変更、最初の 2 つの XamDataGrid インスタンスへの変更、更に 3 つ目の XamDataGrid によって操作されるタイマーによって、3 つすべてが同期されます。

最後に、XamDataGrid サンプルは最初の ObservableCollection とは同期しません。実はこのデータ構造は私の UserInfo クラスをまったく使用しません。
DataTable は、ブロックをタブ形式の行および列としてデータとして扱うオブジェクトです。これにより、各列に定義されたプロパティを実行するテーブルの型になります。通常、DataTables はデータベースまたは XML から自動的に生成されます。このサンプルでは、ObservableCollection に一致するよう ViewModel がコードで最初から生成されます。今回はこのテーブルを他のテーブルと同期させることにはあまりこだわりませんでした。

DataTables を使用するときの注意点として、UserInfo オブジェクトのObservableCollection など、オブジェクト コレクションがないことです。
UI グリッドのデータ表現があり、列を定義するように簡単に 各 XamDataGrid へマップできます。

XamDataGrid を DataTable に割り当てるには、DataTable で DefaultView プロパティを使用する必要があります。DefaultView は DataView 型です。このオブジェクトは、データのラッパーで IBindingList を実装します。つまり、XamDataGrid で Add New レコード機能を使用して、ユーザーがビューでデータを変更したときに更新できます。

DataTable は .NET のパワフルな機能で、XamDataGrid へアクセスするとても便利な機能です。
ただし、データに影響するロジックを実装する ViewModel で最適なクラスがないため、UI でレコードのフィールドへ直接アクセスしてコードビハインドでロジックを使用します。 
わたしは、コードビハインドよりも ViewModel でロジックを使用することをいつもお勧めしています。そのほうがユニット テストでコードを細かくテストできるのと、UI をデータ駆動型に保てるからです。
DataTables には他にもさまざまな使い方があります。ただし、データ駆動型モデルに従うのがベスト プラクティスだと思っています。
これからもインフラジスティックスの「Killer (キラー: ここでは「ものすごく魅力的な」の意味) Control (コントロール)」に関して役に立つ情報をみなさんと共有していきたいと思います。

弊社の製品で「キラー アプリ」の構築にぜひ取り組んでみてください!ではまた次回をお楽しみに!

ソースコードのダウンロードはこちらから...

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