Try, Catch, Finally...

Windows Store App Toast Notification Templates – JavaScript, C#, Push Notifications

Peter Dwersteg — Thu, 07 Mar 2013 18:48:00 GMT

Background

You’re provided with a number of templates to use when sending Toast Notification with you Windows Store App. This post contains information about every template you can choose (name, picture, description), as well as cut and paste code to create and send the notification. All you need to do is fill in the information fields with the appropriate information.

JavaScript

var notifications = Windows.UI.Notifications;

/****************************
* Insert template code here
****************************/

var toast = new notifications.ToastNotification(toastXml);
var toastNotifier = notifications.ToastNotificationManager.createToastNotifier();
toastNotifier.show(toast);

For additional information, for example how to simultaneously update your tile with 1x1 and 2x1 live tiles, see the quickstart on sending toast notifications in JS.

using Windows.UI.Notifications;
using Windows.Data.Xml.Dom;

/*****************************
* Insert template code here
****************************/

ToastNotification toast = new ToastNotification(toastXml);
ToastNotificationManager.CreateToastNotifier().Show(toast);

For additional information, see the quickstart on sending toast notifications in C#.

Push Notifications

Each template consists of a call to push.wns.sendToast*(channel, payload, options). For more information and an example of how to do this in the context of an app and cloud service, see the following Azure Mobile Services introduction, and the introduction to push notifications using Azure Mobile Services.

The Templates

ToastText01

A single string wrapped across a maximum of three lines of text.

JavaScript

var template = notifications.ToastTemplateType.toastText01;
var toastXml = notifications.ToastNotificationManager.getTemplateContent(template);

var toastTextElements = toastXml.getElementsByTagName("text");
toastTextElements[0].appendChild(toastXml.createTextNode("wrap text"));

XmlDocument toastXml = ToastNotificationManager.GetTemplateContent(ToastTemplateType.ToastText01);

XmlNodeList toastTextAttributes = toastXml.GetElementsByTagName("text");
toastTextAttributes[0].InnerText = "wrap text";

Push Notification

push.wns.sendToastText01(channel.uri, {
text1: 'wrap text'
});

ToastText02

One string of bold text on the first line, one string of regular text wrapped across the second and third lines.

JavaScript

var template = notifications.ToastTemplateType.toastText02;
var toastXml = notifications.ToastNotificationManager.getTemplateContent(template);

var toastTextElements = toastXml.getElementsByTagName("text");
toastTextElements[0].appendChild(toastXml.createTextNode("bold text"));
toastTextElements[1].appendChild(toastXml.createTextNode("wrap text"));

XmlDocument toastXml = ToastNotificationManager.GetTemplateContent(ToastTemplateType.ToastText02);

XmlNodeList toastTextAttributes = toastXml.GetElementsByTagName("text");
toastTextAttributes[0].InnerText = "bold text";
toastTextAttributes[1].InnerText = "wrap text";

Push Notification

push.wns.sendToastText02(channel.uri, {
text1: 'bold text',
text2: 'wrap text'
});

ToastText03

One string of bold text wrapped across the first and second lines, one string of regular text on the third line.

JavaScript

var template = notifications.ToastTemplateType.toastText03;
var toastXml = notifications.ToastNotificationManager.getTemplateContent(template);

var toastTextElements = toastXml.getElementsByTagName("text");
toastTextElements[0].appendChild(toastXml.createTextNode("bold wrap text"));
toastTextElements[1].appendChild(toastXml.createTextNode("wrap text"));

XmlDocument toastXml = ToastNotificationManager.GetTemplateContent(ToastTemplateType.ToastText03);

XmlNodeList toastTextAttributes = toastXml.GetElementsByTagName("text");
toastTextAttributes[0].InnerText = "bold text";
toastTextAttributes[1].InnerText = "wrap text";

Push Notification

push.wns.sendToastText03(channel.uri, {
text1: 'bold text',
text2: 'wrap text'
});

ToastText04

One string of bold text on the first line, one string of regular text on the second line, one string of regular text on the third line.

JavaScript

var template = notifications.ToastTemplateType.toastText04;
var toastXml = notifications.ToastNotificationManager.getTemplateContent(template);

var toastTextElements = toastXml.getElementsByTagName("text");
toastTextElements[0].appendChild(toastXml.createTextNode("bold text"));
toastTextElements[1].appendChild(toastXml.createTextNode("text1"));
toastTextElements[2].appendChild(toastXml.createTextNode("text2"));

XmlDocument toastXml = ToastNotificationManager.GetTemplateContent(ToastTemplateType.ToastText04);

XmlNodeList toastTextAttributes = toastXml.GetElementsByTagName("text");
toastTextAttributes[0].InnerText = "bold text";
toastTextAttributes[1].InnerText = "text1";
toastTextAttributes[2].InnerText = "text2";

Push Notification

push.wns.sendToastText04(channel.uri, {
    text1: 'bold text',
    text2: 'text1',
    text3: 'text2'
});

ToastImageAndText01

An image and a single string wrapped across a maximum of three lines of text.

JavaScript

var template = notifications.ToastTemplateType.toastImageAndText01;
var toastXml = notifications.ToastNotificationManager.getTemplateContent(template);

var toastImageElements = toastXml.getElementsByTagName("image");
toastImageElements[0].setAttribute("src", "image.png");
toastImageElements[0].setAttribute("alt", "alt text");

var toastTextElements = toastXml.getElementsByTagName("text");
toastTextElements[0].appendChild(toastXml.createTextNode("wrap text"));

XmlDocument toastXml = ToastNotificationManager.GetTemplateContent(ToastTemplateType.ToastImageAndText01);

XmlNodeList toastImageAttributes = toastXml.GetElementsByTagName("image");
((XmlElement)toastImageAttributes[0]).SetAttribute("src", "image.png");
((XmlElement)toastImageAttributes[0]).SetAttribute("alt", "alt text");

XmlNodeList toastTextAttributes = toastXml.GetElementsByTagName("text");
toastTextAttributes[0].InnerText = "wrap text";

Push Notification

push.wns.sendToastImageAndText01(channel.uri, {
    image1src: 'image.png',
    image1alt: 'alt text',
    text1: 'wrap text'
});

ToastImageAndText02

An image, one string of bold text on the first line, one string of regular text wrapped across the second and third lines.

JavaScript

var template = notifications.ToastTemplateType.toastImageAndText02;
var toastXml = notifications.ToastNotificationManager.getTemplateContent(template);

var toastImageElements = toastXml.getElementsByTagName("image");
toastImageElements[0].setAttribute("src", "image.png");
toastImageElements[0].setAttribute("alt", "alt text");

var toastTextElements = toastXml.getElementsByTagName("text");
toastTextElements[0].appendChild(toastXml.createTextNode("bold text"));
toastTextElements[1].appendChild(toastXml.createTextNode("wrap text"));

XmlDocument toastXml = ToastNotificationManager.GetTemplateContent(ToastTemplateType.ToastImageAndText02);

XmlNodeList toastImageAttributes = toastXml.GetElementsByTagName("image");
((XmlElement)toastImageAttributes[0]).SetAttribute("src", "image.png");
((XmlElement)toastImageAttributes[0]).SetAttribute("alt", "alt text");

XmlNodeList toastTextAttributes = toastXml.GetElementsByTagName("text");
toastTextAttributes[0].InnerText = "bold text";
toastTextAttributes[1].InnerText = "wrap text";

Push Notification

push.wns.sendToastImageAndText02(channel.uri, {
    image1src: 'image.png',
    image1alt: 'alt text',
    text1: 'bold text',
    text2: 'wrap text'
});

ToastImageAndText03

An image, one string of bold text wrapped across the first two lines, one string of regular text on the third line.

JavaScript

var template = notifications.ToastTemplateType.toastImageAndText03;
var toastXml = notifications.ToastNotificationManager.getTemplateContent(template);

var toastImageElements = toastXml.getElementsByTagName("image");
toastImageElements[0].setAttribute("src", "image.png");
toastImageElements[0].setAttribute("alt", "alt text");

var toastTextElements = toastXml.getElementsByTagName("text");
toastTextElements[0].appendChild(toastXml.createTextNode("wrap bold text"));
toastTextElements[1].appendChild(toastXml.createTextNode("text"));

XmlDocument toastXml = ToastNotificationManager.GetTemplateContent(ToastTemplateType.ToastImageAndText03);

XmlNodeList toastImageAttributes = toastXml.GetElementsByTagName("image");
((XmlElement)toastImageAttributes[0]).SetAttribute("src", "image.png");
((XmlElement)toastImageAttributes[0]).SetAttribute("alt", "alt text");

XmlNodeList toastTextAttributes = toastXml.GetElementsByTagName("text");
toastTextAttributes[0].InnerText = "bold text";
toastTextAttributes[1].InnerText = "text";

Push Notification

push.wns.sendToastImageAndText03(channel.uri, {
    image1src: 'image.png',
    image1alt: 'alt text',
    text1: 'bold text',
    text2: 'text'
});

ToastImageAndText04

An image, one string of bold text on the first line, one string of regular text on the second line, one string of regular text on the third line.

JavaScript

var template = notifications.ToastTemplateType.toastImageAndText04;
var toastXml = notifications.ToastNotificationManager.getTemplateContent(template);

var toastImageElements = toastXml.getElementsByTagName("image");
toastImageElements[0].setAttribute("src", "image.png");
toastImageElements[0].setAttribute("alt", "alt text");

var toastTextElements = toastXml.getElementsByTagName("text");
toastTextElements[0].appendChild(toastXml.createTextNode("wrap bold text"));
toastTextElements[1].appendChild(toastXml.createTextNode("text1"));
toastTextElements[2].appendChild(toastXml.createTextNode("text2"));

Push Notification

push.wns.sendToastImageAndText04(channel.uri, {
    image1src: 'image.png',
    image1alt: 'alt text',
    text1: 'bold text',
    text2: 'text1',
    text3: 'text2'
});

Windows Store App Tile Update Templates – Push Notifications

Peter Dwersteg — Thu, 07 Mar 2013 00:09:00 GMT

Background

There are a large number of templates available for you to use when updating the tile for your Windows Store App from a cloud service using the Windows Push Notification Service. This post contains information about every template you can use (name, picture, description), as well as cut-and-paste code to create the tile. All you need to do is fill in the information fields with whatever you want! In this case, the templates are written in JavaScript you can cut and paste into scripts in Azure Mobile Services.

Each template consists of a call to push.wns.sendTile*(channel, payload, options). For more information and an example of how to do this in the context of an app and cloud service, see the following Azure Mobile Services introduction, and the introduction to push notifications using Azure Mobile Services.

The Templates

TileSquareBlock

One short string of large block text over a single, short line of bold, regular text.

push.wns.sendTileSquareBlock(channel.uri, {
text1: 'block text',
text2: 'bold text'
});

TileSquareText01

One header string in larger text on the first line; three strings of regular text on each of the next three lines. Text does not wrap.

push.wns.sendTileSquareText01(channel.uri, {
    text1: 'header text',
    text2: 'text1',
    text3: 'text2',
    text4: 'text3'
});

TileSquareText02

One header string in larger text on the first line; three strings of regular text on each of the next three lines. Text does not wrap.

push.wns.sendTileSquareText02(channel.uri, {
text1: 'header text',
text2: 'wrap text'
});

TileSquareText03

Four strings of regular text on four lines. Text does not wrap.

push.wns.sendTileSquareText03(channel.uri, {
    text1: 'text1',
    text2: 'text2',
    text3: 'text3',
    text4: 'text4'
});

TileSquareText04

One string of regular text wrapped over a maximum of four lines.

push.wns.sendTileSquareText04(channel.uri, {
text1: 'wrap text'
});

TileSquareImage

One square image that fills the entire tile, no text.

push.wns.sendTileSquareImage(channel.uri, {
image1src: 'image.png',
image1alt: 'alt text'
});

TileSquarePeekImageAndText01

Top: One square image, no text. Bottom: One header string in larger text on the first line, three strings of regular text on each of the next three lines. Text does not wrap.

push.wns.sendTileSquarePeekImageAndText01(channel.uri, {
    image1src: 'image.png',
    image1alt: 'alt text',
    text1: 'header text',
    text2: 'text1',
    text3: 'text2',
    text4: 'text3'
});

TileSquarePeekImageAndText02

Top: Square image, no text. Bottom: One header string in larger text on the first line, over one string of regular text wrapped over a maximum of three lines.

push.wns.sendTileSquarePeekImageAndText02(channel.uri, {
    image1src: 'image.png',
    image1alt: 'alt text',
    text1: 'header text',
    text2: 'wrap text'
});

TileSquarePeekImageAndText03

Top: Square image, no text. Bottom: Four strings of regular text on four lines. Text does not wrap.

push.wns.sendTileSquarePeekImageAndText03(channel.uri, {
    image1src: 'image.png',
    image1alt: 'alt text',
    text1: 'text1',
    text2: 'text2',
    text3: 'text3',
    text4: 'text4'
});

TileSquarePeekImageAndText04

Top: Square image, no text. Bottom: One string of regular text wrapped over a maximum of four lines.

push.wns.sendTileSquarePeekImageAndText04(channel.uri, {
    image1src: 'image.png',
    image1alt: 'alt text',
    text1: 'wrap text'
});

TileWideText01

One header string in larger text on the first line, four strings of regular text on the next four lines. Text does not wrap.

push.wns.sendTileWideText01(channel.uri, {
    text1: 'header text',
    text2: 'text1',
    text3: 'text2',
    text4: 'text3',
    text5: 'text4'
});

TileWideText02

One header string in larger text over eight short strings arranged in two columns of four lines each. Columns are of equal width.

push.wns.sendTileWideText02(channel.uri, {
    text1: 'header text',
    text2: 'text1',
    text3: 'text2',
    text4: 'text3',
    text5: 'text4',
    text6: 'text5',
    text7: 'text6',
    text8: 'text7',
    text9: 'text8'
});

TileWideText03

One string of large text wrapped over a maximum of three lines.

push.wns.sendTileWideText03(channel.uri, {
text1: 'wrap text'
});

TileWideText04

One string of regular text wrapped over a maximum of five lines.

push.wns.sendTileWideText03(channel.uri, {
text1: 'wrap text'
});

TileWideText05

Five strings of regular text on five lines. Text does not wrap.

push.wns.sendTileWideText05(channel.uri, {
    text1: 'text1',
    text2: 'text2',
    text3: 'text3',
    text4: 'text4',
    text5: 'text5'
});

TileWideText06

Ten short strings of regular text, arranged in two columns of five lines each. Columns are of equal width.

push.wns.sendTileWideText06(channel.uri, {
    text1: 'text1',
    text2: 'text2',
    text3: 'text3',
    text4: 'text4',
    text5: 'text5',
    text6: 'text6',
    text7: 'text7',
    text8: 'text8',
    text9: 'text9',
    text10: 'text10'
});

TileWideText07

One header string in larger text over eight short strings of regular text arranged in two columns of four lines each. The column widths are such that the first column acts as a label and the second column as the content. This template is similar to TileWideText10, but the first column is wider.

push.wns.sendTileWideText07(channel.uri, {
    text1: 'header text',
    text2: 'label1',
    text3: 'text1',
    text4: 'label2',
    text5: 'text2',
    text6: 'label3',
    text7: 'text3',
    text8: 'label4',
    text9: 'text4'
});

TileWideText08

Ten short strings of regular text arranged in two columns of five lines each. The column widths are such that the first column acts as a label and the second column as the content. This template is similar to TileWideText11, but the first column is wider.

push.wns.sendTileWideText08(channel.uri, {
    text1: 'label1',
    text2: 'text1',
    text3: 'label2',
    text4: 'text2',
    text5: 'label3',
    text6: 'text3',
    text7: 'label4',
    text8: 'text4',
    text9: 'label5',
    text10: 'text5'
});

TileWideText09

One header string in larger text over one string of regular text wrapped over a maximum of four lines.

push.wns.sendTileWideText09(channel.uri, {
text1: 'header text',
text2: 'wrap text'
});

TileWideText10

push.wns.sendTileWideText10(channel.uri, {
    text1: 'header text',
    text2: 'label1',
    text3: 'text1',
    text4: 'label2',
    text5: 'text2',
    text6: 'label3',
    text7: 'text3',
    text8: 'label4',
    text9: 'text4'
});

TileWideText11

push.wns.sendTileWideText11(channel.uri, {
    text1: 'label1',
    text2: 'text1',
    text3: 'label2',
    text4: 'text2',
    text5: 'label3',
    text6: 'text3',
    text7: 'label4',
    text8: 'text4',
    text9: 'label5',
    text10: 'text5'
});

TileWideImage

One wide image that fills the entire tile, no text.

push.wns.sendTileWideImage(channel.uri, {
image1src: 'image.png',
image1alt: 'alt text'
});

TileWideImageCollection

One large square image with four smaller square images to its right, no text.

push.wns.sendTileWideImageCollection(channel.uri, {
    image1src: 'large image.png',
    image1alt: 'large alt text',
    image2src: 'image1.png',
    image2alt: 'alt text1',
    image3src: 'image2.png',
    image3alt: 'alt text2',
    image4src: 'image3.png',
    image4alt: 'alt text3',
    image5src: 'image4.png',
    image5alt: 'alt text4'
});

TileWideImageAndText01

One wide image over one string of regular text wrapped over a maximum of two lines.

push.wns.sendTileWideImageAndText01(channel.uri, {
    image1src: 'image.png',
    image1alt: 'alt text',
    text1: 'wrap text'
});

TileWideImageAndText02

One wide image over two strings of regular text on two lines. Text does not wrap.

push.wns.sendTileWideImageAndText02(channel.uri, {
    image1src: 'image.png',
    image1alt: 'alt text',
    text1: 'text1',
    text2: 'text2'
});

TileWideBlockAndText01

Four strings of regular, unwrapped text on the left; large block text over a single, short string of bold, regular text on the right.

push.wns.sendTileWideBlockAndText01(channel.uri, {
    text1: 'text1',
    text2: 'text2',
    text3: 'text3',
    text4: 'text4',
    text5: 'block text',
    text6: 'bold text'
});

TileWideBlockAndText02

One string of regular text wrapped over a maximum of four lines on the left; large block text over a single, short string of bold, regular text on the right.

push.wns.sendTileWideBlockAndText02(channel.uri, {
    text1: 'wrap text',
    text2: 'block text',
    text3: 'bold text'
});

TileWideSmallImageAndText01

On the left, one small image; on the right, one string of large text wrapped over a maximum of three lines.

push.wns.sendTileWideSmallImageAndText01(channel.uri, {
    image1src: 'image.png',
    image1alt: 'alt text',
    text1: 'wrap text'
});

TileWideSmallImageAndText02

On the left, one small image; on the right, one header string in larger text on the first line over four strings of regular text on the next four lines. Text does not wrap.

push.wns.sendTileWideSmallImageAndText02(channel.uri, {
    image1src: 'image.png',
    image1alt: 'alt text',
    text1: 'wrap text',
    text2: 'text1',
    text3: 'text2',
    text4: 'text3',
    text5: 'text4'
});

TileWideSmallImageAndText03

On the left, one small image; on the right, one string of regular text wrapped over a maximum of five lines.

push.wns.sendTileWideSmallImageAndText03(channel.uri, {
    image1src: 'image.png',
    image1alt: 'alt text',
    text1: 'wrap text'
});

TileWideSmallImageAndText04

On the left, one small image; on the right, one header string of larger text on the first line over one string of regular text wrapped over a maximum of four lines.

push.wns.sendTileWideSmallImageAndText04(channel.uri, {
    image1src: 'image.png',
    image1alt: 'alt text',
    text1: 'header text',
    text2: 'wrap text'
});

TileWideSmallImageAndText05

On the left, one header string in larger text over one string of regular text wrapped over a maximum of four lines; on the right, one small image with 3:4 dimensions.

push.wns.sendTileWideSmallImageAndText05(channel.uri, {
    image1src: 'image.png',
    image1alt: 'alt text',
    text1: 'header text',
    text2: 'wrap text'
});

TileWidePeekImageCollection01

Top: One large square image with four smaller square images to its right, no text. Bottom: One header string in larger text over one string of regular text wrapped over a maximum of four lines.

push.wns.sendTileWidePeekImageCollection01(channel.uri, {
    image1src: 'large image.png',
    image1alt: 'large alt text',
    image2src: 'image1.png',
    image1alt: 'alt text1',
    image3src: 'image2.png',
    image1alt: 'alt text2',
    image4src: 'image3.png',
    image1alt: 'alt text3',
    image5src: 'image4.png',
    image1alt: 'alt text4',
    text1: 'header text',
    text2: 'wrap text'
});

TileWidePeekImageCollection02

Top: One large square image with four smaller square images to its right, no text. Bottom: One header string in larger text on the first line, four strings of regular text on the next four lines. Text does not wrap.

push.wns.sendTileWidePeekImageCollection02(channel.uri, {
    image1src: 'large image.png',
    image1alt: 'large alt text',
    image2src: 'image1.png',
    image1alt: 'alt text1',
    image3src: 'image2.png',
    image1alt: 'alt text2',
    image4src: 'image3.png',
    image1alt: 'alt text3',
    image5src: 'image4.png',
    image1alt: 'alt text4',
    text1: 'header text',
    text2: 'text1',
    text3: 'text1',
    text4: 'text1',
    text5: 'text1'
});

TileWidePeekImageCollection03

Top: One large square image with four smaller square images to its right, no text. Bottom: One string of large text wrapped over a maximum of three lines.

push.wns.sendTileWidePeekImageCollection03(channel.uri, {
    image1src: 'large image.png',
    image1alt: 'large alt text',
    image2src: 'image1.png',
    image1alt: 'alt text1',
    image3src: 'image2.png',
    image1alt: 'alt text2',
    image4src: 'image3.png',
    image1alt: 'alt text3',
    image5src: 'image4.png',
    image1alt: 'alt text4',
    text1: 'wrap text'
});

TileWidePeekImageCollection04

Top: One large square image with four smaller square images to its right, no text. Bottom: One string of regular text wrapped over a maximum of five lines.

push.wns.sendTileWidePeekImageCollection04(channel.uri, {
    image1src: 'large image.png',
    image1alt: 'large alt text',
    image2src: 'image1.png',
    image1alt: 'alt text1',
    image3src: 'image2.png',
    image1alt: 'alt text2',
    image4src: 'image3.png',
    image1alt: 'alt text3',
    image5src: 'image4.png',
    image1alt: 'alt text4',
    text1: 'wrap text'
});

TileWidePeekImageCollection05

Top: One large square image with four smaller square images to its right, no text. Bottom: On the left, one small image; on the right, one header string of larger text on the first line over one string of regular text wrapped over a maximum of four lines.

push.wns.sendTileWidePeekImageCollection05(channel.uri, {
    image1src: 'large image.png',
    image1alt: 'large alt text',
    image2src: 'image1.png',
    image1alt: 'alt text1',
    image3src: 'image2.png',
    image1alt: 'alt text2',
    image4src: 'image3.png',
    image1alt: 'alt text3',
    image5src: 'image4.png',
    image1alt: 'alt text4',
    image6src: 'small image.png',
    image1alt: 'small alt text',
    text1: 'header text',
    text2: 'wrap text'
});

TileWidePeekImageCollection06

Top: One large square image with four smaller square images to its right, no text. Bottom: On the left, one small image; on the right, one string of large text wrapped over a maximum of three lines.

push.wns.sendTileWidePeekImageCollection06(channel.uri, {
    image1src: 'large image.png',
    image1alt: 'large alt text',
    image2src: 'image1.png',
    image1alt: 'alt text1',
    image3src: 'image2.png',
    image1alt: 'alt text2',
    image4src: 'image3.png',
    image1alt: 'alt text3',
    image5src: 'image4.png',
    image1alt: 'alt text4',
    image6src: 'small image.png',
    image1alt: 'small alt text',
    text1: 'wrap text'
});

TileWidePeekImageAndText01

Top: One wide image. Bottom: One string of regular text wrapped over a maximum of five lines.

push.wns.sendTileWidePeekImageAndText01(channel.uri, {
    image1src: 'image.png',
    image1alt: 'alt text',
    text1: 'wrap text'
});

TileWidePeekImageAndText02

Top: One wide image. Bottom: Five strings of regular text on five lines. Text does not wrap.

push.wns.sendTileWidePeekImageAndText02(channel.uri, {
    image1src: 'image.png',
    image1alt: 'alt text',
    text1: 'text1',
    text2: 'text2',
    text3: 'text3',
    text4: 'text4',
    text5: 'text5'
});

TileWidePeekImage01

Top: One wide image. Bottom: One header string in larger text over one string of regular text that wraps over a maximum of four lines.

push.wns.sendTileWidePeekImage01(channel.uri, {
    image1src: 'image.png',
    image1alt: 'alt text',
    text1: 'header text',
    text2: 'wrap text'
});

TileWidePeekImage02

Top: One wide image. Bottom: One header string in larger text on the first line, four strings of regular text on the next four lines. Text does not wrap.

push.wns.sendTileWidePeekImage02(channel.uri, {
    image1src: 'image.png',
    image1alt: 'alt text',
    text1: 'header text',
    text2: 'text1',
    text3: 'text2',
    text4: 'text3',
    text5: 'text4'
});

TileWidePeekImage03

Top: One wide image. Bottom: One string of large text wrapped over a maximum of three lines.

push.wns.sendTileWidePeekImage03(channel.uri, {
    image1src: 'image.png',
    image1alt: 'alt text',
    text1: 'wrap text'
});

TileWidePeekImage04

Top: One wide image. Bottom: One string of regular text wrapped over a maximum of five lines.

push.wns.sendTileWidePeekImage04(channel.uri, {
    image1src: 'image.png',
    image1alt: 'alt text',
    text1: 'wrap text'
});

TileWidePeekImage05

Top: One wide image. Bottom: On the left, one small image; on the right, one header string of larger text on the first line over one string of regular text wrapped over a maximum of four lines.

push.wns.sendTileWidePeekImage05(channel.uri, {
    image1src: 'image.png',
    image1alt: 'alt text',
    image2src: 'small image.png',
    image1alt: 'small alt text',
    text1: 'header text',
    text2: 'wrap text'
});

TileWidePeekImage06

Top: One wide image. Bottom: On the left, one small image; on the right, one string of large text wrapped over a maximum of three lines.

push.wns.sendTileWidePeekImage06(channel.uri, {
    image1src: 'image.png',
    image1alt: 'alt text',
    image2src: 'small image.png',
    image1alt: 'small alt text',
    text1: 'wrap text'
});

Windows Store App Tile Update Templates – JavaScript

Peter Dwersteg — Wed, 06 Mar 2013 23:16:00 GMT

Background

There are a large number of templates available for you to use when updating the tile for your Windows Store App. This post contains information about every template you can use (name, picture, description), as well as cut-and-paste code to create the tile. All you need to do is fill in the information fields with whatever you want!

Each template needs some additional code to actually update the tile, which is as follows. Simply place your desired template inside this code, replace the tile data, and you’re done!

var notifications = Windows.UI.Notifications;

/****************************
* Insert template code here
****************************/

var tileNotification = new notifications.TileNotification(tileXml);
notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);

For additional information, for example how to simultaneously update your tile with 1x1 and 2x1 live tiles, see the quickstart on sending tile updates.

The Templates

TileSquareBlock

One short string of large block text over a single, short line of bold, regular text.

var template = notifications.TileTemplateType.tileSquareBlock;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("block text"));
tileTextAttributes[1].appendChild(tileXml.createTextNode("bold text"));

TileSquareText01

One header string in larger text on the first line; three strings of regular text on each of the next three lines. Text does not wrap.

var template = notifications.TileTemplateType.tileSquareText01;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("large text"));
tileTextAttributes[1].appendChild(tileXml.createTextNode("text1"));
tileTextAttributes[2].appendChild(tileXml.createTextNode("text2"));
tileTextAttributes[3].appendChild(tileXml.createTextNode("text3"));

TileSquareText02

One header string in larger text on the first line; three strings of regular text on each of the next three lines. Text does not wrap.

var template = notifications.TileTemplateType.tileSquareText02;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("large text"));
tileTextAttributes[1].appendChild(tileXml.createTextNode("wrap text"));

TileSquareText03

Four strings of regular text on four lines. Text does not wrap.

var template = notifications.TileTemplateType.tileSquareText03;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("text1"));
tileTextAttributes[1].appendChild(tileXml.createTextNode("text2"));
tileTextAttributes[2].appendChild(tileXml.createTextNode("text3"));
tileTextAttributes[3].appendChild(tileXml.createTextNode("text4"));

TileSquareText04

One string of regular text wrapped over a maximum of four lines.

var template = notifications.TileTemplateType.tileSquareText04;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);
var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("wrap text"));

TileSquareImage

One square image that fills the entire tile, no text.

var template = notifications.TileTemplateType.tileSquareImage;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileImageAttributes = tileXml.getElementsByTagName("image");
tileImageAttributes[0].setAttribute("src", "image.png");
tileImageAttributes[0].setAttribute("alt", "alt text");

TileSquarePeekImageAndText01

Top: One square image, no text. Bottom: One header string in larger text on the first line, three strings of regular text on each of the next three lines. Text does not wrap.

var template = notifications.TileTemplateType.tileSquarePeekImageAndText01;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileImageAttributes = tileXml.getElementsByTagName("image");
tileImageAttributes[0].setAttribute("src", "image.png");
tileImageAttributes[0].setAttribute("alt", "alt text");

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("header text"));
tileTextAttributes[1].appendChild(tileXml.createTextNode("text1"));
tileTextAttributes[2].appendChild(tileXml.createTextNode("text2"));
tileTextAttributes[3].appendChild(tileXml.createTextNode("text3"));

TileSquarePeekImageAndText02

Top: Square image, no text. Bottom: One header string in larger text on the first line, over one string of regular text wrapped over a maximum of three lines.

var template = notifications.TileTemplateType.tileSquarePeekImageAndText02;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileImageAttributes = tileXml.getElementsByTagName("image");
tileImageAttributes[0].setAttribute("src", "image.png");
tileImageAttributes[0].setAttribute("alt", "alt text");

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("header text"));
tileTextAttributes[1].appendChild(tileXml.createTextNode("wrap text"));

TileSquarePeekImageAndText03

Top: Square image, no text. Bottom: Four strings of regular text on four lines. Text does not wrap.

var template = notifications.TileTemplateType.tileSquarePeekImageAndText03;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileImageAttributes = tileXml.getElementsByTagName("image");
tileImageAttributes[0].setAttribute("src", "image.png");
tileImageAttributes[0].setAttribute("alt", "alt text");

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("text1"));
tileTextAttributes[1].appendChild(tileXml.createTextNode("text2"));
tileTextAttributes[2].appendChild(tileXml.createTextNode("text3"));
tileTextAttributes[3].appendChild(tileXml.createTextNode("text4"));

TileSquarePeekImageAndText04

Top: Square image, no text. Bottom: One string of regular text wrapped over a maximum of four lines.

var template = notifications.TileTemplateType.tileSquarePeekImageAndText04;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileImageAttributes = tileXml.getElementsByTagName("image");
tileImageAttributes[0].setAttribute("src", "image.png");
tileImageAttributes[0].setAttribute("alt", "alt text");

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("wrap text"));

TileWideText01

One header string in larger text on the first line, four strings of regular text on the next four lines. Text does not wrap.

var template = notifications.TileTemplateType.tileWideText01;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("header text"));
tileTextAttributes[1].appendChild(tileXml.createTextNode("text1"));
tileTextAttributes[2].appendChild(tileXml.createTextNode("text2"));
tileTextAttributes[3].appendChild(tileXml.createTextNode("text3"));
tileTextAttributes[4].appendChild(tileXml.createTextNode("text4"));

TileWideText02

One header string in larger text over eight short strings arranged in two columns of four lines each. Columns are of equal width.

var template = notifications.TileTemplateType.tileWideText02;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("header text"));
tileTextAttributes[1].appendChild(tileXml.createTextNode("text1"));
tileTextAttributes[2].appendChild(tileXml.createTextNode("text2"));
tileTextAttributes[3].appendChild(tileXml.createTextNode("text3"));
tileTextAttributes[4].appendChild(tileXml.createTextNode("text4"));
tileTextAttributes[5].appendChild(tileXml.createTextNode("text5"));
tileTextAttributes[6].appendChild(tileXml.createTextNode("text6"));
tileTextAttributes[7].appendChild(tileXml.createTextNode("text7"));
tileTextAttributes[8].appendChild(tileXml.createTextNode("text8"));

TileWideText03

One string of large text wrapped over a maximum of three lines.

var template = notifications.TileTemplateType.tileWideText03;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("text"));

TileWideText04

One string of regular text wrapped over a maximum of five lines.

var template = notifications.TileTemplateType.tileWideText04;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("text"));

TileWideText05

Five strings of regular text on five lines. Text does not wrap.

var template = notifications.TileTemplateType.tileWideText05;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("text1"));
tileTextAttributes[1].appendChild(tileXml.createTextNode("text2"));
tileTextAttributes[2].appendChild(tileXml.createTextNode("text3"));
tileTextAttributes[3].appendChild(tileXml.createTextNode("text4"));
tileTextAttributes[4].appendChild(tileXml.createTextNode("text5"));

TileWideText06

Ten short strings of regular text, arranged in two columns of five lines each. Columns are of equal width.

var template = notifications.TileTemplateType.tileWideText06;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("text1"));
tileTextAttributes[1].appendChild(tileXml.createTextNode("text2"));
tileTextAttributes[2].appendChild(tileXml.createTextNode("text3"));
tileTextAttributes[3].appendChild(tileXml.createTextNode("text4"));
tileTextAttributes[4].appendChild(tileXml.createTextNode("text5"));
tileTextAttributes[5].appendChild(tileXml.createTextNode("text6"));
tileTextAttributes[6].appendChild(tileXml.createTextNode("text7"));
tileTextAttributes[7].appendChild(tileXml.createTextNode("text8"));
tileTextAttributes[8].appendChild(tileXml.createTextNode("text9"));
tileTextAttributes[9].appendChild(tileXml.createTextNode("text10"));

TileWideText07

var template = notifications.TileTemplateType.tileWideText07;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("header text"));
tileTextAttributes[1].appendChild(tileXml.createTextNode("label1"));
tileTextAttributes[2].appendChild(tileXml.createTextNode("text1"));
tileTextAttributes[3].appendChild(tileXml.createTextNode("label2"));
tileTextAttributes[4].appendChild(tileXml.createTextNode("text2"));
tileTextAttributes[5].appendChild(tileXml.createTextNode("label3"));
tileTextAttributes[6].appendChild(tileXml.createTextNode("text3"));
tileTextAttributes[7].appendChild(tileXml.createTextNode("label4"));
tileTextAttributes[8].appendChild(tileXml.createTextNode("text4"));

TileWideText08

var template = notifications.TileTemplateType.tileWideText08;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("label1"));
tileTextAttributes[1].appendChild(tileXml.createTextNode("text1"));
tileTextAttributes[2].appendChild(tileXml.createTextNode("label2"));
tileTextAttributes[3].appendChild(tileXml.createTextNode("text2"));
tileTextAttributes[4].appendChild(tileXml.createTextNode("label3"));
tileTextAttributes[5].appendChild(tileXml.createTextNode("text3"));
tileTextAttributes[6].appendChild(tileXml.createTextNode("label4"));
tileTextAttributes[7].appendChild(tileXml.createTextNode("text4"));
tileTextAttributes[8].appendChild(tileXml.createTextNode("label5"));
tileTextAttributes[9].appendChild(tileXml.createTextNode("text5"));

TileWideText09

One header string in larger text over one string of regular text wrapped over a maximum of four lines.

var template = notifications.TileTemplateType.tileWideText09;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("header text"));
tileTextAttributes[1].appendChild(tileXml.createTextNode("wrap text"));

TileWideText10

var template = notifications.TileTemplateType.tileWideText10;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("header text"));
tileTextAttributes[1].appendChild(tileXml.createTextNode("label1"));
tileTextAttributes[2].appendChild(tileXml.createTextNode("text1"));
tileTextAttributes[3].appendChild(tileXml.createTextNode("label2"));
tileTextAttributes[4].appendChild(tileXml.createTextNode("text2"));
tileTextAttributes[5].appendChild(tileXml.createTextNode("label3"));
tileTextAttributes[6].appendChild(tileXml.createTextNode("text3"));
tileTextAttributes[7].appendChild(tileXml.createTextNode("label4"));
tileTextAttributes[8].appendChild(tileXml.createTextNode("text4"));

TileWideText11

var template = notifications.TileTemplateType.tileWideText11;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("label1"));
tileTextAttributes[1].appendChild(tileXml.createTextNode("text1"));
tileTextAttributes[2].appendChild(tileXml.createTextNode("label2"));
tileTextAttributes[3].appendChild(tileXml.createTextNode("text2"));
tileTextAttributes[4].appendChild(tileXml.createTextNode("label3"));
tileTextAttributes[5].appendChild(tileXml.createTextNode("text3"));
tileTextAttributes[6].appendChild(tileXml.createTextNode("label4"));
tileTextAttributes[7].appendChild(tileXml.createTextNode("text4"));
tileTextAttributes[8].appendChild(tileXml.createTextNode("label5"));
tileTextAttributes[9].appendChild(tileXml.createTextNode("text5"));

TileWideImage

One wide image that fills the entire tile, no text.

var template = notifications.TileTemplateType.tileWideImage;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileImageAttributes = tileXml.getElementsByTagName("image");
tileImageAttributes[0].setAttribute("src", "image.png");
tileImageAttributes[0].setAttribute("alt", "alt text");

TileWideImageCollection

One large square image with four smaller square images to its right, no text.

var template = notifications.TileTemplateType.tileWideImageCollection;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileImageAttributes = tileXml.getElementsByTagName("image");
tileImageAttributes[0].setAttribute("src", "large image.png");
tileImageAttributes[0].setAttribute("alt", "large alt text");
tileImageAttributes[1].setAttribute("src", "image1.png");
tileImageAttributes[1].setAttribute("alt", "alt text1");
tileImageAttributes[2].setAttribute("src", "image2.png");
tileImageAttributes[2].setAttribute("alt", "alt text2");
tileImageAttributes[3].setAttribute("src", "image3.png");
tileImageAttributes[3].setAttribute("alt", "alt text3");
tileImageAttributes[4].setAttribute("src", "image4.png");
tileImageAttributes[4].setAttribute("alt", "alt text4");

TileWideImageAndText01

One wide image over one string of regular text wrapped over a maximum of two lines.

var template = notifications.TileTemplateType.tileWideImageAndText01;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileImageAttributes = tileXml.getElementsByTagName("image");
tileImageAttributes[0].setAttribute("src", "image.png");
tileImageAttributes[0].setAttribute("alt", "alt text");

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("text"));

TileWideImageAndText02

One wide image over two strings of regular text on two lines. Text does not wrap.

var template = notifications.TileTemplateType.tileWideImageAndText02;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileImageAttributes = tileXml.getElementsByTagName("image");
tileImageAttributes[0].setAttribute("src", "image.png");
tileImageAttributes[0].setAttribute("alt", "alt text");

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("text1"));
tileTextAttributes[1].appendChild(tileXml.createTextNode("text2"));

TileWideBlockAndText01

Four strings of regular, unwrapped text on the left; large block text over a single, short string of bold, regular text on the right.

var template = notifications.TileTemplateType.tileWideBlockAndText01;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("text1"));
tileTextAttributes[1].appendChild(tileXml.createTextNode("text2"));
tileTextAttributes[2].appendChild(tileXml.createTextNode("text3"));
tileTextAttributes[3].appendChild(tileXml.createTextNode("text4"));
tileTextAttributes[4].appendChild(tileXml.createTextNode("block text"));
tileTextAttributes[5].appendChild(tileXml.createTextNode("bold text"));

TileWideBlockAndText02

One string of regular text wrapped over a maximum of four lines on the left; large block text over a single, short string of bold, regular text on the right.

var template = notifications.TileTemplateType.tileWideBlockAndText02;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("wrap text"));
tileTextAttributes[1].appendChild(tileXml.createTextNode("block text"));
tileTextAttributes[2].appendChild(tileXml.createTextNode("bold text"));

TileWideSmallImageAndText01

On the left, one small image; on the right, one string of large text wrapped over a maximum of three lines.

var template = notifications.TileTemplateType.tileWideSmallImageAndText01;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileImageAttributes = tileXml.getElementsByTagName("image");
tileImageAttributes[0].setAttribute("src", "image.png");
tileImageAttributes[0].setAttribute("alt", "alt text");

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("wrap text"));

TileWideSmallImageAndText02

On the left, one small image; on the right, one header string in larger text on the first line over four strings of regular text on the next four lines. Text does not wrap.

var template = notifications.TileTemplateType.tileWideSmallImageAndText02;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileImageAttributes = tileXml.getElementsByTagName("image");
tileImageAttributes[0].setAttribute("src", "image.png");
tileImageAttributes[0].setAttribute("alt", "alt text");

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("header text"));
tileTextAttributes[1].appendChild(tileXml.createTextNode("text1"));
tileTextAttributes[2].appendChild(tileXml.createTextNode("text2"));
tileTextAttributes[3].appendChild(tileXml.createTextNode("text3"));
tileTextAttributes[4].appendChild(tileXml.createTextNode("text4"));

TileWideSmallImageAndText03

On the left, one small image; on the right, one string of regular text wrapped over a maximum of five lines.

var template = notifications.TileTemplateType.tileWideSmallImageAndText03;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileImageAttributes = tileXml.getElementsByTagName("image");
tileImageAttributes[0].setAttribute("src", "image.png");
tileImageAttributes[0].setAttribute("alt", "alt text");

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("wrap text"));

TileWideSmallImageAndText04

On the left, one small image; on the right, one header string of larger text on the first line over one string of regular text wrapped over a maximum of four lines.

var template = notifications.TileTemplateType.tileWideSmallImageAndText04;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileImageAttributes = tileXml.getElementsByTagName("image");
tileImageAttributes[0].setAttribute("src", "image.png");
tileImageAttributes[0].setAttribute("alt", "alt text");

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("header text"));
tileTextAttributes[1].appendChild(tileXml.createTextNode("wrap text"));

TileWideSmallImageAndText05

On the left, one header string in larger text over one string of regular text wrapped over a maximum of four lines; on the right, one small image with 3:4 dimensions.

var template = notifications.TileTemplateType.tileWideSmallImageAndText05;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileImageAttributes = tileXml.getElementsByTagName("image");
tileImageAttributes[0].setAttribute("src", "image.png");
tileImageAttributes[0].setAttribute("alt", "alt text");

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("header text"));
tileTextAttributes[1].appendChild(tileXml.createTextNode("wrap text"));

TileWidePeekImageCollection01

Top: One large square image with four smaller square images to its right, no text. Bottom: One header string in larger text over one string of regular text wrapped over a maximum of four lines.

var template = notifications.TileTemplateType.tileWidePeekImageCollection01;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileImageAttributes = tileXml.getElementsByTagName("image");
tileImageAttributes[0].setAttribute("src", "large image.png");
tileImageAttributes[0].setAttribute("alt", "large alt text");
tileImageAttributes[1].setAttribute("src", "image1.png");
tileImageAttributes[1].setAttribute("alt", "alt text1");
tileImageAttributes[2].setAttribute("src", "image2.png");
tileImageAttributes[2].setAttribute("alt", "alt text2");
tileImageAttributes[3].setAttribute("src", "image3.png");
tileImageAttributes[3].setAttribute("alt", "alt text3");
tileImageAttributes[4].setAttribute("src", "image4.png");
tileImageAttributes[4].setAttribute("alt", "alt text4");

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("header text"));
tileTextAttributes[1].appendChild(tileXml.createTextNode("wrap text"));

TileWidePeekImageCollection02

var template = notifications.TileTemplateType.tileWidePeekImageCollection02;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileImageAttributes = tileXml.getElementsByTagName("image");
tileImageAttributes[0].setAttribute("src", "large image.png");
tileImageAttributes[0].setAttribute("alt", "large alt text");
tileImageAttributes[1].setAttribute("src", "image1.png");
tileImageAttributes[1].setAttribute("alt", "alt text1");
tileImageAttributes[2].setAttribute("src", "image2.png");
tileImageAttributes[2].setAttribute("alt", "alt text2");
tileImageAttributes[3].setAttribute("src", "image3.png");
tileImageAttributes[3].setAttribute("alt", "alt text3");
tileImageAttributes[4].setAttribute("src", "image4.png");
tileImageAttributes[4].setAttribute("alt", "alt text4");

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("header text"));
tileTextAttributes[1].appendChild(tileXml.createTextNode("text1"));
tileTextAttributes[2].appendChild(tileXml.createTextNode("text2"));
tileTextAttributes[3].appendChild(tileXml.createTextNode("text3"));
tileTextAttributes[4].appendChild(tileXml.createTextNode("text4"));

TileWidePeekImageCollection03

Top: One large square image with four smaller square images to its right, no text. Bottom: One string of large text wrapped over a maximum of three lines.

var template = notifications.TileTemplateType.tileWidePeekImageCollection03;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileImageAttributes = tileXml.getElementsByTagName("image");
tileImageAttributes[0].setAttribute("src", "large image.png");
tileImageAttributes[0].setAttribute("alt", "large alt text");
tileImageAttributes[1].setAttribute("src", "image1.png");
tileImageAttributes[1].setAttribute("alt", "alt text1");
tileImageAttributes[2].setAttribute("src", "image2.png");
tileImageAttributes[2].setAttribute("alt", "alt text2");
tileImageAttributes[3].setAttribute("src", "image3.png");
tileImageAttributes[3].setAttribute("alt", "alt text3");
tileImageAttributes[4].setAttribute("src", "image4.png");
tileImageAttributes[4].setAttribute("alt", "alt text4");

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("wrap text"));

TileWidePeekImageCollection04

Top: One large square image with four smaller square images to its right, no text. Bottom: One string of regular text wrapped over a maximum of five lines.

var tileImageAttributes = tileXml.getElementsByTagName("image");
tileImageAttributes[0].setAttribute("src", "large image.png");
tileImageAttributes[0].setAttribute("alt", "large alt text");
tileImageAttributes[1].setAttribute("src", "image1.png");
tileImageAttributes[1].setAttribute("alt", "alt text1");
tileImageAttributes[2].setAttribute("src", "image2.png");
tileImageAttributes[2].setAttribute("alt", "alt text2");
tileImageAttributes[3].setAttribute("src", "image3.png");
tileImageAttributes[3].setAttribute("alt", "alt text3");
tileImageAttributes[4].setAttribute("src", "image4.png");
tileImageAttributes[4].setAttribute("alt", "alt text4");

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("wrap text"));

TileWidePeekImageCollection05

var template = notifications.TileTemplateType.tileWidePeekImageCollection05;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileImageAttributes = tileXml.getElementsByTagName("image");
tileImageAttributes[0].setAttribute("src", "large image.png");
tileImageAttributes[0].setAttribute("alt", "large alt text");
tileImageAttributes[1].setAttribute("src", "image1.png");
tileImageAttributes[1].setAttribute("alt", "alt text1");
tileImageAttributes[2].setAttribute("src", "image2.png");
tileImageAttributes[2].setAttribute("alt", "alt text2");
tileImageAttributes[3].setAttribute("src", "image3.png");
tileImageAttributes[3].setAttribute("alt", "alt text3");
tileImageAttributes[4].setAttribute("src", "image4.png");
tileImageAttributes[4].setAttribute("alt", "alt text4");
tileImageAttributes[5].setAttribute("src", "small image.png");
tileImageAttributes[5].setAttribute("alt", "small alt text");

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("header text"));
tileTextAttributes[1].appendChild(tileXml.createTextNode("wrap text"));

TileWidePeekImageCollection06

Top: One large square image with four smaller square images to its right, no text. Bottom: On the left, one small image; on the right, one string of large text wrapped over a maximum of three lines.

var template = notifications.TileTemplateType.tileWidePeekImageCollection06;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileImageAttributes = tileXml.getElementsByTagName("image");
tileImageAttributes[0].setAttribute("src", "large image.png");
tileImageAttributes[0].setAttribute("alt", "large alt text");
tileImageAttributes[1].setAttribute("src", "image1.png");
tileImageAttributes[1].setAttribute("alt", "alt text1");
tileImageAttributes[2].setAttribute("src", "image2.png");
tileImageAttributes[2].setAttribute("alt", "alt text2");
tileImageAttributes[3].setAttribute("src", "image3.png");
tileImageAttributes[3].setAttribute("alt", "alt text3");
tileImageAttributes[4].setAttribute("src", "image4.png");
tileImageAttributes[4].setAttribute("alt", "alt text4");
tileImageAttributes[5].setAttribute("src", "small image.png");
tileImageAttributes[5].setAttribute("alt", "small alt text");

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("wrap text"));

TileWidePeekImageAndText01

Top: One wide image. Bottom: One string of regular text wrapped over a maximum of five lines.

var template = notifications.TileTemplateType.tileWidePeekImageAndText01;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileImageAttributes = tileXml.getElementsByTagName("image");
tileImageAttributes[0].setAttribute("src", "image.png");
tileImageAttributes[0].setAttribute("alt", "alt text");

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("wrap text"));

TileWidePeekImageAndText02

Top: One wide image. Bottom: Five strings of regular text on five lines. Text does not wrap.

var template = notifications.TileTemplateType.tileWidePeekImageAndText02;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileImageAttributes = tileXml.getElementsByTagName("image");
tileImageAttributes[0].setAttribute("src", "image.png");
tileImageAttributes[0].setAttribute("alt", "alt text");

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("text1"));
tileTextAttributes[1].appendChild(tileXml.createTextNode("text2"));
tileTextAttributes[2].appendChild(tileXml.createTextNode("text3"));
tileTextAttributes[3].appendChild(tileXml.createTextNode("text4"));
tileTextAttributes[4].appendChild(tileXml.createTextNode("text5"));

TileWidePeekImage01

Top: One wide image. Bottom: One header string in larger text over one string of regular text that wraps over a maximum of four lines.

var template = notifications.TileTemplateType.tileWidePeekImage01;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileImageAttributes = tileXml.getElementsByTagName("image");
tileImageAttributes[0].setAttribute("src", "image.png");
tileImageAttributes[0].setAttribute("alt", "alt text");

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("header text"));
tileTextAttributes[1].appendChild(tileXml.createTextNode("wrap text"));

TileWidePeekImage02

Top: One wide image. Bottom: One header string in larger text on the first line, four strings of regular text on the next four lines. Text does not wrap.

var template = notifications.TileTemplateType.tileWidePeekImage02;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileImageAttributes = tileXml.getElementsByTagName("image");
tileImageAttributes[0].setAttribute("src", "image.png");
tileImageAttributes[0].setAttribute("alt", "alt text");

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("header text"));
tileTextAttributes[1].appendChild(tileXml.createTextNode("text1"));
tileTextAttributes[2].appendChild(tileXml.createTextNode("text2"));
tileTextAttributes[3].appendChild(tileXml.createTextNode("text3"));
tileTextAttributes[4].appendChild(tileXml.createTextNode("text4"));

TileWidePeekImage03

Top: One wide image. Bottom: One string of large text wrapped over a maximum of three lines.

var template = notifications.TileTemplateType.tileWidePeekImage03;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileImageAttributes = tileXml.getElementsByTagName("image");
tileImageAttributes[0].setAttribute("src", "image.png");
tileImageAttributes[0].setAttribute("alt", "alt text");

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("wrap text"));

TileWidePeekImage04

Top: One wide image. Bottom: One string of regular text wrapped over a maximum of five lines.

var template = notifications.TileTemplateType.tileWidePeekImage04;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileImageAttributes = tileXml.getElementsByTagName("image");
tileImageAttributes[0].setAttribute("src", "image.png");
tileImageAttributes[0].setAttribute("alt", "alt text");

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("wrap text"));

TileWidePeekImage05

Top: One wide image. Bottom: On the left, one small image; on the right, one header string of larger text on the first line over one string of regular text wrapped over a maximum of four lines.

var template = notifications.TileTemplateType.tileWidePeekImage05;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileImageAttributes = tileXml.getElementsByTagName("image");
tileImageAttributes[0].setAttribute("src", "image.png");
tileImageAttributes[0].setAttribute("alt", "alt text");
tileImageAttributes[1].setAttribute("src", "small image.png");
tileImageAttributes[1].setAttribute("alt", "small alt text");

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("header text"));
tileTextAttributes[1].appendChild(tileXml.createTextNode("wrap text"));

TileWidePeekImage06

Top: One wide image. Bottom: On the left, one small image; on the right, one string of large text wrapped over a maximum of three lines.

var template = notifications.TileTemplateType.tileWidePeekImage06;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileImageAttributes = tileXml.getElementsByTagName("image");
tileImageAttributes[0].setAttribute("src", "image.png");
tileImageAttributes[0].setAttribute("alt", "alt text");
tileImageAttributes[1].setAttribute("src", "small image.png");
tileImageAttributes[1].setAttribute("alt", "small alt text");

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("wrap text"));

Windows Store App Tile Update Templates – C#

Peter Dwersteg — Tue, 05 Mar 2013 23:56:07 GMT

Background

using Windows.UI.Notifications;
using Windows.Data.Xml.Dom;

/*****************************
* Insert template code here
****************************/

TileNotification tileNotification = new TileNotification(tileXml);
tileNotification.CreateTileUpdaterForApplication().Update(tileNotification);

For additional information, for example how to simultaneously update your tile with 1x1 and 2x1 live tiles, see the quickstart on sending tile updates.

The Templates

TileSquareBlock

One short string of large block text over a single, short line of bold, regular text.

XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareBlock);

XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");
tileTextAttributes[0].InnerText = "block text";
tileTextAttributes[1].InnerText = "bold text";

TileSquareText01

One header string in larger text on the first line; three strings of regular text on each of the next three lines. Text does not wrap.

XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareText01);

XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");
tileTextAttributes[0].InnerText = "header text";
tileTextAttributes[1].InnerText = "text1";
tileTextAttributes[2].InnerText = "text2";
tileTextAttributes[3].InnerText = "text3";

TileSquareText02

One header string in larger text on the first line; three strings of regular text on each of the next three lines. Text does not wrap.

XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareText02);

XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");
tileTextAttributes[0].InnerText = "big text";
tileTextAttributes[1].InnerText = "wrap text";

TileSquareText03

Four strings of regular text on four lines. Text does not wrap.

XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareText03);

XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");
tileTextAttributes[0].InnerText = "text1";
tileTextAttributes[1].InnerText = "text2";
tileTextAttributes[2].InnerText = "text3";
tileTextAttributes[3].InnerText = "text4";

TileSquareText04

One string of regular text wrapped over a maximum of four lines.

XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareText04);

XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");
tileTextAttributes[0].InnerText = "wrap text";

TileSquareImage

One square image that fills the entire tile, no text.

XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareImage);

XmlNodeList tileImageAttributes = tileXml.GetElementsByTagName("image");
((XmlElement)tileImageAttributes[0]).SetAttribute("src", "image.png");
((XmlElement)tileImageAttributes[0]).SetAttribute("alt", "alt text");

TileSquarePeekImageAndText01

Top: One square image, no text. Bottom: One header string in larger text on the first line, three strings of regular text on each of the next three lines. Text does not wrap.

XmlDocument tileXml = XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquarePeekImageAndText02);

XmlNodeList tileImageAttributes = tileXml.GetElementsByTagName("image");
((XmlElement)tileImageAttributes[0]).SetAttribute("src", "image.png");
((XmlElement)tileImageAttributes[0]).SetAttribute("alt", "alt text");

XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");
tileTextAttributes[0].InnerText = "header text";
tileTextAttributes[1].InnerText = "text1";
tileTextAttributes[2].InnerText = "text2";
tileTextAttributes[3].InnerText = "text3";

TileSquarePeekImageAndText02

Top: Square image, no text. Bottom: One header string in larger text on the first line, over one string of regular text wrapped over a maximum of three lines.

XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquarePeekImageAndText02);

XmlNodeList tileImageAttributes = tileXml.GetElementsByTagName("image");
((XmlElement)tileImageAttributes[0]).SetAttribute("src", "image.png");
((XmlElement)tileImageAttributes[0]).SetAttribute("alt", "alt text");

XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");
tileTextAttributes[0].InnerText = "header text";
tileTextAttributes[1].InnerText = "wrap text";

TileSquarePeekImageAndText03

Top: Square image, no text. Bottom: Four strings of regular text on four lines. Text does not wrap.

XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquarePeekImageAndText03);

XmlNodeList tileImageAttributes = tileXml.GetElementsByTagName("image");
((XmlElement)tileImageAttributes[0]).SetAttribute("src", "image.png");
((XmlElement)tileImageAttributes[0]).SetAttribute("alt", "alt text");

XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");
tileTextAttributes[0].InnerText = "text1";
tileTextAttributes[1].InnerText = "text2";
tileTextAttributes[2].InnerText = "text3";
tileTextAttributes[3].InnerText = "text4";

TileSquarePeekImageAndText04

Top: Square image, no text. Bottom: One string of regular text wrapped over a maximum of four lines.

XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquarePeekImageAndText04);

XmlNodeList tileImageAttributes = tileXml.GetElementsByTagName("image");
((XmlElement)tileImageAttributes[0]).SetAttribute("src", "image.png");
((XmlElement)tileImageAttributes[0]).SetAttribute("alt", "alt text");

XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");
tileTextAttributes[0].InnerText = "wrap text";

TileWideText01

One header string in larger text on the first line, four strings of regular text on the next four lines. Text does not wrap.

XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText01);

XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");
tileTextAttributes[0].InnerText = "header text";
tileTextAttributes[1].InnerText = "text1";
tileTextAttributes[2].InnerText = "text2";
tileTextAttributes[3].InnerText = "text3";
tileTextAttributes[4].InnerText = "text4";

TileWideText02

One header string in larger text over eight short strings arranged in two columns of four lines each. Columns are of equal width.

XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText02);

XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");
tileTextAttributes[0].InnerText = "header text";
tileTextAttributes[1].InnerText = "text1";
tileTextAttributes[2].InnerText = "text2";
tileTextAttributes[3].InnerText = "text3";
tileTextAttributes[4].InnerText = "text4";
tileTextAttributes[5].InnerText = "text5";
tileTextAttributes[6].InnerText = "text6";
tileTextAttributes[7].InnerText = "text7";
tileTextAttributes[8].InnerText = "text8";

TileWideText03

One string of large text wrapped over a maximum of three lines.

XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText03);

XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");
tileTextAttributes[0].InnerText = "text";

TileWideText04

One string of regular text wrapped over a maximum of five lines.

XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText04);

XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");
tileTextAttributes[0].InnerText = "text";

TileWideText05

Five strings of regular text on five lines. Text does not wrap.

XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText05);

XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");
tileTextAttributes[0].InnerText = "text1";
tileTextAttributes[1].InnerText = "text2";
tileTextAttributes[2].InnerText = "text3";
tileTextAttributes[3].InnerText = "text4";
tileTextAttributes[4].InnerText = "text5";

TileWideText06

Ten short strings of regular text, arranged in two columns of five lines each. Columns are of equal width.

XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText06);

XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");
tileTextAttributes[0].InnerText = "text1";
tileTextAttributes[1].InnerText = "text2";
tileTextAttributes[2].InnerText = "text3";
tileTextAttributes[3].InnerText = "text4";
tileTextAttributes[4].InnerText = "text5";
tileTextAttributes[5].InnerText = "text6";
tileTextAttributes[6].InnerText = "text7";
tileTextAttributes[7].InnerText = "text8";
tileTextAttributes[8].InnerText = "text9";
tileTextAttributes[9].InnerText = "text10";

TileWideText07

XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText07);

XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");
tileTextAttributes[0].InnerText = "header text";
tileTextAttributes[1].InnerText = "label1";
tileTextAttributes[2].InnerText = "text1";
tileTextAttributes[3].InnerText = "label2";
tileTextAttributes[4].InnerText = "text2";
tileTextAttributes[5].InnerText = "label3";
tileTextAttributes[6].InnerText = "text3";
tileTextAttributes[7].InnerText = "label4";
tileTextAttributes[8].InnerText = "text4";

TileWideText08

XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText08);

XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");
tileTextAttributes[0].InnerText = "label1";
tileTextAttributes[1].InnerText = "text1";
tileTextAttributes[2].InnerText = "label2";
tileTextAttributes[3].InnerText = "text2";
tileTextAttributes[4].InnerText = "label3";
tileTextAttributes[5].InnerText = "text3";
tileTextAttributes[6].InnerText = "label4";
tileTextAttributes[7].InnerText = "text4";
tileTextAttributes[8].InnerText = "label5";
tileTextAttributes[9].InnerText = "text5";

TileWideText09

One header string in larger text over one string of regular text wrapped over a maximum of four lines.

XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText09);

XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");
tileTextAttributes[0].InnerText = "header text";
tileTextAttributes[1].InnerText = "wrap text";

TileWideText10

XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText10);

XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");
tileTextAttributes[0].InnerText = "header text";
tileTextAttributes[1].InnerText = "label1";
tileTextAttributes[2].InnerText = "text1";
tileTextAttributes[3].InnerText = "label2";
tileTextAttributes[4].InnerText = "text2";
tileTextAttributes[5].InnerText = "label3";
tileTextAttributes[6].InnerText = "text3";
tileTextAttributes[7].InnerText = "label4";
tileTextAttributes[8].InnerText = "text4";

TileWideText11

XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText11);

XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");
tileTextAttributes[0].InnerText = "label1";
tileTextAttributes[1].InnerText = "text1";
tileTextAttributes[2].InnerText = "label2";
tileTextAttributes[3].InnerText = "text2";
tileTextAttributes[4].InnerText = "label3";
tileTextAttributes[5].InnerText = "text3";
tileTextAttributes[6].InnerText = "label4";
tileTextAttributes[7].InnerText = "text4";
tileTextAttributes[8].InnerText = "label5";
tileTextAttributes[9].InnerText = "text5";

TileWideImage

One wide image that fills the entire tile, no text.

XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideImage);

XmlNodeList tileImageAttributes = tileXml.GetElementsByTagName("image");
((XmlElement)tileImageAttributes[0]).SetAttribute("src", "image.png");

TileWideImageCollection

One large square image with four smaller square images to its right, no text.

XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideImageCollection);

XmlNodeList tileImageAttributes = tileXml.GetElementsByTagName("image");
((XmlElement)tileImageAttributes[0]).SetAttribute("src", "large image.png");
((XmlElement)tileImageAttributes[0]).SetAttribute("alt", "large alt text");
((XmlElement)tileImageAttributes[1]).SetAttribute("src", "image1.png");
((XmlElement)tileImageAttributes[1]).SetAttribute("alt", "alt text1");
((XmlElement)tileImageAttributes[2]).SetAttribute("src", "image2.png");
((XmlElement)tileImageAttributes[2]).SetAttribute("alt", "alt text2");
((XmlElement)tileImageAttributes[3]).SetAttribute("src", "image3.png");
((XmlElement)tileImageAttributes[3]).SetAttribute("alt", "alt text3");
((XmlElement)tileImageAttributes[4]).SetAttribute("src", "image4.png");
((XmlElement)tileImageAttributes[4]).SetAttribute("alt", "alt text4");

TileWideImageAndText01

One wide image over one string of regular text wrapped over a maximum of two lines.

XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideImageAndText01);

XmlNodeList tileImageAttributes = tileXml.GetElementsByTagName("image");
((XmlElement)tileImageAttributes[0]).SetAttribute("src", "image.png");
((XmlElement)tileImageAttributes[0]).SetAttribute("alt", "alt text");

XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");
tileTextAttributes[0].InnerText = "Text";

AR.Drone 2.0 API for Windows Store Apps

Peter Dwersteg — Fri, 25 Jan 2013 05:15:00 GMT

About the Project

The Parrot AR.Drone 2.0 is an awesome device packed with cool features. The drone contains two cameras, one pointed forward that streams live video, and one pointed downwards (for all your surveillance needs). Its got four powerful engines that make it fast and maneuverable. The drone’s firmware keeps it stable and level while stationary or performing maneuvers, handling a huge burden for the user. It’s a fun device to write code for, and even more fun to pilot when you’re done!

There’s a few projects that have created AR.Drone APIs that can be used for Windows 8 Desktop Apps. However, I wanted to fly my drone from a Windows Store App, so I decided to build my own API compatible with WinRT. DIY.

Get Flying!

The code and an example app is available at CodePlex here: https://windowsdrone.codeplex.com.

I developed this project in association with the wonderful folks over at Coding4Fun, and the full article and API documentation is available at their site here: http://channel9.msdn.com/coding4fun/articles/Flying-the-ARDrone-20-with-Windows-Store-Applications.

Have fun, get yourself flying, and get back to me with what you think!

Redefining the App Bar

Peter Dwersteg — Mon, 22 Oct 2012 22:10:00 GMT

One of the coolest things about developing Windows Store Apps is the number of powerful features you can add to your App with just a small amount of programming overhead. One of these features is the app bar, an introduction to which can be found here: http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh781232.aspx. Usually, the app bar contains UI functionality that doesn’t need to be displayed the entire time (for example, think about a button that provides a hint in a game or allows you to edit the contents of a TextBox).

But don’t let your plans for the app bar end at a few buttons, there’s so much potential to use it in other ways! In this post, I’m going to go through some code for a Windows Store App that makes unconventional use of the app bar.

The Set-Up

I’ve been hearing the phrase “Content is King” quite a bit lately, and it’s true in many applications. The most important content should be the most prominent in the App. Imagine that a travel/adventure agency has an App they use to show customers trip package options. The customer should be able to access a trip’s description and price, but a picture will have much more impact, so it should be as large and unobstructed as possible.

The App is based off of the standard GridView App template, and the ItemViewPage consists of a full-screen picture. I could display the picture, description and price all at once, but I don’t want to lessen the effect of the image by making it smaller or having text permanently laid over it. Placing the project information in the app bar would allow the user to access and dismiss it easily and naturally, preserving the picture’s size and clarity.

Displaying Information

I want to display a description and price in the App Bar, so all I have to do is add an app bar to my page, and place the content inside it.

<Page.BottomAppBar>
<AppBar x:Name="bottomAppBar" Height="200" Opened="AppBarOpened" BorderBrush="Transparent" Background="#DD333333">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel x:Name="infoStack" Grid.Column="0" Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="20,0,0,0">
<TextBlock x:Name="infoHeader" FontSize="30" HorizontalAlignment="Left" Text="Description"/>
<TextBlock x:Name="infoText" Style="{StaticResource infoTextStyle}" TextWrapping="Wrap"/>
</StackPanel>
<StackPanel x:Name="priceInfo" Grid.Column="1" Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBlock x:Name="priceHeader" FontSize="30" Text="Cost"/>
<TextBlock x:Name="price" Style="{StaticResource infoTextStyle}" Grid.Column="3"/>
</StackPanel>
</Grid>
</AppBar>
</Page.BottomAppBar>

However, as I flip from item to item inside the FlipView, I want the information inside my app bar to update accordingly. The next step, then, is combining the app bar with a data-bound control.

Data-Bound Controls

I’ve bound the FlipView in the item detail page to the Items in the selected group, and I’ve created an ItemTemplate that contains an Image XAML control bound to the Image property of the currently selected item. As I flip through each item in the FlipView, the image will update. Unfortunately, I can’t bind the description and price inside the app bar in the same way, so that information won’t change as I flip from picture to picture.

I can easily work around this blockage by manually updating the information every time the user flips to a new item. Luckily, FlipView has the SelectionChanged event, which fires each time the item is changed. First, I need to register the ChangeInfoPanel method as the handler for the SelectionChanged event:

<FlipView
x:Name="flipView"
AutomationProperties.AutomationId="ItemsFlipView"
AutomationProperties.Name="Item Details"
Grid.RowSpan="2"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
SelectionChanged="ChangeInfoPanel">
...
</FlipView>

Then I need to implement ChangeInfoPanel to update the contents of the app bar using information from the SelectedItem property of the FlipView:

private void ChangeInfoPanel(object sender, SelectionChangedEventArgs e)
{
SetInfoPanel();
}
private void SetInfoPanel()
{
var item = this.flipView.SelectedItem as SampleDataItem;
pageTitle.Text = item.Group.Title;
infoHeader.Text = item.Title;
infoText.Text = item.Description;
price.Text = item.Price;
}

Now every time I change the item in the FlipView, the information displayed in the app bar will update to match. However, there’s one more step I need to take to address the edge case of when the app bar is opened if the user hasn’t yet changed the selection. To solve this problem, I’ll update the contents every time the app bar is opened by registering a handler for the AppBarOpened event:

<Page.BottomAppBar>
<AppBar x:Name="bottomAppBar" Height="200" Opened="AppBarOpened">
...
</AppBar>>
</Page.BottomAppBar>

private void AppBarOpened(object sender, object e)
{
SetInfoPanel();
}

The app bar will now always display the correct information no matter what the user is looking at or at what point they decide to open it. However, I still need to make a few aesthetic changes to make my app bar a quality feature.

Appearance

An app bar can be closed by making the same motion used to open it, or by touching any part of the screen it doesn’t occupy. This means that in my App, the app bar closes whenever the user flips to a new item. I only want it to close when the user makes the appropriate gesture. To fix this, all I have to do is set the app bar’s IsSticky property to true.

Finally, I want to change the color and opacity of the app bar so that while its text is clearly visible over any image, it doesn’t completely obscure the picture behind it. White text shows up well over a dark gray background, so I’ll use the color with the hex code “#333333”. I can then set the opacity of the background by adding a prefix to this code. The opacity is represented by a two-digit hex number in the range “00” to “FF” (clear and opaque respectively). For example, a clear background would have the code “#00333333”, while “#FF333333” would make it solid. I want my app bar to be dark, but not completely opaque, so I need to set the background to be “#DD333333”.

After these two changes, the code looks like this:

<Page.BottomAppBar>
<AppBar x:Name="bottomAppBar" Height="200" Opened="AppBarOpened" Background="DD333333">
...
</AppBar>>
</Page.BottomAppBar>

Now my app bar looks and behaves exactly how I want it to. It updates itself to always provide the correct information, and is visually compelling. With a few relatively simple modifications, I’ve redefined what the app bar can be to something that suits my needs perfectly!

UDP and Windows 8 apps

Peter Dwersteg — Thu, 06 Sep 2012 21:50:00 GMT

The Windows 8 app I’m currently working on requires me to send some data over a wireless network using UDP. This is usually done by using the Socket class contained in the System.Net.Sockets namespace. However, this isn’t supported in Windows RT, which replaces the behavior of Socket with several equivalent classes. The class used for UDP is DatagramSocket. While the code using DatagramSocket is relatively short and simple, there are some intricacies involved in getting it to function properly, so in this post I’ll make things simpler by providing a working example.

At a conceptual level, the steps required to open a UDP connection and send data are very simple:

1. Create a local socket.

2. Connect to a remote host.

3. Send data to the remote host.

The code itself is short, so let’s break it down line-by-line. Bonus points if you can guess what I’m working on from the IP address and port numbers!

Creating the local socket

The first step is creating the socket, in this case a DatagramSocket:

DatagramSocket udpSocket = new DatagramSocket();

One advantage of DatagramSocket is that I don’t have to specify what kind of protocol I want to use, because it sends exclusively UDP packets.

Next I need to bind the socket to a local port, which specifies which port you want the UDP packets to originate from. This is done by calling the DatagramSocket.BindServiceNameAsync() method. In my case, I’ll be using the port number 5556:

await udpSocket.BindServiceNameAsync(“5556”);

It’s as simple as passing a string containing the port number. I use the await keyword here because BindServiceNameAsync() is an asynchronous method. For more documentation on the await keyword and Windows RT Tasks, check the resources at the end of the article.

Connecting to a remote host

The second step is to open a connection to a remote host. In this example I want to connect to the IP address 192.168.1.1, but the DatagramSocket.ConnectAsync() method takes an instance of the HostName class as an argument. So first I need to create a new HostName to represent the remote host:

HostName remoteHost = new HostName(“192.168.1.1”);

Again, the argument I’m passing is a string containing the IP address or URL I want to connect to. I can then open the connection by calling ConnectAsync and passing the HostName I just created and the port I want to send data to on the remote host:

await udpSocket.ConnectAsync(remoteHost, “5556”);

Sending data to the remote host

Once the connection is established, it’s time to send data. The DatagramSocket class doesn’t contain any methods for sending packets, so I need to use the aptly-named DataWriter class. The first step of sending data is to create a new DataWriter, passing it the OutputStream property of my DatagramSocket, udpSocket:

DataWriter udpWriter = new DataWriter(udpSocket.OutputStream);

Now, say I want to send the string “juncti juvant” to the remote host. DataWriter doesn’t have any single method to handle this operation; sending data is a two part process. First I need to write the data to the OutputStream:

udpWriter.WriteString(“juncti juvant”);

Check out the documentation on the DataWriter class to see what other kinds of data you can write.

The data isn’t heading to the remote host yet; now I need to actually make the DataWriter send a UDP packet. To do this I call the DataWriter.StoreAsync() method:

await udpWriter.StoreAsync();

And with that, a UDP packet containing the payload “juncti juvant” is on its way to the remote host!

My combined code to send a UDP packet consists of the following:

// Create a new socket and bind it to a local port
DatagramSocket udpSocket = new DatagramSocket();
await udpSocket.BindServiceNameAsync(“5556”);

// Open a connection to a remote host
HostName remoteHost = new HostName(“192.168.1.1”);
await udpSocket.ConnectAsync(remoteHost, “5556”);

// Send a data string to the remote host in a UDP packet
DataWriter udpWriter = new DataWriter(udpSocket.OutputStream);
udpWriter.WriteString(“juncti juvant”);
await udpWriter.StoreAsync();

Resources

DatagramSocket: http://msdn.microsoft.com/en-us/library/windows/apps/windows.networking.sockets.datagramsocket.aspx

HostName: http://msdn.microsoft.com/en-us/library/windows/apps/windows.networking.hostname.aspx

DataWriter: http://msdn.microsoft.com/en-us/library/windows/apps/windows.storage.streams.datawriter.aspx

await keyword and Tasks: http://msdn.microsoft.com/en-us/library/hh156528.aspx

Welcome to Try, Catch, Finally…

Peter Dwersteg — Thu, 06 Sep 2012 21:46:00 GMT

Hey there, I’m Peter Dwersteg, a Developer Evangelist at Microsoft. I’ll be focusing on Windows 8 for most of my work. I’ll use Try, Catch, Finally… to share information about the projects I’ve been working on, as well as documenting the process of building really cool stuff. I’m looking forward to sharing with you all!