クイック スタート: ListView の追加 (HTML)

  • [アーティクル]

[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

ほとんどのアプリではデータ リストを表示します。たとえば、連絡先、ギャラリー内の画像、メールの受信トレイの中身などを一覧表示します。これらのリストのデータは、データベース、Web、または JSON データ ソースから取得できます。 WinJS には、データの表示に使うことのできる ListView コントロールが用意されています。

必要条件

WinJS コントロールを使う、JavaScript で開発された基本的な Windows ランタイム アプリの作成経験が必要です。WinJS のコントロールを使う手順については、「クイック スタート: WinJS コントロールとスタイルの追加」をご覧ください。

ListView とは

ListView は、IListDataSource からのデータをカスタマイズ可能なリストまたはグリッドに表示する WinJS コントロールです。 WinJS には、数種類の IListDataSource オブジェクトが用意されています。

  • List を使うと、データ配列から IListDataSource を作成できます。
  • StorageDataSource を使うと、ファイルとディレクトリに関する情報にアクセスできます。

また、Web サービス、データベースなど、その他の種類のデータ プロバイダーに接続するカスタム データ ソースを独自に作成することもできます。詳しくは、「カスタム データ ソースを作成する方法」をご覧ください。

ListView の作成

Hh465496.wedge(ja-jp,WIN.10).gifListView を作成するには

  1. WinJS への参照を HTML ファイルに追加していない場合は追加します。

    WinJS の最新バージョンを使うには

    1. [WinJS を入手する] から最新バージョンをダウンロードし、アプリまたは Web サイトのディレクトリにコピーします。
    2. WinJS 機能を使うアプリまたは Web サイトの各ページに WinJS CSS とスクリプト参照を追加します。
    
<!-- WinJS references -->
<link href="/WinJS/css/ui-dark.css" rel="stylesheet">
<script src="/WinJS/js/WinJS.js"></script>

    Microsoft Visual Studio で "空のアプリケーション" プロジェクトを作成したときに生成される default.html ファイルの HTML を次の例に示します。

    
<!-- default.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ListViewExample</title>

    <!-- WinJS references -->
    <link href="/WinJS/css/ui-dark.css" rel="stylesheet">
    <script src="/WinJS/js/WinJS.js"></script>

    <!-- ListViewExample references -->
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/default.js"></script>
</head>
<body>
    <p>Content goes here</p>
</body>
</html>

  2. HTML ファイル内に div 要素を作成し、data-win-control プロパティを " WinJS.UI.ListView" に設定します。

    <div id="basicListView" 
    data-win-control="WinJS.UI.ListView">  
</div>

  3. HTML ファイルに付随する JavaScript コードで、HTML が読み込まれるときに WinJS.UI.processAll 関数を呼び出します。

    WinJS.UI.processAll();

    新しいアプリケーション プロジェクトを作成すると生成される default.html ファイルに付随する default.js ファイルの例を次に示します。

    
(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    WinJS.strictProcessing();

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };

    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };

    app.start();
})();

    これは、ListView をスタート ページ (default.html) に追加すると機能します。ListView を Page コントロールに追加する場合、WinJS.UI.processAll は、Page コントロールで呼び出されるため、呼び出す必要はありません。ListView を独自のカスタム HTML に追加する場合は、DOMContentLoaded イベントを使って WinJS.UI.processAll を呼び出すことができます。コントロールのアクティブ化について詳しくは、「クイック スタート: WinJS コントロールとスタイルの追加」をご覧ください。

このコードを実行すると、空の ListView が作成されます。アプリを実行しても、まだ何も表示されません。次のセクションで、ListView に表示するデータを作成します。

データの定義

データ ソースを作成するコードを別の JavaScript ファイルに配置しておくと管理が簡単になります。このセクションでは、データ用の JavaScript ファイルの作成方法、List の作成方法、アプリの他の部分からデータにアクセスできるようにする WinJS.Namespace.define 関数の使用方法について説明します。

  1. Visual Studio を使って、プロジェクトにデータ ファイルを追加します。ソリューション エクスプローラーで、プロジェクトの js フォルダーを右クリックし、[追加]、[新しい項目] の順にクリックします。[新しい項目の追加] ダイアログが表示されます。

  2. [JavaScript ファイル] をクリックします。"dataExample.js" という名前を付けます。 [追加] をクリックしてファイルを作成します。dataExample.js という名前の空の JavaScript ファイルが作成されます。

  3. dataExample.js を開きます。匿名関数を作成し、strict モードを有効にします。

    「基本的なアプリのコーディング」で説明したように、JavaScript コードを匿名関数でラップしてカプセル化し、strict モードを使用することをお勧めします。

    (function () {
    "use strict"; 





})();

  4. データ配列を作成します。この例では、オブジェクトの配列を作成します。各オブジェクトには、title、text、image の 3 つのプロパティがあります。

    (function () {
    "use strict";

    var dataArray = [
    { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },
    { title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" },
    { title: "Brilliant banana", text: "Frozen custard", picture: "images/60banana.png" },
    { title: "Orange surprise", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Original orange", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Vanilla", text: "Ice cream", picture: "images/60vanilla.png" },
    { title: "Very vanilla", text: "Frozen custard", picture: "images/60vanilla.png" },
    { title: "Marvelous mint", text: "Gelato", picture: "images/60mint.png" },
    { title: "Succulent strawberry", text: "Sorbet", picture: "images/60strawberry.png" }
    ];

})();

    注  コードを実行するときに、ローカル コンピューター上のファイルに画像を変更できます。また、ListView サンプルの概要に関するページから画像をダウンロードすることもできます (サンプル コードは異なりますが、同じ画像を使っています)。画像を追加せずにサンプルを実行することもできます。

     

  5. 配列を使って List オブジェクトを作成します。

    (function () {
    "use strict";

    var dataArray = [
    { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },
    { title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" },
    { title: "Brilliant banana", text: "Frozen custard", picture: "images/60banana.png" },
    { title: "Orange surprise", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Original orange", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Vanilla", text: "Ice cream", picture: "images/60vanilla.png" },
    { title: "Very vanilla", text: "Frozen custard", picture: "images/60vanilla.png" },
    { title: "Marvelous mint", text: "Gelato", picture: "images/60mint.png" },
    { title: "Succulent strawberry", text: "Sorbet", picture: "images/60strawberry.png" }
    ];

    var dataList = new WinJS.Binding.List(dataArray); 

})();

  6. 名前空間を宣言し、パブリック メンバーとして List を追加して、List を公開します。

    作ったコードは匿名関数でカプセル化されているので、パブリックにアクセスすることはできません。これは匿名関数を使う理由の 1 つで、プライベート データの機密性を確保するためです。ListView から List にアクセスするには、パブリックにアクセスできるようにする必要があります。そのためには、WinJS.Namespace.define 関数を使って名前空間を作成し、そのメンバーの 1 つとして List を追加する方法があります。

    WinJS.Namespace.define 関数は 2 つのパラメーターを受け取ります。作成する名前空間の名前と、1 つ以上のプロパティ/値ペアを含むオブジェクトです。各プロパティはメンバーのパブリック名で、各値は、プライベート コードの基になる変数、プロパティ、または関数です。指定した変数、プロパティ、関数が公開されます。

    この例では、List を返す itemList という名前のパブリック メンバーを公開する、DataExample という名前の名前空間を作成します。

    (function () {
    "use strict";

    var dataArray = [
    { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },
    { title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" },
    { title: "Brilliant banana", text: "Frozen custard", picture: "images/60banana.png" },
    { title: "Orange surprise", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Original orange", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Vanilla", text: "Ice cream", picture: "images/60vanilla.png" },
    { title: "Very vanilla", text: "Frozen custard", picture: "images/60vanilla.png" },
    { title: "Marvelous mint", text: "Gelato", picture: "images/60mint.png" },
    { title: "Succulent strawberry", text: "Sorbet", picture: "images/60strawberry.png" }
    ];

    var dataList = new WinJS.Binding.List(dataArray);

    // Create a namespace to make the data publicly
    // accessible. 
    var publicMembers =
        {
            itemList: dataList 
        };
    WinJS.Namespace.define("DataExample", publicMembers); 

})();

これで、ListView からアクセスできるデータ ソースが作成されました。 次に、データを ListView に接続します。

ListView へのデータの接続

  1. ListView が含まれている HTML ファイルの head セクションに、作成したデータ ファイル (dataExample.js) への参照を追加します。

    <head>
    <!-- Other file references ... -->

    <!-- Your data file. -->
    <script src="/js/dataExample.js"></script>

</head>

  2. 前のセクションで作成したデータを使って、ListView コントロールの itemDataSource プロパティを設定します。

    itemDataSource プロパティは IListDataSource オブジェクトを受け取ります。List オブジェクトは IListDataSource ではありませんが、それ自体の IListDataSource バージョンを返す dataSource プロパティを持っています。

    データに接続するには、ListView コントロールの itemDataSource プロパティを DataExample.itemList.dataSource に設定します。

    
<div id="basicListView"
    data-win-control="WinJS.UI.ListView"
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource }">
</div>

アプリを実行します。ListView に、データ ソースのプロパティと値が表示されます。

テンプレートなしで表示されているデータ ソース コンテンツ。

これは、表示しようとした外観とはまったく異なります。title と text フィールドの値だけを表示し、画像へのパスではなく実際の画像を表示する必要があります。表示しようとしたとおりにレンダリングするには、Template を定義する必要があります。次の手順で、この方法を説明します。

項目テンプレートの定義

この時点で、ListView に必要なデータは用意できていますが、表示方法が指定されていません。これについては、各リスト項目の表示に使うマークアップを含む項目テンプレートが必要です。項目テンプレートには他のコントロールのほとんどを追加できますが (詳しくは、「項目テンプレートへの対話要素の追加」をご覧ください)、FlipView または他の ListView は追加することができません。

テンプレートを作成する方法には、マークアップを使って WinJS.Binding.Template を定義する方法と、テンプレート関数を作成する方法の 2 種類があります。この例では、マークアップでテンプレートを作成します。テンプレート関数の作成方法について詳しくは、itemTemplate プロパティの説明をご覧ください。

WinJS.Binding.Template は簡単に作成できます。各リスト項目の表示に使うマークアップを定義し、各データ フィールドの表示場所を指定するだけです。

  1. HTML で WinJS.Binding.Template コントロールを作成し、ID を割り当てます。この例では ID "mediumListIconTextTemplate" を使います。

        <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">

    </div>

    注  テンプレートを使う前に定義する必要があるので、ListView の HTML の前に、テンプレートの HTML を追加します。

     

  2. WinJS.Binding.Template のルート要素は単一にする必要があります。テンプレートのコンテンツの親として機能する div 要素を作成します。

        <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
        <div>

        </div>
    </div>

  3. ListView を構成する各データ項目を生成するマークアップを作成します。 前の手順で作成したデータには、画像の場所、タイトル、テキストが含まれているため、これらの要素を作成します。

    • img 要素は画像フィールドの表示用です。
    • h4 要素は title フィールドの表示用です。
    • h6 要素は text フィールドの表示用です。
        <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
        <div>

            <!-- Displays the "picture" field. -->
            <img src="#"  />
            <div>

                <!-- Displays the "title" field. -->
                <h4></h4>

                <!-- Displays the "text" field. --> 
                <h6></h6>
            </div>
        </div>
    </div>

  4. レイアウトの問題を回避するには、テンプレートのルート要素のサイズを必ず指定します。また、テンプレート内の img 要素のサイズも必ず指定します。

        <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
        <div style="width: 150px; height: 100px;">

            <!-- Displays the "picture" field. -->
            <img src="#" style="width: 60px; height: 60px;" />
            <div>

                <!-- Displays the "title" field. -->
                <h4></h4>

                <!-- Displays the "text" field. --> 
                <h6></h6>
            </div>
        </div>
    </div>

  5. データを表示する各要素の data-win-bind 属性を設定します。data-win-bind 属性の構文は次のとおりです。

    data-win-bind="propertyName: dataFieldName"

     

    たとえば、img の src プロパティを "picture" フィールドにバインドする場合の構文は、次のとおりです。

    <img data-win-bind="src : picture" />

    複数のプロパティを設定するには、プロパティをセミコロンで区切ります。

    data-win-bind="property1Name: dataField1Name; property2Name: dataField2Name"

     

    この例では、テンプレート内の項目を、対応するデータ フィールドにバインドします。

        <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
        <div style="width: 150px; height: 100px;">

            <!-- Displays the "picture" field. -->
            <img src="#" style="width: 60px; height: 60px;" 
                 data-win-bind="alt: title; src: picture" />
            <div>

                <!-- Displays the "title" field. -->
                <h4 data-win-bind="innerText: title"></h4>

                <!-- Displays the "text" field. --> 
                <h6 data-win-bind="innerText: text"></h6>
            </div>
        </div>
    </div>

  6. 項目テンプレートを使うには、select 構文を使って、ListView の itemTemplate プロパティに使う項目テンプレートを設定します。

        <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
        <div style="width: 150px; height: 100px;">

            <!-- Displays the "picture" field. -->
            <img src="#" style="width: 60px; height: 60px;" 
                 data-win-bind="alt: title; src: picture" />
            <div>

                <!-- Displays the "title" field. -->
                <h4 data-win-bind="innerText: title"></h4>

                <!-- Displays the "text" field. --> 
                <h6 data-win-bind="innerText: text"></h6>
            </div>
        </div>
    </div>       

    <div id="basicListView" data-win-control="WinJS.UI.ListView" 
        data-win-options="{itemDataSource : DataExample.itemList.dataSource, 
            itemTemplate: select('#mediumListIconTextTemplate')}">
    </div>

    これで、アプリを実行すると、バインドされたデータがリストに表示されるようになりました。

    データがバインドされた ListView (画像とテキストが表示されている)。

ListView のスタイル指定

ListView では、高さを動的に調整してコンテンツに合わせることはできません。ListView をレンダリングする場合は、高さの絶対値を指定する必要があります。WinJS のスタイル シートでは、ListView コントロールの高さが 400 ピクセルに設定されますが、独自の CSS を作成して既定のスタイルを上書きし、独自の高さを簡単に指定できます。次の CSS をアプリの CSS ファイルに追加して、ListView の高さと幅を設定し、境界線を追加します。

Windows の ListView スタイル指定

.win-listview 
{
    height: 500px; 
    width: 500px; 
    border: 2px solid gray;
}

Windows 8.1 の ListView スタイル指定

.win-listview 
{
    height: 400px; 
    width: 300px; 
    border: 2px solid gray;
}

win-listview は WinJS で定義されるクラスで、ListView のスタイル指定に使うことができます。前に示した例を使うと、各 ListView の高さ、幅、境界線が変更されます。特定の ListView だけを変更するには、ListView コントロールをホストする div 要素の ID をセレクター要素に追加します。

Windows の固有の ListView スタイル指定

#basicListView .win-listview 
{
    height: 500px; 
    width: 500px; 
    border: 2px solid gray;
}

Windows Phone 8.1 の固有の ListView スタイル指定

#basicListView .win-listview 
{
    height: 400px; 
    width: 300px; 
    border: 2px solid gray;
}

アプリを実行します。これで、ListView のサイズが大きくなり、すべての項目が表示されるようになりました。

500 ピクセルの ListView コントロール。

WinJS コントロールの外観は、WinJS スタイル シートに定義された CSS クラスをオーバーライドすることによってカスタマイズできます。ListView で使うことができるのは、次のような CSS クラスです。

  • win-listview

    ListView 自体のスタイルを指定します。

  • win-container

    ListView または FlipView 項目コンテナーのスタイルを指定します。各項目に独自のコンテナーを指定できます。

  • win-progress

    ListView に項目が読み込まれるときに表示されるプログレス コントロールのスタイルを指定します。

すべてのクラスの一覧については、ListView reference page をご覧ください。

この例では、ListView 内の各項目コンテナーの周りに余白を追加するスタイルを定義します。


#basicListView .win-listview .win-container {
    margin: 10px; 
}

スタイルが定義された ListView 内の項目

次の例では、ListView 内のホバー状態のリスト項目に適用するスタイルを定義します。

#basicListView .win-listview .win-container:hover {
    color: red;
}

注  

ListView では、左側、上側、下側の余白はサポートされますが、右側の余白は指定できません。1 つの回避策として、右側に設ける余白の幅と同じ幅の要素を追加し、その style.visibility プロパティを "none" に設定して、その要素を ListView の右側に追加する方法があります。

 

項目のスタイル指定

前の例では、インライン スタイルと WinJS のクラスを使って、ListView とその項目のスタイルを指定しました。項目テンプレートのスタイルを指定する CSS クラスを使うこともできます。次の例は、「項目テンプレートの定義」で定義したテンプレートを変更したものです。この例では、定義してあったインライン スタイルを削除し、CSS クラスが追加されています。

    <div id="mediumListIconTextTemplate" 
         data-win-control="WinJS.Binding.Template" 
         style="display: none">
        <div class="mediumListIconTextItem">
            <img src="#" class="mediumListIconTextItem-Image" data-win-bind="src: picture" />
            <div class="mediumListIconTextItem-Detail">
                <h4 data-win-bind="innerText: title"></h4>
                <h6 data-win-bind="innerText: text"></h6>
            </div>
        </div>
    </div>

これらのスタイルをアプリの CSS に追加します。

.mediumListIconTextItem
{
    width: 282px;
    height: 70px;
    padding: 5px;
    overflow: hidden;
    display: -ms-grid;
}

    .mediumListIconTextItem img.mediumListIconTextItem-Image 
    {
        width: 60px;
        height: 60px;
        margin: 5px;
        -ms-grid-column: 1;
    }

    .mediumListIconTextItem .mediumListIconTextItem-Detail
    {
        margin: 5px;
        -ms-grid-column: 2;
    }

この ListView の外観は次のようになります。

スタイルが指定された項目を含む ListView

テンプレート スタイルを最初から作成する必要はありません。 一般的に使われるテンプレートとそれに対応する CSS のセットを用意してあります。「リスト レイアウト用の項目テンプレート」と「グリッド レイアウト用の項目テンプレート」をご覧ください。

リスト レイアウト、グリッド レイアウト、セル レイアウトの切り替え

ListView 要素には、リスト、グリッド、セルの 3 種類のレイアウト モードがあります。

  • リスト レイアウトを使うには、次のように、layout プロパティを WinJS.UI.ListLayout に設定します。

        <div id="basicListView" 
        data-win-control="WinJS.UI.ListView"
        data-win-options="{ itemDataSource : DataExample.itemList.dataSource, 
            itemTemplate: select('#mediumListIconTextTemplate'), 
            layout: {type: WinJS.UI.ListLayout}}">
    </div>

  • グリッド レイアウトを使うには、次のように、layout プロパティを WinJS.UI.GridLayout に設定します。

        <div id="basicListView" 
        data-win-control="WinJS.UI.ListView"
        data-win-options="{ itemDataSource : DataExample.itemList.dataSource, 
            itemTemplate: select('#mediumListIconTextTemplate'), 
            layout: {type: WinJS.UI.GridLayout}}">
    </div>

  • (Windows のみ) セル レイアウトを使うには、次のように、layout プロパティを WinJS.UI.CellSpanningLayout に設定します。

        <div id="basicListView" 
        data-win-control="WinJS.UI.ListView"
        data-win-options="{ itemDataSource : DataExample.itemList.dataSource, 
            itemTemplate: select('#mediumListIconTextTemplate'), 
            layout: {type: WinJS.UI.CellSpanningLayout}}">
    </div>

ListView のレイアウトはいつでも変更でき、作成後でも変更できます。

データのグループ化

ListView 内の項目は、グループ化できます。次の図は、アルファベットでグループ化された項目を示しています。

グループ化された項目を含む ListView

方法については、「ListView 内の項目をグループ化する方法」をご覧ください。

項目テンプレートへの対話要素の追加

注  項目テンプレートには他のコントロールのほとんどを追加できますが、FlipView と他の ListView は追加することができません。

 

ListView 項目の選択と呼び出し

通常、ユーザーが要素を操作したときに ListView がその操作をキャプチャし、それを使って、ユーザーが項目を選択したか、項目を呼び出したか、項目をパンしたかを判断します。コントロールなどの対話要素の場合、入力を受け取るには、win-interactive CSS クラスを対話要素またはその親要素の 1 つにアタッチする必要があります。この要素とその子要素は対話入力を受け取り、ListView に対してイベントをトリガーしなくなります。

win-interactive を項目テンプレート内の要素にアタッチする場合には、項目全体がその要素で満たさなれないようにしてください。項目全体が満たされた場合、ユーザーはその項目を選ぶことも呼び出すこともできなくなります。

項目テンプレートに対話要素を追加するには、WinJS.Binding.Template ではなく、テンプレート関数を使うことをお勧めします。 テンプレート関数について詳しくは、「テンプレート関数を作成する方法」をご覧ください。

ListView への並べ替え機能、ドラッグ機能、ドロップ機能の追加 (Windows のみ)

ListView コントロールでは、ユーザーは、項目の並べ替え、ドラッグ、ドロップを行うことができます。たとえば、ListView の itemsDraggable プロパティを 'true' に設定すると、ドラッグ機能を宣言できます。同様に、ListView コントロール内の項目をユーザーが並べ替えることができるようにするには、ListView の itemsReorderable プロパティを 'true' に設定します。

<div id="basicListView" 
        data-win-control="WinJS.UI.ListView"
        data-win-options="{ itemDataSource : DataExample.itemList.dataSource, 
            itemTemplate: select('#mediumListIconTextTemplate'), 
            itemsDraggable: true,
            itemsReorderable: true }">
</div>

itemsDraggable プロパティを使うと、ListView コントロールから個々の項目を目に見える形でドラッグできます。ユーザーが ListView から項目をドラッグすると、itemdragstart イベントが発生します (このイベントは、並べ替え操作の最初にも発生します)。項目が ListView にドロップされると、ListView は itemdragdrop イベントを生成します。

ListView コントロールへの並べ替え機能、ドラッグ機能、またはドロップ機能の追加について詳しくは、「ListView で並べ替え、ドラッグ操作、ドロップ操作を有効にする方法」をご覧ください。または、HTML ListView のドラッグ アンド ドロップと並べ替えのサンプルをダウンロードしてください。

ListView のサンプル

ほぼすべての WinJS コントロールとオンライン エディターの実際のコード例については、try.buildwinjs.com をご覧ください。

ListView コントロールについて詳しく理解するために役立つサンプルが用意されています。

要約と次のステップ

ListView を作成する方法と、これをデータにバインドする方法について説明しました。また、項目テンプレートの作成方法とスタイル指定の方法についても説明しました。

アプリで使うことができる定義済みの項目テンプレートの一覧については、「リスト レイアウト用の項目テンプレート」と「グリッド レイアウト用の項目テンプレート」をご覧ください。項目をグループ化する方法については、「ListView 内の項目をグループ化する方法」をご覧ください。