バージョン

XamDataGrid のリモート データ ソースのバインディング

このトピックでは、XamDataGrid コントロールのリモート データソース バインディングの概念を分かりやすく説明します。

このトピックの内容

このトピックには、以下のセクションがあります。

前提条件

本トピックの理解を深めるために、以下のトピックを参照することをお勧めします。

トピック 目的

このトピックでは、XamDataGrid コントロールをビューに追加してサンプルデータを生成するための基本的な手順を紹介します。

リモート データ

この例では、XamDataGrid コントロールをリモートのデータ ソースにバインドする手順を説明します。ここでは、Northwind データベースをホスティングする Web サービスを対象にします。提供された oData リソースを使用して、XamDataGrid コントロールに 4 つの TextColumn (OrderID, CustomerID, ShipName and ShipName) と Orders 情報で生成された列を生成します。

  1. 以下の NuGet パッケージを XF プロジェクトにインストールします。

    • Microsoft.Data.Edm, Version=5.8.1

    • Microsoft.Data.OData, Version=5.8.1

    • Microsoft.Net.Http, Version=2.2.28

    • Microsoft.OData.Edm, Version=6.15.0

    • Microsoft.OData.Core, Version=6.15.0

    • Microsoft.Spatial, Version=6.15.0

    • Simple.OData.Client, Version=4.24.0.1

    • System.Spatial, Version=5.8.1

  1. 以下の OData リソース クラスをプロジェクトに含みます。

  1. アプリケーションの .Droid および .iOS プロジェクトのプロパティを変更してインターネット アクセス許可を追加します。

データのバインド

  1. アプリケーションのメインビューに XamDataGrid コントロールのインスタンスを追加します。

XAML の場合:

xmlns:grids="clr-namespace:Infragistics.XamarinForms.Controls.Grids;assembly=Infragistics.XF.DataGrid"
xmlns:local="clr-namespace:Infragistics.Data;assembly=YourAppName"
...
<grids:XamDataGrid x:Name="DataGrid" AutoGenerateColumns="False" >
    <!--TODO add text columns-->
    <!--TODO bind data source-->
</grids:XamDataGrid>

C# の場合:

using Infragistics.XamarinForms.Controls.Grids;
using Infragistics.Data;
...
var DataGrid = new XamDataGrid();
// TODO add text columns
// TODO bind data source
  1. 以下のコードで示すように TextColumn クラスの 4 つのインスタンスを作成し、XamDataGrid コントロールに追加します。

XAML の場合:

<grids:XamDataGrid.Columns>
    <grids:TextColumn PropertyPath="OrderID"   />
    <grids:TextColumn PropertyPath="CustomerID"  />
    <grids:TextColumn PropertyPath="ShipName"  />
    <grids:TextColumn PropertyPath="ShipCity" />
</grids:XamDataGrid.Columns>

C# の場合:

var column1 = new TextColumn();
column1.PropertyPath = "OrderID";
var column2 = new TextColumn();
column2.PropertyPath = "CustomerID";

var column3 = new NumericColumn();
column3.PropertyPath = "ShipName";
var column4 = new NumericColumn();
column3.PropertyPath = "ShipCity";

DataGrid.Columns.Add(column1);
DataGrid.Columns.Add(column2);
DataGrid.Columns.Add(column3);
DataGrid.Columns.Add(column4);
  1. 以下のプロパティで OData 仮想データソースのインスタンスを作成し、XamDataGrid コントロールに割り当てます。

    • BaseURI - NorthWind ウェブ サービスなど、仮想データソースのユニフォーム リソース識別子 (URI) を設定します。

    • EntitySet - 仮想データソースに定義されたテーブルの名前を設定します。

    • DesiredPageSize - リモート データソースから一度に読み込まれるレコード数を設定します。

    • MaximumCachedPages - 仮想データソースのキャッシュ ページの最大数を設定します。

モバイル アプリケーション開発では、メモリー使用率が重要な要素であるため、XamDataGrid コントロールが使用するメモリーの総量や、リモート データの取得に必要な帯域幅を制限して、必要な場合にのみレコードを取得するようにします。 この動作は、DesiredPageSize および MaximumCachedPages プロパティを設定することでカスタマイズできます。この場合、ページあたり 25 個のレコードを取得し、所定の期間にこれらのレコードの 5 ページのみを保持します。レコードのセット全体を表示する必要がないイベントでは、必要なレコードのみがネットワークを介して取得および表示されるため、この機能は大変便利です。

XAML の場合:

<grids:XamDataGrid.ItemsSource>
    <local:ODataVirtualDataSource
        EntitySet= "Orders" PageSizeRequested="25" MaxCachedPages="5"
        BaseUri="http://services.odata.org/V4/Northwind/Northwind.svc">
    </local:ODataVirtualDataSource>
</grids:XamDataGrid.ItemsSource>

C# の場合:

DataGrid.ItemsSource = new ODataVirtualDataSource()
{
    BaseUri = "http://services.odata.org/V4/Northwind/Northwind.svc",
    EntitySet = "Orders",
    PageSizeRequested = 25,
    MaxCachedPages = 5
};
  1. アプリケーションを保存、実行して結果を確認します。アプリケーションは、画面の向きやピクセル密度によって異なりますが以下のスクリーンショットのようになります。

Getting started with Databinding 3.png

関連トピック

以下の表は、このトピックに関連するトピックを示します。

トピック 目的

このトピックでは、XamDataGrid コントロールでサポートされる列タイプの情報を提供します。

このトピックでは、XamDataGrid コントロールで列を使用する際のコード例を提供します。

このトピックでは、ローカル データを XamDataGrid コントロールへバインドするコード例を提供します。

データ ソースを使用したサンプル