xamWebGirdにデータをバインド
xamWebGridにデータをバインドして表示させるためには、ItemsSourceプロパティに対してデータエンティティの配列やリストを設定します。DBから取得したデータをバインドするシナリオとして標準的なのは、SilverlightアプリケーションをホストするWebアプリケーションの中で、Silverlightにデータを提供するWebサービスを定義するといった方法でしょう。その中でも一番手っ取り早い方法としては、ADO.NET DataServiceを利用したデータ提供サービスの自動生成です。例えばADO.NET DataServicesを併用した場合、以下のようなコードでグリッドへのデータ表示を実現できます。
/// <summary>
/// ADO.NET DataServices からデータを取得
/// </summary>
public void RetrieveData()
{
Uri serviceUri = new Uri("./WebDataService1.svc", UriKind.Relative);
NorthwindJPEntities ctx = new NorthwindJPEntities(serviceUri);
//得意先を取得するLINQ構文
var q = from customer in ctx.得意先 select customer;
DataServiceQuery<得意先> dsq = q as DataServiceQuery<得意先>;
//Silverlightではデータの取得は非同期で行われる
dsq.BeginExecute((result) =>
{
//サービスからの応答に対する処理
var returned = dsq.EndExecute(result);
var customers = returned.ToList();
Dispatcher.BeginInvoke(() =>
{
this.SetData(customers);
});
}, null);
}
public void SetData(IEnumerable<得意先> customers)
{
//xamWebGrid.ItemsSourceにデータを設定
this.grid.ItemsSource = customers;
}
xamWebGridコントロールの特徴
ここまでxamWebGridの配置と基本的なデータの設定方法を紹介しましたが、読者の多くはxamWebGridを使うメリットに興味を持っていると思いますので、ここでxamWebGridの主な特徴をリストアップします。
階層構造のデータ表現
xamWebGridでは、データの親子関係を自動的に階層化表示する機能を持っています。さきほどのデータバインドの例では単純に1階層のデータ（得意先データ）のみの表示を行いましたが、例えば、ADO.NET DataServicesへの呼び出し部分を次のように変更すると、自動的に3階層のデータ構造をバインドすることもできます。
//得意先・受注・受注明細を取得するLINQ構文
var q = from customer in ctx.得意先.Expand("受注").Expand("受注/受注明細")
select customer;
各階層における列のスタイルや表示設定は、ColumnLayoutオブジェクトを通して柔軟に変更できます。また自己参照形式のデータ構造の表示も行えます。
列の固定、移動、幅調整などの操作性
エンドユーザーによっては列の表示順や固定表示に関するカスタマイズにこだわりがあることも少なくありません。xamWebGridではこのあたりの操作性に対する機能が多く用意されています。例えば列固定機能の場合、グリッドの左右両端に対して自由に列を指定して固定することができます。また、その際の操作方法としても、「ピン」をたてて設定を行ったり、または列ヘッダーを直接「ドラッグ＆ドロップ」することで設定が可能になっています。
グルーピングと行フィルター
グリッド上で簡単な集計を行ったり、データのフィルタリングを行ったりといった機能もエンドユーザーの満足度を高める上では欠かせない要素です。xamWebGridではプロパティひとつでグループ化やフィルター機能を追加でき、特にExpression Blendを使うとプロパティウインドウ上の操作だけで設定ができますので簡単です。例えば図6のようにグループ化機能を有効にする場合、プロパティ一覧から「GroupBySettings」の項目を探し、「新規作成」を選択します。次に、列をドラッグ＆ドロップするエリアを表示するためのプロパティ「AllowGroupByArea」の位置を設定します（図7）。
Visual Studioを使って設定するときは、以下のXAMLコードをxamWebGridタグに追加します。
<igGrid:XamWebGrid x:Name="grid" Grid.Row="0">
<igGrid:XamWebGrid.GroupBySettings>
<igGrid:GroupBySettings AllowGroupByArea="Top" ExpansionIndicatorVisibility="Collapsed"/>
</igGrid:XamWebGrid.GroupBySettings>
</igGrid:XamWebGrid>
データ仮想化によるパフォーマンス性
コントロールの機能が豊富であっても、肝心のレスポンスが悪かったり描画に時間がかかったりすると、せっかくの機能も台無しになってしまいます。xamWebGridの特徴の一つはパフォーマンスの高さでもあるのですが、その理由は「データの仮想化」を徹底して行っている点です。例えば100万行のデータをバインドした場合、バインド時点で100万行分のセルオブジェクトを生成していては大変なコストがかかってしまいます。xamWebGridでは最適化エンジンにより、必要のないオブジェクトの生成は後回しにします。常に画面表示に必要な部分だけを生成し、スクロール動作などによって表示されなくなったオブジェクトは、次に表示されるセルのために自動的に再利用されます。こういった処理が徹底されていることにより、高い性能を発揮することができるようになっています。詳細については「xamWebGridのパフォーマンスに関するホワイトペーパー」を参照してください。
遅延スクロール
遅延スクロールとは、スクロール操作時にグリッド表示をすぐさま更新するのではなく、スクロール操作が完了するまで（ユーザーが手を離すまで）遅延させる機能です。その代わりに、ユーザーが選択している位置に応じて「行の情報を表すヒント」を表示します。下の図では選択行に応じた社員の顔写真が表示されていますが、テンプレートを使うことで任意の情報を表示することができます。
遅延スクロールは描画レスポンスを高めると同時に、適切なヒントを提示することでユーザーの操作性やデータへのアクセス性を高めることができる便利な機能ですので、ぜひ活用してみてください。
その他の機能
そのほかにも、ソートやページング、ビルトインの列タイプ、豊富な選択機能など、xamWebGridには多くの機能があります。詳しくはインフラジスティックスのWebサイト上に公開されているサンプルブラウザーなどで確認してください。
