The tile template catalog (Windows Store apps)

Turn-based games

You can use live tiles to notify a user when it is their turn in a game along with additional details about the progress of the game.

This example shows the wide tile TileWidePeekImage06 template, which cycles between an image that shows the current status of the game (1) and an image of the opposing player and their status (2).

The example also shows the square tile TileSquarePeekImageAndText01 template, which cycles between a smaller image of the game and text that prompts the user to take their turn (3).

Social games

You can use live tiles to entice a user to play by showing game invitations, missed invitations, or competitive scores from friends.

This example shows the wide tile TileWideText09 template, which displays a message that the game has a new top score (1) and details about the score (2).

The example also shows the square tile TileSquareText04 template, which displays the new high score information in a smaller area.

Resume a game

You can use live tiles to entice a user to resume a game where they left off.

This example shows the wide tile TileWideImageAndText02 template, which displays an image of where the user last saved their game progress (1) and information about the user’s game (2).

The example also shows the square tile TileSquareText02 template, which displays details about the user’s last save point in the game.

Game updates

You can use live tiles to notify a user that a game has new downloadable content or other updates.

This example shows the wide tile TileWideImageAndText02 template, which displays an image for the game (1) and information about the game update (2).

The example also shows the square tile TileSquarePeekImageAndText04 template, which cycles through an image for the game and the information about the game update (3).

Remember that tiles have only one hit target, so you can either direct the user to your game or to the download site.

Status updates

You can use live tiles to keep the user updated about their friends.

This example shows the wide tile TileWideSmallImageAndText04 template, which displays both the image of the person who added a status or comment (1) along with their name and the beginning of the text (2).

The example also shows the square tile TileSquareText02 template, which displays the short name and text of the person who added the status or comment.

Photos and images

If a post or comment refers to an image or a photo, you can include the image in the live tile when displaying the update.

This example shows the wide tile TileWidePeekImage05 template, which cycles through a photo (1) and a comment about the photo (2).

The example also shows the square tile TileSquarePeekImageAndText04 template, which cycles between a photo and the text of the comment about the photo, truncated to fit within the smaller tile (3).

People or groups

You can use a secondary tile to enable a user to pin friends, family, or colleagues to the start page. You can use collection tile templates to show images of group members in the live tile. You can use peek tile templates to show updates related to group members.

This example shows the wide tile TileWidePeekImageCollection05 template, which cycles through a collection of images of group members (1) and a recent message posted by a group member (2) with and a name that represents the group (3).

The example also shows the square tile TileSquarePeekImageAndText02 template, which cycles through updates about group members and an image of the related group member (4).

Events

You can use live tiles to show event information including the location, time, and friends that are attending. You can also use a secondary tile for an event that a user can pin to the start page. This allows the user to easily access the latest information about an event that they are attending or hosting.

This example shows the wide tile TileWidePeekImageCollection02 template, which cycles through an image of the event (1) and an image collection of the friends that are attending the event (2), and the event information including the total number of attendees.

The example also shows the square tile TileSquarePeekImageAndText04 template, which cycles through an image of the event or attendees of the event (3), and the event information including the total number of attendees.

Summary info

You can use live tiles to show a summary of updates in your app. While a summary is often a less compelling notification, it is useful when a user does not wish to show private information on the start screen.

This example shows the wide tile TileWideBlockAndText01 template, which displays the total number of updates (1) along with a summary of the updates for different categories (2).

The example also shows the square tile TileSquareBlock template, which displays the total number of updates.

Features stories

You can use a live tile to display the most compelling portions of a featured article. The live tile can cycle through a group of stories to give the user an overview of the day’s news.

This example shows the wide tile TileWideImageAndText01 template which displays both an image for the story and the text of the headline (1). The sample also shows the square tile TileSquareText04 template, which shows only the headline (2).

For stories with larger headlines, you can use a different live tile template that enables you to add more text, such as the wide tile TileWideText04 template.

Stories with long headlines

For stories with larger headlines, you can use a live tile template that enables you to add more text.

This example shows the wide tile TileWideText04 template, which does not include an image and uses a smaller font (1). This enables the user to read the full headline of the story.

The example also shows the square tile TileSquareText04 template, which displays a shortened version of the headline text (2). You will want to make sure that truncated headline text in your square tile can still be understood by the reader.

Stories with short headlines

For stories with short headlines, you can use a live tile template that displays the text using a large font.

This example shows the wide tile TileWideText03 template, which displays a short headline using a large font. You will want to make sure that the headline text is not truncated when using this template.

If you are using a square tile template, use a template such as the TileSquareText04 template, which uses a smaller font (2) and is appropriate for the reduced space available to square tiles.

Showing larger images

You can use a peek tile template to cycle between an image and the headline text for a story. In this case, the tile will display the image without the text so be sure that your image is easily recognizable by the reader.

This example shows the wide tile TileWidePeekImageAndText01 template, which cycles through an image for the story and longer headline text (1).

The sample also shows the square tile TileSquarePeekImageAndText04 template, which cycles through an image for the story and truncated, longer headline text.

Polls and statistics

You can show poll results or statistics for a story by adding an image that displays a graph or chart.

This example shows the wide tile TileWideImageAndText01 template, which displays an image of poll results (1) and text that describes the results of the poll (2).

The example also shows the square tile TileSquareText04 template, which only shows the text that describes the results of the poll.

Blogs and opinion articles

You can use a small image tile to display an image of the author of a blog or opinion article. By focusing on the author, you can separate opinion pieces from other types of news.

This example shows the wide tile TileWideSmallImageAndText03 template, which displays a photo of the author along with the name of the author and the headline text (1).

The example also shows the square tile TileSquareText04 template, which displays the name of the author and the headline text using a smaller font (2). Using a smaller font displays more of the headline text to the reader.

Videos

You can use a live tile to launch a video.

This example shows the wide tile TileWideImageAndText02 template, which displays a relevant screen shot from the video (1), the headline for the video labeled as “Video:” (2), and the playing badge to indicate that the tile starts the video (3).

The example also shows the square tile TileSquareImage template, which displays a screen shot and the playing badge.

News categories

You can use a secondary tile to enable a user to pin a specific category of news stories to personalize the content that they receive. You can use peek tile templates to cycle through a set of related stories.

This example shows a pinned tile that displays the latest business news. The example uses the wide tile TileWideSmallImageAndText01 template, which displays the company logo as a small image (1), and a short headline in a large font (2).

The sample also shows the square tile TileSquareText04 template, which displays only the short headline text (3).

Taking notes

You can use a live tile to give a user easy access to their notes or to update them about changes to their documents.

This example shows the wide tile TileWideSmallImageAndText02 template, which displays an image of the person that modified the document (1), the title of the document (2), and when the document was last updated (3).

The example also shows the square tile TileSquareText04 template, which displays only the title of the document and when it was last modified.

Both tile template examples show a gleam badge (4) to indicate that the document has been modified.

Calendar and appointments

You can use live tiles to show information for upcoming appointments. You can show relevant information for the appointment including the location, time, and appointment details.

This example shows the wide tile TileWideSmallImageAndText04 template, which displays an image of map directions (1) and information about the appointment.

The example also shows the square tile TileSquareText04 template, which displays just the critical information about the appointment.

Task lists

You can use a live tile to display task information to the user. You can display multiple items using a wide tile template, or display one item at a time using a square tile template.

This example shows the wide tile TileWideText11 template, which uses a font glyph to display the status of the task (1) and shows multiple items from the task list (2).

The example also shows the square tile TileSquareText04 template, which cycles through each task in the list and includes a badge that contains the number of tasks in the list (3).

Syncing data

You can use live tiles to notify a user of changes when their files or data sync with the cloud, a server, or a shared directory. You can also provide warnings regarding low space or bandwidth remaining.

This example shows the wide tile TileWideText02 template, which displays a notification about what has changed and who made the change (1) and a detailed list of file changes (2).

The example also shows the square tile TileSquareBlock template, which displays a summary of changes.

Movies and shows

You can use live tiles to notify a user of an upcoming movie release or episode of a show. You can also include ratings and recommendations from social apps.

This example shows the wide tile TileWidePeekImage05 template, which cycles through an image from a show and a recommendation for the show from a friend (1).

The example also shows the square tile TileSquarePeekImageAndText04 template, which cycles through an image of the show (2) and a recommendation from a friend without including an image of the friend (3).

Paused movies and shows

You can use live tiles to display paused movies on tiles as a reminder to the user.

This example shows the wide tile TileWideImage template, which displays an image from the last watched scene of a paused movie (1) and the paused badge to indicate that the movie is paused (2).

The example also shows the square tile TileSquareImage template, which displays a truncated image from the last scene of the paused movie along with the paused badge.

Keep in mind how relevant a paused tile will be for the user. A user might not want to resume a song in a few days but they might resume a movie a day or two later.

Music

You can use live tiles to display the currently playing song, upcoming songs, and details about the artist. You can include ratings and comments from social apps as well as information about upcoming appearances and music releases.

This example shows the wide tile TileWideSmallImageAndText02 template, which displays an image of the artist or album (1) and the information about the song, artist, and album (2).

The example also shows the square tile TileSquareText04 template, which displays only the important information about the song in a smaller format (3).

Photography

You can use live tiles to display thumbnail images of photos and albums. For apps that allow users to create and edit images, you can use live tiles to show off effects that the app can apply to a photo.

This example shows the wide tile TileWidePeekImageCollection05 template, which cycles through a collection of images from a photo album (1) and an image of the album creator (2) with the name and description of the album contents (3).

The example also shows the square tile TileSquarePeekImageAndText04 template, which cycles through a single photo from the album and the album information.

Purchase recommendations

You can use live tiles to display recommendations for new and special items or items that relate to the user’s interests.

This example shows the wide tile TileWideImageAndText01 template, which displays an image and sale information for an upcoming holiday (1).

The sample also shows the square tile TileSquareText02 template, which displays sale information for an upcoming holiday without an image (2)

Catalogs

You can use live tiles that display a collection of images for catalog items.

This example shows the wide tile TileWideImageCollection template, which displays multiple images of related items from a catalog (1).

The example also shows the square tile TileSquareImage template, which displays a single image of a catalog item (2). You can then cycle through the related images, showing one image at a time.

Buyer notifications

If your app supports bidding for items, you can use live tiles to notify users when they have won an item, have been outbid, the item has shipped, and so on.

This example shows the wide tile TileWideText09 template, which displays the update for the buyer in large text (1), and the details of the update in smaller text (2).

The example also shows the square tile TileSquareText04 template, which displays the update and an abbreviated version of the details.

Seller notifications

Similar to buyer notifications, you can notify a seller when an item has sold. For high volume sellers, you can update the seller about inventory changes or common analysis information such as sales volume.

This example shows the wide tile TileWideText07 template, which displays an overview of total sales in large text (1) and details in smaller text (2).

The example also shows the square tile TileSquareText02 template, which displays more specific information such as sales for the day (3).

Tile notifications can keep the seller up to date about their inventory by alerting them when an item has sold or displaying basic analytics information.

Shopping cart

You can use live tiles to show a summary of the items in a user’s shopping cart.

This example shows the wide tile TileWideBlockAndText01 template, which displays the number of items in the cart (1) and details about what items are in the cart (2).

The example also shows the square tile TileSquareBlock template, which displays only the total number of items in the cart (3).

Categories and commen searches

You can use a secondary tile to enable a user to pin a specific category of item, a wish list, or a personalized search of the catalog.

This example shows the wide tile TileWideSmallImageAndText01 template, which displays an image of a product category (1) and details about the product category such as an upcoming sale (2).

The example also shows the square tile TileSquareImage template, which displays an image of the product category and an alert badge to notify the user about new information (3).

Personal finance

You can use live tiles to give a user a summary of their spending. Be sure to give the user options regarding which information they want displayed on the start page.

This example shows the wide tile TileWideText03 template, which displays a summary of the user’s spending (1) and an alert badge to notify the user of over spending (2).

The sample also shows the square tile TileSquareText04 template, which displays the summary information and alert badge in a smaller area.

Billing

You can use live tiles to remind users of upcoming bills or payments.

This example shows the wide tile TileWideBlockAndText01 template, which displays a summary of payments due (1) and a large font glyph with a date to notify the user of the next payment due (2).

The example also shows the square tile TileSquareBlock template, which only shows the font glyph and date to notify the user of the next payment due.

Financial markets

You can use live tiles to show the performance of stocks and assets that the user owns or is watching.

This example shows the wide tile TileWideText06 template, which uses a font glyph to indicate if a stock value is rising or falling (1) and displays a list of stocks and their current values including the percentage that the value has changed for the day (2).

The example also shows the square tile TileSquareText03 template, which displays an abbreviated version of the watched stocks and their current values.

Individual stocks

You can use a secondary tile to enable a user to pin a specific stock to the start page and receive detailed information about the stock at a glance.

This example shows the wide tile TileWideSmallImageAndText02 template, which displays an image of a graph of the stock performance (1), details about the stock and its current price (2), and a time stamp showing when the information was last updated (3).

The example also shows the square tile TileSquareText03 template, which displays stock information and a time stamp in a smaller format.