コンテンツへスキップ
有償UIライブラリ「Ignite UI」の一部を無償化
詳細を見る
Infragistics
無料トライアル

高速に実行

仮想化データグリッドで高速にレンダリング

はじめに

Ultimate UI Controls for Xamarinのデータグリッドは、仮想レンダリング機能により、行や列の数に制限のないデータを処理できます。最も高速なレンダリング、滑らかなタッチ操作、そしてカスタマイズされた列と行の操作が可能です。このレッスンでは、ODataサービスに接続されたデータグリッドを設定するコードを確認し、iOSとAndroidでグリッドの優れたパフォーマンスを体験します。

数行のサンプルコードで、Northwindサービスの公開データソースに接続できます。XamDataGridを使用して利用可能なデータソース（この例ではODataサービス）にバインドし、高性能なデータグリッドにデータを表示できます。

レッスンの目標

このレッスンの終わりには、ODataデータソースを使用した高性能グリッドが完成しています。そのための主な手順は次のとおりです。

  1. プロジェクトをセットアップする
  2. データソースを定義する
  3. ソースをビューにバインドする
  4. ソリューションをテストする

このレッスンで使用するコントロールの詳細については、Xamarin Data Gridコントロールのページを参照してください。

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

このレッスンで使用するプロジェクトは、こちらをクリックしてダウンロードできます。

プロジェクトのセットアップ

次に、ZIPを解凍後に初めてプロジェクトを実行するには、ソリューション全体をVisual Studioに読み込み、ソリューションを右クリックして「パッケージの復元」を選択します。

完了したら、Portable Class LibraryとAndroidプロジェクトの両方に、DataSource.DataProviders.OData.Core.dllへの参照を追加します。このファイルは、ZIPダウンロードに含まれるOtherDependenciesフォルダにあります。プロジェクト内の参照フォルダを右クリックし、OtherDependenciesフォルダを参照して、DataSource.DataProviders.OData.Core.dllを選択すれば追加できます。

プロジェクトのセットアップ

ソリューション内の両方のプロジェクトで同じ操作を行います。最後に、ターゲットAndroidバージョンが「Use Compile using SDK version.」に設定されていることを確認します。この設定は、Androidプロジェクトを右クリックして「プロパティ」を選択すると確認できます。

プロジェクトのセットアップ

手順2 データソースを定義する

次に、GridRemoteDataViewModelでNorthwindサービスのデータソースをバインドします。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_は、ページを要求するたびに返される1ページあたりの項目数です。MaxCachedPagesは、要求後にキャッシュされるページ数です。

データソースを定義する

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

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

ソースを定義したら、そのソースをビューにバインドする必要があります。Visual Studioプロジェクトで、Viewsを展開し、GridRemoteData.xamlファイルを開きます。これには、インフラジスティックスのデータグリッドの名前空間が必要です。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でバックグラウンドで起動し、アプリを操作できるようになります。アプリからGrid – Remote Dataをクリックします。

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

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

まとめ

XamDataGridは、Xamarinモバイルアプリで使用されるさまざまな種類のデータソースで使用されます。これにより、任意のデータソースを使用して高性能データグリッドを作成でき、エンドユーザーにとってシームレスな体験が実現します。