Del via


Windows Store App Tile Update Templates – C#

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! 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.

image_thumb4

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.

image_thumb5

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.

image_thumb6 

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.

image_thumb7 

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.

image_thumb8 

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.

image_thumb9 

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.

image_thumb10 

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.

image_thumb11 

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.

image_thumb12 

 

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.

image_thumb13 

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.

image_thumb14 

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.

image_thumb15 

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.

image_thumb16 

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.

image_thumb17 

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.

image_thumb18 

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.

image_thumb20 

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

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.

image_thumb21 

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

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.

image_thumb22 

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.

image_thumb23 

XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText09); XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text"); tileTextAttributes[0].InnerText = "header text"; tileTextAttributes[1].InnerText = "wrap text";

TileWideText10

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 TileWideText07, but the first column is narrower.

image_thumb24 

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

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 TileWideText08, but the first column is narrower.

image_thumb25 

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.

image_thumb26 

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.

image_thumb27 

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.

image_thumb28 

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";