ListView をブランド設定する方法

[アーティクル]
03/04/2016

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

「Windows ストアアプリのブランド設定」では、Microsoft デザインの原則に従いながら、ブランドの本質をアプリに組み込む方法について説明しました。ブランドデザインの 7 つの要素、つまり、色、アイコン、画像、グリッド、レイアウト、ロゴ、タイポグラフィについて説明しました。

ここでは、次の手法を使ってアプリのランディングページをカスタマイズする方法について説明します。

ListView 項目テンプレートの変更
ListView 項目サイズの変更
ListView 項目アニメーションの追加

このトピックでは、Visual Studio グリッドアプリ テンプレートを変更して、次のようなランディングページを作る方法について説明します。

Contoso Bakery ランディングページ

Contoso フードトラックの例

前提条件

「Windows ストアアプリのブランド設定」で説明されているように、ブランドをアプリに取り入れる方法の基礎を理解していることを前提としています。
基本的な ListView オブジェクトを作成および使用できることを前提としています。ListView コントロールの概要については、「クイックスタート: ListView の追加」をご覧ください。

ListView を使う場合

最初に決めることは、ランディングページで使うコントロールの種類です。 HTML コントロールや JavaScript 用 Windows ライブラリコントロールの一覧については、「コントロールの一覧」をご覧ください。

電子メールの一覧、検索結果、購入項目のカタログなど、データのコレクションを一連の項目として表示するには、ListView を使います。

ListView では、項目がリストレイアウトまたはグリッドレイアウトで表示されます。項目を表示するランディングページのほとんどでは、ListView コントロールのグリッドレイアウトが使われます。このレイアウトではオーバーフローが自動的に処理され、水平方向にスクロールされるためです。項目の表示に使われるitemTemplateを変更することで、ListView 内の項目をカスタマイズすることができます。

CSS3 グリッドレイアウトと Windows 8 のグリッドシステム

グリッドシステムは Windows 8 の外観における重要な部分であり、異なるアプリや機能の間で視覚的な統一性を確保するために役立っています。グリッドレイアウトを使用すると、要素に合わせてページ上のスペースを分割し、要素をグリッドに沿って簡単に配置することができます。

この例の場合、カスケードスタイルシートレベル 3 (CSS3) のグリッドレイアウトも使っています。これは、ListView コントロールのグリッドレイアウトとは別のものです。 CSS3 のグリッドレイアウトではさまざまな用途に対応する汎用のグリッドスタイルを実現できますが、ListView はデータのコレクションの表示のみに対応しています。CSS3 グリッドレイアウトを使用すると、アプリを整然とレイアウトし、要素をグリッドに沿って簡単に配置することができます。

Contoso French Bakery の例

では、既定の Visual Studio Grid App テンプレートを見て、それを「Windows ストアアプリのブランド設定」の Contoso French Bakery の例と比較してみましょう。これは、Grid App テンプレートのスクリーンショットです。

Grid App テンプレートを使ったアプリ

これを、「Windows ストアアプリのブランド設定」の Contoso French Bakery のランディングページと比較してみましょう。 Contoso French Bakery では、Contoso ブランドが強調されるようにカスタマイズした方法で項目をレイアウトしています。

Contoso Bakery ランディングページ

Contoso French Bakery のランディングページは Grid App テンプレートと大きく異なっているように見えますが、その違いは HTML/CSS を数箇所だけ変更したことによって生じています。この例では、項目が対話型であり、ユーザーが項目を選ぶとグループ詳細ページが表示され、マカロンやカップケーキなどの種類を選ぶことができると想定しています。グリッドレイアウトを使った ListView は、このランディングページに適したコントロールです。

Grid App テンプレートを Contoso ランディングページに変換するには、項目テンプレートのサイズを変更し、画像のサイズを大きくして、項目の説明を追加する必要があります。

Visual Studio で、Grid App テンプレートを使った新しいアプリを作成します。

groupedItems.html の HTML itemtemplate を変更します。既定の itemtemplate との主な違いは、それぞれの項目の説明を表示するために h3 の見出し要素を追加したことです。

    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
        <div class="item">
            <img class="item-image" src="#" 
                 data-win-bind="src: backgroundImage; alt: title" />
            <div class="item-text">
                <h3 class="item-title" data-win-bind="textContent: title"></h3>
                <h6 class="item-subtitle win-type-ellipsis" 
                    data-win-bind="textContent: subtitle"></h6>
                <h6 class="item-detail" data-win-bind="textContent: description"></h6>
            </div>
        </div>
    </div>

次に、groupedItems.css のスタイルを変更します。groupedItems.css に加えた主な変更は、テキスト div を画像に重ねるのではなく、画像の下の位置に移動したことと、項目の詳しい情報を表示する要素のための行をグリッドに追加したことです。

.groupeditemspage .groupeditemslist .win-horizontal.win-viewport .win-surface {
        margin-bottom: 60px;
        /* Decreased margin */
        margin-left: 35px;
        margin-right: 115px;
}   
.groupeditemspage .groupeditemslist .item {
       /* Changed row size and item size, centered text and changed text color */ 
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 1fr 1280px;
        display: -ms-grid;
        height: 600px500px;
        width: 350px;
        text-align: center;
        color: rgb(160,160,160);

    }

        .groupeditemspage .groupeditemslist .item .item-image {
               /* Increased image size and altered padding */
            height: 340px;
            width: 340px;
            padding: 0px 5px 20px 5px;
        }

        .groupeditemspage .groupeditemslist .item .item-text {
            /* Added a row to the grid and changed height and padding */
            -ms-grid-row: 2;
            -ms-grid-rows: 30px 21px 1fr;
            display: -ms-grid;
            padding: 30px 15px 2px 15px;
            height: 150px;
        }

            .groupeditemspage .groupeditemslist .item .item-text .item-title {
                /* Changed font color */
                -ms-grid-row: 1;
                overflow: hidden;
                font-size: 16pt;
                color: rgb(200,200,200);
            }

            .groupeditemspage .groupeditemslist .item .item-text .item-subtitle {
                -ms-grid-row: 2;
            }
            .groupeditemspage .groupeditemslist .item .item-text .item-detail {
                /* All new CSS for the detail text */
                -ms-grid-row: 3;
                overflow:hidden;
                padding-top: 20px;
                height: 60px;
                margin-left: 30px;
                margin-right: 30px;
            }

data.js からグループヘッダーを削除します (各グループの見出しを単純に削除するのが最も簡単です)。

このような変更を加えた結果、アプリの外観は次のようになります。

変更されたアプリ

背景とタイトルに画像をいくつか追加して変更すると、Contoso French Bakery のランディングページが完成します。

Contoso フードトラックの例

次の例では、Grid App テンプレートを使って Contoso フードトラックのランディングページを作ります。

Contoso フードトラックの例

Contoso フードトラックのランディングページでは、さまざまな大きさの魅力的な画像を使ってユーザーの目を引きつけています。

前の例とは異なり、このランディングページではテンプレートに JavaScript をいくつか追加する必要があります。その主な目的は、ListView の項目に別々のサイズを設定するためのロジックを追加することです。この例でも、ランディングページの項目が対話型であり、ユーザーが項目を選ぶとその項目の詳しい情報が表示されると想定しています。グリッドレイアウトを使った ListView が、この目的に適しています。ここでも、Grid App テンプレートを基にします。

異なる大きさの項目を使うには、まず、最小の基本単位を決める必要があります。この基本単位を使ってすべてのグリッド項目を作成します。つまり、すべてのグリッド項目のサイズがこのグリッドサイズの倍数となることが必要です。次に示す画像の項目で最小のサイズは "Near Me" セクションの項目の高さであり、約 80 ピクセルになります。水平方向のサイズについてはもっと柔軟に設定できます。ここでは簡単にするために、水平方向のサイズについても 80 ピクセルを使います。

この画像では、基本単位 (赤い四角の枠) を実際のいくつかの項目と比較しています。

項目の基本サイズ

項目のサイズを計算するときには、各項目のサイズが基本単位の倍数に基本単位間のパディングを加えたサイズに等しくなるようにする必要があります。次の計算式を使います。

item sizeₓ = m * base unit sizeₓ + (m -1) * item paddingₓ

item sizey = m * base unit sizey + (m -1) * item paddingy

ここで、m は正の整数です。x と y は、項目のサイズに項目のパディングを加えた大きさの X 方向サイズと Y 方向サイズです。

基本サイズが項目に対して小さすぎる場合、アプリのパフォーマンスが低下します。経験則として、項目のサイズはどちらの方向にも基本単位の数倍までに抑えるようにしてください。

Visual Studio で、Grid App テンプレートを使った新しいアプリを作成します。

groupedItems.html で、multisizebaseitemtemplate という名前の新しい項目テンプレートを作成します。この項目テンプレートは既定の項目テンプレートとほとんど同じですが、item-description ヘッダーが追加されています。これによって、タイトルとサブタイトルに加えて、項目の説明をランディングページに含めることができます。

  <!-- Template tutorial HTML -->
    <div class="multisizebaseitemtemplate" data-win-control="WinJS.Binding.Template">
        <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
        <div class="item-overlay">
            <h4 class="item-title" data-win-bind="textContent: title"></h4>
            <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
            <h6 class="item-description" data-win-bind="textContent: description"></h6>
        </div>
    </div>

groupedItems.js で、PageControl の定義 (ui.Pages.define) の前に、multisizeItemTemplateRenderer という名前のテンプレート関数を作成します。

この関数を使って、ListView 項目をレンダリングします。この関数によって、どの項目でどの項目テンプレートを使うかを決定します。後の手順で、これを ListView コントロールの itemTemplate プロパティに割り当てます。

 function multisizeItemTemplateRenderer(itemPromise) {
        return itemPromise.then(function (currentItem) {
            var content;
            // Grab the default item template used on the groupeditems page.
            content = document.querySelector(".multisizebaseitemtemplate");
            var result = content.cloneNode(true);

            // Change the CSS class of the item depending on the group, then set the size in CSS.
            switch (currentItem.groupKey) {
                case "group1":
                    {
                        // For the first item, use the largest template.
                        if (currentItem.index == 0) {
                            result.className = "largeitemtemplate"
                        }
                        // Use the mediumlarge template for the second item
                        else if (currentItem.index == 2) {
                            result.className = "mediumlargeitemtemplate"
                        }
                        // Use the medium template for the third item, and any other items
                        else {
                            result.className = "mediumitemtemplate"
                        }
                        break;
                    }
                default:
                    {
                        // Use the small template for the second group
                        result.className = "smallitemtemplate"
                    }
            }
            // Because we used a WinJS template, we need to strip off some attributes 
            // for it to render.
            result.attributes.removeNamedItem("data-win-control");
            result.attributes.removeNamedItem("style");
            result.style.overflow = "hidden";

            // Because we're doing the rendering, we need to put the data into the item.
            // We can't use data binding.
            result.querySelector(".item-image").src = currentItem.data.backgroundImage;
            result.querySelector(".item-title").textContent = currentItem.data.title;
            result.querySelector(".item-subtitle").textContent = currentItem.data.subtitle;
            result.querySelector(".item-description").textContent = currentItem.data.description;
            return result;
        });
    }

groupedItems.js で、ページ定義の外部に groupInfo 関数を追加します。この関数は、ビューで複数のサイズの項目を使うことを ListView に知らせ、項目の基本サイズを指定します。基本サイズは、一覧で表示される最小の項目のサイズです。レイアウトを正しく動作させるには、他の項目のサイズを基本サイズの倍数にする必要があります。
```
 function groupInfo() {
    return {
        enableCellSpanning: true,
        cellWidth: 80,
        cellHeight: 80
    };
 }
```

次に、これらの新しい関数を ListView コントロールにフックする必要があります。

groupedItems.js で、_initializeLayout 関数を変更して、グループの均一な一覧が表示されるようにします。

// Add the itemTemplate parameter as shown.
_initializeLayout: function (listView, viewState, itemTemplate) {
    if (viewState === appViewState.snapped) {
        listView.itemDataSource = Data.groups.dataSource;
        listView.groupDataSource = null;

        // Add the following line of code.
        listView.itemTemplate = itemTemplate;

        listView.layout = new ui.ListLayout();
    } else {

                listView.itemDataSource = Data.items.dataSource;
                listView.groupDataSource = Data.groups.dataSource;
                listView.layout = new ui.GridLayout({ groupHeaderPosition: "top" });

        // Add the following two lines of code.
        listView.itemTemplate = multisizeItemTemplateRenderer;
        listView.layout = new ui.GridLayout({ groupInfo: groupInfo, groupHeaderPosition: "top" });
    }
},

項目テンプレートを ListView に割り当てる行を削除し、次のコード内のコメントで指示されている変更を行います。

ready: function (element, options) {
    var listView = element.querySelector(".groupeditemslist").winControl;

    // Add the next line of code to retrieve the item template. 
    var itemTemplate = element.querySelector(".itemtemplate");

    listView.groupHeaderTemplate = element.querySelector(".headerTemplate");

    listView.oniteminvoked = this.itemInvoked.bind(this);
        listView.itemTemplate = element.querySelector(".itemtemplate");

    // Change the last argument of the _initializeLayout function to itemTemplate.
    this._initializeLayout(listView, appView.value, itemTemplate);
    listView.element.focus();
 },

// This function updates the page layout in response to viewState changes.
updateLayout: function (element, viewState, lastViewState) {
    var listView = element.querySelector(".groupeditemslist").winControl;

    // Add the next line of code to retrieve the item template.
    var itemTemplate = element.querySelector(".itemtemplate");

    if (lastViewState !== viewState) {
        if (lastViewState === appViewState.snapped || viewState === appViewState.snapped) {
            var handler = function (e) {
                listView.removeEventListener("contentanimating", handler, false);
                e.preventDefault();
            }
            listView.addEventListener("contentanimating", handler, false);

            // Change this line to pass through the item template.
            this._initializeLayout(listView, viewState, itemTemplate);
        }
    }
},

次に、項目のスタイルを groupedItems.css に追加する必要があります。前の画像に示したように項目のスタイルを設定するには、ランディングページの 4 種類の項目テンプレートに対応する 4 つの CSS クラスが必要です。この 4 つのクラスに、smallitemtemplate、mediumitemtemplate、mediumlargeitemtemplate、largeitemtemplate という名前を付けます。次に示す CSS のほとんどでは、オーバーレイとテキストを画像に合わせた位置に配置し、各項目を適切なサイズに設定しています。テンプレートによっては項目テンプレートの一部の要素を使わないため、特定の要素が壊れる場合があります。この CSS は、最初の @media screen CSS 行の直前に追加します。

/* Generic styling */
.groupeditemspage .groupeditemslist .item-overlay {
    -ms-grid-row: 2;
}
.groupeditemspage .groupeditemslist .item-overlay .item-description {
    visibility:collapse;
}

/* Small item template */
.groupeditemspage .groupeditemslist .smallitemtemplate {
    width: 440px;
    height: 80px;
    overflow: hidden;

}
.groupeditemspage .groupeditemslist .smallitemtemplate .item-image {
    height: 80px;
    width: 80px;
}
.groupeditemspage .groupeditemslist .smallitemtemplate .item-overlay {
   opacity: 0;
}
.groupeditemspage .groupeditemslist .smallitemtemplate .item-overlay .item-title {
    position: absolute; 
    top: -5px;
    padding-left: 90px;
    font-size: 11pt;
}
.groupeditemspage .groupeditemslist .smallitemtemplate .item-overlay .item-subtitle {
    position: absolute; 
    top: 15px;
    padding-left: 90px;
    font-size: 9pt;
}
.groupeditemspage .groupeditemslist .smallitemtemplate .item-overlay .item-description {
    position: absolute; 
    top: 35px;
    padding-left: 90px;
    font-size: 9pt;
    visibility: visible;
    width: 360px;
    overflow-wrap: normal;
    text-overflow: initial;
}

/* Medium item template */
.groupeditemspage .groupeditemslist .mediumitemtemplate {
    width: 260px;
    height: 170px;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr 30px;
    display: -ms-grid;
    overflow: hidden;
}      
.groupeditemspage .groupeditemslist .mediumitemtemplate .item-overlay .item-title {
    padding-top: 5px;
    padding-left: 10px;
}
.groupeditemspage .groupeditemslist .mediumitemtemplate .item-overlay .item-title {
    font-size: 14px;
}
.groupeditemspage .groupeditemslist .mediumitemtemplate .item-overlay .item-subtitle {
    visibility: collapse;
}   

/* Medium-large item template */
.groupeditemspage .groupeditemslist .mediumlargeitemtemplate {
    width: 260px;
    height: 350px;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr 30px;
    display: -ms-grid;
    overflow: hidden;
}
.groupeditemspage .groupeditemslist .mediumlargeitemtemplate .item-overlay .item-title {
    padding-top: 5px;
    padding-left: 10px;
    font-size: 14px;
}

.groupeditemspage .groupeditemslist .mediumlargeitemtemplate .item-overlay .item-subtitle {
    visibility: collapse;
}   

/* Large item template */
.groupeditemspage .groupeditemslist .largeitemtemplate {
    width: 440px;
    height: 530px;
    overflow: hidden;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr 90px;
    display: -ms-grid;
}
.groupeditemspage .groupeditemslist .largeitemtemplate .item-overlay {
    -ms-grid-row: 2;
    -ms-grid-rows: 1fr 21px;
    display: -ms-grid;
    padding: 6px 15px 2px 15px;
}
.groupeditemspage .groupeditemslist .largeitemtemplate .item-subtitle{
    -ms-grid-row: 2;
}

@media screen and (-ms-view-state: fullscreen-landscape), screen and (-ms-view-state: fullscreen-portrait), screen and (-ms-view-state: filled) ルールで、最初の CSS スタイルを次のように変更します。この CSS コードによってオーバーレイを不透明にして、"item" クラスを削除します。
```
 .groupeditemspage .groupeditemslist .item-overlay {
        background: rgba(0,0,0,1);
    }
```
groupedItems.css の最初の .groupeditemspage .groupeditemslist .win-horizontal.win-viewport .win-surface スタイルを次のように変更します。
```
    .groupeditemspage .groupeditemslist .win-horizontal.win-viewport .win-surface {
        margin-bottom: 60px;
        margin-left: 45px;
        margin-right: 115px;
    }
```
この CSS コードによって margin-bottom を "50px" に変更し、項目を少し大きくします。

以上の変更を加えた後で、アプリを起動します。アプリは次のように表示されます。

変更されたアプリ

画像を追加し、背景、テキスト、オーバーレイの色を変更すると、Contoso フードトラックのランディングページが完成します。

より独創的なサイズとテンプレート

これまで説明した方法以外にも、項目テンプレートをカスタマイズする方法があります。たとえば、次のランディングページでは 2 種類の項目サイズと 3 種類のテンプレートを使って、バランスの取れた外観を実現しています。

もう 1 つのカスタマイズしたランディングページ

このランディングページの基本単位は、最小の項目のサイズです。各グループの最初の項目は基本単位 2 × 3 個分のサイズになっており、画像の下にタイトルと説明を配置するテンプレートを使っています。グループ内の次の項目は基本単位 1 × 1 個分のサイズになっており、画像にタイトルと説明をオーバーレイしています。3 番目のテンプレートは、画像を含まない項目に使われます。

ListView 項目アニメーションの追加

スタート画面では、ライブタイルに最新の画像とテキストが表示され、ユーザーは情報をひとめで把握することができます。アプリのランディングページでも、必要に応じて WinJS のアニメーションライブラリを使うことで、同じ効果を実現できます。

この例では、ランディングページの最初の項目を 4 秒ごとに最新の画像で更新します。これはスタート画面の更新間隔と同じです。さらに、WinJS のプレビューアニメーションを使います。これは、スタート画面のタイルで使われているものと同じアニメーションです。

Visual Studio で、Grid App テンプレートを使った新しいアプリを作成します。

groupedItems.html で、2 番目の画像を含めるように項目テンプレートを変更します。この画像がアニメーションに使われます。

    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
        <div class="item">
            <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
            <img class="item-image-new" src="#" data-win-bind="src: backgroundImage; alt: title" />
            <div class="item-overlay">
                <h4 class="item-title" data-win-bind="textContent: title"></h4>
                <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
            </div>
        </div>
    </div>

groupedItems.css で、2 番目の画像を最初の画像の下に配置するように CSS を変更します。これによって、項目の下端から、新しい画像をアニメーションで表示することができます。アニメーションが開始される前に項目の位置を変更できるように、両方の項目で相対位置指定を使うようにする必要があります。 1 番目および 3 番目の CSS スタイルは既に groupedItems.css に含まれており、変更するだけです。2 番目の CSS スタイルは新規です。

        /* Update this CSS style. */
        .groupeditemspage .groupeditemslist .item .item-image {
            -ms-grid-row-span: 2;
            position:relative;
        }

        /* Add this CSS style. */
        .groupeditemspage .groupeditemslist .item .item-image-new {
            -ms-grid-row-span: 2;
            position:relative;
            top: 250px;
        }

        /* Update this CSS style. */
        .groupeditemspage .groupeditemslist .item .item-overlay {
            -ms-grid-row: 2;
            -ms-grid-rows: 1fr 21px;
            display: -ms-grid;
            padding: 6px 15px 2px 15px;
            position:relative;
        }

4 秒ごとに新しい項目アニメーションをトリガーするために、groupedItems.js で、次のコードを ready 関数に追加します。
```
            setInterval(function () { changeImage() } , 4000);
```

groupedItems.js で、ページ定義の外部にこのコードを追加します。最初の変数定義では、Grid App テンプレートで使われるさまざま画像を指定しています。JavaScript 用 Windows ライブラリのプレビューアニメーションを再生するための peekTile 関数を追加します。アニメーションを再生する前に画像を更新するための changeImage 関数を追加します。この例では、ListView の最初の項目に対してのみアニメーションが再生されます。

    // Define images
    var darkGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY3B0cPoPAANMAcOba1BlAAAAAElFTkSuQmCC";
    var lightGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY7h4+cp/AAhpA3h+ANDKAAAAAElFTkSuQmCC";
    var mediumGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY5g8dcZ/AAY/AsAlWFQ+AAAAAElFTkSuQmCC";

    // Play the Peek animation
    function peekTile(tile1, tile2) {
        // Create peek animation
        var peekAnimation = WinJS.UI.Animation.createPeekAnimation([tile1, tile2]);

        // Reposition tiles to their desired post-animation position
        tile1.style.top = "-250px";
        tile2.style.top = "0px";

        // Execute animation
        peekAnimation.execute();
    }

   function changeImage() {
        // Get the two image elements
        var images = document.querySelector(".item-image");
        var imagesNew = document.querySelector(".item-image-new"); 

        // Swap out the old image source and choose the new image source
        images.src = imagesNew.src;
        if (images.src == lightGray)
            imagesNew.src = mediumGray;
        else if (images.src == mediumGray)
            imagesNew.src = darkGray;
        else
            imagesNew.src = lightGray;

        // Reset the elements for the pre-animation position and trigger the animation
        images.style.top = "0px";
        imagesNew.style.top = "250px";
        peekTile(images, imagesNew);
    };

これで、ListView にカスタム項目アニメーションが追加されました。

次の方法で共有

ListView をブランド設定する方法

前提条件

ListView を使う場合

CSS3 グリッドレイアウトと Windows 8 のグリッドシステム

Contoso French Bakery の例

Contoso フードトラックの例

より独創的なサイズとテンプレート

ListView 項目アニメーションの追加

関連トピック

その他のリソース

次の方法で共有

ListView をブランド設定する方法

前提条件

ListView を使う場合

CSS3 グリッド レイアウトと Windows 8 のグリッド システム

Contoso French Bakery の例

Contoso フード トラックの例

より独創的なサイズとテンプレート

ListView 項目アニメーションの追加

関連トピック

その他のリソース

CSS3 グリッドレイアウトと Windows 8 のグリッドシステム

Contoso フードトラックの例