仮想化されたデータグリッドによる高速レンダリング

ステップ 2データソースの定義

次に、Northwind サービス データ ソースを GridRemoteDataViewModel にバインドします。XFPerfSamples プロジェクトで [ViewModels] を展開し、GridRemoteDataViewModel.csソース ファイルを開きます。

サンプル プロジェクトでは、GridRemoteDataViewModel が既に作成され、データ ソースが OData として定義されています。ソースに、次のコード セグメントを追加してデータ ソースを定義します。

BaseUri="http://services.odata.org/V4/Northwind/Northwind.svc", EntitySet="Orders", PageSizeRequested=25, MaxCachedPages=5

​BaseUriは、Northwind サーバーを OData ソースとして定義します。Northwind サービスから、EntitySet はサービスから取得するデータを定義します。PageSizeRequestedは、ページが要求されるたびに返されるページあたりの項目数です。MaxCachedPages は、要求後にキャッシュされるページの数です。

データ ソースを定義したら、次の手順では、そのソースをビューにバインドします。

ステップ 3データソースのバインド

ソースを定義したら、ソースをビューにバインドする必要があります。Visual Studio プロジェクトで [ビュー] を展開し、GridRemoteData.xamlファイルを開きます。には、Infragistics データ グリッドの名前空間が必要です。Infragistics Toolbox を使用すると、必要なコードの開発を自動化できます。このレッスンでは、コードを手動で記述します。

<igDataGrid:XamDataGrid x:Name="grid1" ItemSource="{Binding DataSource}" AutoGenerateColumns="False"> <igDataGrid:XamDataGrid.Columns> <igDataGrid:TextColumn PropertyPath="OrderID" HeaderText="Order ID"/> <igDataGrid:TextColumn PropertyPath="CustomerID" HeaderText="Customer ID"/> <igDataGrid:TextColumn PropertyPath="ShipName" HeaderText="Ship Name" /> <igDataGrid:TextColumn PropertyPath="ShipCity" HeaderText="Ship City" /> </igDataGrid:XamDataGrid.Columns> </igDataGrid:XamDataGrid>

この例では、AutoGenerateColumnsプロパティを false に設定します。プロパティを True に設定すると、データ ソースが検査され、必要な列が作成されます。これは、使用されているデータセットによっては、モバイルアプリでいくつかの問題を引き起こす可能性があります。上記のコード セグメントでは、列をTextColumnsとして手動で指定しています。

ステップ 4ソリューションをテストする

データ ソースとバインディングを構成したら、エミュレータまたは物理ハードウェア デバイスでソリューションをテストできます。この病変については、Android 6.0 エミュレーターを使用してテストします。これにより、アプリケーションがコンパイルされ、APK がビルドされ、パッケージがエミュレータまたはデバイスにデプロイされます。デバッガーは Visual Studio のバックグラウンドで起動し、アプリを操作できるようになります。アプリから、[グリッド] – [リモートデータ] をクリックします。

デバイスまたはエミュレータによっては、グリッドはソース データを読み込むため、最初は空白になります。データは、ロード後、およびスクロールすると、グリッドに入力されます。マウスまたは指でスクロールして複数のページを読み込み、グリッドをテストします。データがロードされるように供給されていない場合は、データがロードされている間、インターフェイス内に一時的なセルが表示されます。