Customizing tiles

Each tile has a range of different XML tags defining the content each with their own attributes and content. The name of the template usually gives you a good clue as to what you can display. For example TileSquareBlock consists of two lines of text the first large block format text and the second smaller regular text. You need to look at the documentation, currently at http://msdn.microsoft.com/en-us/library/windows/apps/ hh761491.aspx, for a full description of all of the tiles. You can also see the XML that is used to generate the XMLDocument object.

In the case of TileSquareBlock this is:

<tile>
  <visual>
    <binding template="TileSquareBlock">
      <text id="1">Text Field 1</text>
      <text id="2">Text Field 2</text>
    </binding>  
  </visual>
</tile>

You can see that the two text nodes have ids of 1 and 2. This enables you to use the usual XML manipulation methods to find and modify the text content.

A this point you might be thinking that the way to do things is to get the element you need by id but you have to remember that this is XML not HTML. There is no default id attribute in XML and if you want to use getElementById then you have to define the unique id element using a document type definition (DTD). This is generally too complicated.

In practice there are a number of ways of working with the XMLDocument. For example you could ask for all of the nodes called "text" and simply assume that the first one had id=1. For example:

var text1Node = tileXML.
        getElementsByTagName("text")[0];  
text1Node.innerText = "99";

Using the innerText property is a short cut to the more elaborate methods of creating a text node and appending it.  For the second text tag you could use:

var text2Node = tileXML.
           getElementsByTagName("text")[1]; text2Node.innerText = "Hello Tile";

and after this you would see:

Instead of using the innerText property you could use:

var node = tileXML.
             createTextNode("Hello Tile");
text2Node.appendChild(node);

Most programmers think that creating a TextNode object and appending it is the "pure" way of doing the job but use whichever you find appealing.

 Of course there is the question of how to check that you really are updating the correct tags. If you want to include a check you could use something like:

var id= text2Node.attributes.
              getNamedItem("id").nodeValue;

and then test the value of id to make sure it was 2 - in this case.

If you want to use a string stored in a resource for your tile updates this is easy. For example if you add a resources.resjson file to your project then this contains JSON style name, value definitions. The default file contains:

{
 "greeting"          : "Hello World!",
 "_greeting.comment" : "This is a comment
                          to the localizer"
}

You can use a resource simply by putting ms-resource in front of the property name. For example:

var node = tileXML.
    createTextNode("ms-resource:greeting");

sets the text to Hello World.

Images

This is about all there is to using a template to generate notifications.  Some templates have images as well as text. For example,  TileSquareImage only displays an image. In this case you have to set the src attribute to the URI of the image file and optionally the alt attribute to the alternative text.

For example to set an image from a jpg stored on the web you would use:

var tileType = Notifications.
       TileTemplateType.tileSquareImage;
var tileXML = Notifications.
              TileUpdateManager.
               getTemplateContent(tileType);
var ImageNode = tileXML.
           getElementsByTagName("image")[0];
ImageNode.attributes.getNamedItem("src").
       nodeValue="http://etc.com/IP.jpg";

Where, of course you have to set the URL to resolve to a real website and image file. 

The only thing extra that you need to know is how to reference an image file stored within the app's package itself i.e. the project's image directory. Such images are packages and distributed along with the code of the app.   In this case all you have to do is use the ms-appx prefix as in:

"ms-appx:///images/myimage.png"

Similarly to use an image stored in the app's local storage i.e the folder returned by

Windows.Storage.ApplicationData.current.localFolder

you have to use the ms-appdata prefix as in

 "ms-appdata:///local/myimage.png"