Run Fast: 仮想化されたデータ グリッド

手順1: プロジェクトのセット アップ

こちらからこのレッスンで使用するプロジェクトをダウンロードいただけます。zip ファイルのプロパティを表示し、[ブロックの解除] にチェックを入れ [OK] ボタンをクリックします。

zip ファイルを解凍し、XFPerfSamples.sln ソリューションを Visual Studio で開きます。ソリューションを右クリックし、コンテキストメニューから [NuGet パッケージの復元] を選択します。

NuGet パッケージの復元を完了した後、XFPerfSamples および、XFPerfSamples.Droid プロジェクトに DataSource.DataProviders.OData.Core.dll への参照を追加します。このファイルは解凍した ZIP ファイルの OtherDependencies フォルダーに存在しています。各プロジェクトの [参照] を右クリックしコンテキストメニューから [参照の追加] をクリックします。

表示された参照マネージャー ウィンドウの右下に表示されている [参照] ボタンをクリックし、プロジェクトフォルダーの OtherDependencies フォルダー直下に存在する、DataSource.DataProviders.Odata.Core.dll ファイルを選択し[追加] ボタンを選択します。

参照マネージャーに dll が表示されていることを確認し、[OK] ボタンをクリックすると参照設定が解決されます。

参照設定が完了した後に XFPerfSamples.Droid プロジェクトを右クリックし、コンテキストメニューから [プロパティ] をクリックします。

プロジェクト設定画面において ターゲット Android バージョン が "SDK バージョンを使用したコンパイルの使用" となっていることを確認してください。

手順2: データソースの定義

次に Northwind サービスから取得したデータを GridRemoteDataViewModel クラスで保持します。XFPerfSamples プロジェクトの ViewModels フォルダーを展開し、GridRemoteDataViewModel.cs クラスを開いてください。

このクラスの中には DataSource と名前付けられたプロパティが定義されており、コンストラクタでは DataSource プロパティの空の初期化コードが記述されています。この初期化コードの中に下記のスニペットを追加します。

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

BaseUri プロパティは Northwind サーバーから OData 形式のデータを取得するための位置を設定しています。EntitySet プロパティはこの Northwind サーバーからどのデータを取得するかを設定しています。PageSizeRequested プロパティは 1 回のページリクエストにおいて 1 ページに含まれるデータの項目数を設定しています。また、MaxCachedPages はリクエストの後、何ページ分のデータをキャッシュとして保持するかどうかを設定しています。

次のステップは View へのデータ設定です。

手順3: データ ソースをバインド

データソースの定義を完了した後、View にバインドする必要があります。Visual Studio で同じプロジェクトの Views フォルダーを展開し、GridRemoteData.xaml ファイルを開いてください。この View でグリッドを使用するためには名前空間を設定する必要があります。Write Fast: NuGet Xamarin.Forms ツールボックスを参考に XamDataGrid をこの画面に追加します。追加した XamDataGrid のタグについては今回のレッスンの目的を達成するために手動で下記のように書き換えます。

<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>

このコードは ItemsSource プロパティに先ほど定義した DataSource プロパティをバインディングさせており、データが表示されるようになっています。加えて、AutoGenerateColumns プロパティを False と設定しています。このプロパティが True となっている場合は自動的にデータ ソースの中身を探索し、必要な列を生成します。モバイル アプリケーションでは データ ソースの使い方によってはこの自動の列生成がニーズを満たさない局面が発生します。上記のコードでは手動で TextColumn を設定しています。

手順4: ソリューションのテスト

データ ソースとバインディングの設定を終えた後、ソリューションをエミュレーター、あるいは物理デバイスで実行し動作結果を確認します。アプリケーションが実行した後に GRID - REMOTE DATA ボタンをクリックします。

デバイス、またはエミュレーターによって挙動は異なりますが、初期のデータロード時には空のグリッドが表示されます。データがロードされた後やスクロール後にグリッドにデータが表示されます。タッチやマウスのスクロールを試してみてください。スクロールの位置がキャッシュされているデータから外れている場合、一時的にセルの表示が行われ、データのロード後、セルに値が表示されます。