Udostępnij za pośrednictwem


Item templates for grid layouts (HTML)

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

Learn about item templates that you can use with a ListView that has a grid layout. For templates designed for the list layout, see Item templates for list layouts.

Each template contains this info:

To use the template, copy the HTML and the CSS styles into your project. The HTML includes a ListView that's designed to be used with the template. After you copy the HTML, set the ListView control's itemDataSource to your app's data source and update the template's data-win-bind attributes so they work with your data.

This section contains these templates:

In this section

Topic Description

Icon and text (applications) template

Defines an item that represents an item. The item contains an icon and descriptive text.

Image (gallery) template

Defines an item in an image gallery.

Image (gallery basket) template

Defines an item in an image gallery basket.

Image overlay (album) template

Defines an item that shows album info: an image of the album, info about the album, and the artist.

Image overlay (gallery folder) template

Defines an item for a folder in an image gallery.

Image overlay (landing) template

Defines an item that contains an image, a section with large text, and a section with small text.

Image and text (collection) template

Defines an item that contains an image, a large heading, a subheading, and body text.

Image and text (list file) template

Defines an item that represents a file: an icon, the name, a date, and its size.

Text (album track) template

Defines an item that contains the track number and title of an album track.

Text tile (landing) template

Defines an item that represents a tile. The item contains a section with larger, bold text and a section with smaller text.

Text tile (list folder) template

Defines an item that represents a tile. The item contains a heading.