Tiles in Windows Phone 8

In the new Windows Phone 8, there are new tile options- tiles can have new styles, they can be in new sizes (decided by the user), and they can be changed or be set in different ways, lets see what it’s all about.

the first new thing that comes to attention with the new SDK is that now we can choose how our tile will look like out of 3 possible templates for tile types and for each of them, 3 possible sizes (customized by the user)- small, medium and large.

Flip Tile (a tile that has two sides and flips back and forth)

flipSmallflipmed fliplarge

(159x159px)       (336x336px)                       (691x336px)

Cycle Tile (a tile that cycles between up to 9 images)

flipSmall  

(159x159px)     (691x336px)                 (691x336px)

Iconic Tile (a tile that displays an icon, text and a numeric indicator)

iconSmalliconMediconLarge

(110x110px)     (202x202px)                       (automatically scaled)

The sizes under each icon are calculated for the resolution of WXGA, scaling for other resolutions is done automatically.

Tiles can be edited in 3 way: set via the WMAppManifest.xml file, edited, changed or updated in code, or updated through an XML file, and of course, we can combine all options (for instance, set a default look with the manifest file, and then change things in code when we want to).

Note that we can’t change the tile template itself (if we created a Flip template we can’t later change it to iconic)- a runtime exception is thrown if such change was tried (ArgumentMismatch exception with the message- Template type mismatch.  You can only update the tile using the same template it was created with).

Lets take a look on the inside of it all:

Flip Tile:

When we open the WMAppManifest.xml file we can immediately spot some properties that are relevant to the template and its properties-

WMAppManifest

We can choose the template we want, download the relevant images, even name the tile and choose whether we support large tiles or not, but as you can immediately see some things are still missing here (if we’re talking about a flip template, where can we edit the back side’s appearance?) which is why working with the WMAppManifest in an XML editor is the better way to do all these things.

   17      <TemplateFlip>

   18           <SmallImageURI IsRelative=true IsResource=false>Assets\Tiles\TransThunderMed.png</SmallImageURI>

   19           <Count>6</Count>

   20           <BackgroundImageURI IsRelative=true IsResource=false>Assets\Tiles\TransThunderMed.png</BackgroundImageURI>

   21           <Title>Flip Sample Front</Title>

   22           <BackContent>Back Content</BackContent>

   23           <BackBackgroundImageURI IsRelative=true IsResource=false>Assets\Tiles\CustomTileMedium.png</BackBackgroundImageURI>

   24           <BackTitle>Back Title</BackTitle>

   25           <LargeBackgroundImageURI IsRelative=true IsResource=false>Assets\Tiles\TransThunderWide.png</LargeBackgroundImageURI>

   26           <LargeBackContent>Large Back Content</LargeBackContent>

   27           <LargeBackBackgroundImageURI IsRelative=true IsResource=false>Assets\Tiles\CustomTileLarge.png</LargeBackBackgroundImageURI>

   28           <DeviceLockImageURI>

   29           </DeviceLockImageURI>

   30           <HasLarge>True</HasLarge>

   31         </TemplateFlip>

 

This is a pretty straight forward XML, and I’ve set or at least defined all the attributes available for us to play with, although it is not necessary to define or set all of them, we can set only those we need.

Notice that I’ve added all of my images to the Assets\Tiles folder, to make everything organized, while when adding images through the automatic selector, it will import the image files into the main project directory.

Also notice that I’m using the same image for small and medium- that is because this is a vector and the ratio of the images is the same.

If we want to edit the template through code, or create a new primary/ secondary template, that is also simple enough-

   27  // Select the application tile

   28             ShellTile myTile = ShellTile.ActiveTiles.First();

   29             if (myTile != null)

   30             {

   31                 // Create a new data to update my tile with

   32                 FlipTileData newTileData = new FlipTileData

   33                 {

   34                     Title = “New Title”,

   35                     BackgroundImage = new Uri(@”Assets\Tiles\ChangedTileMedium.png”, UriKind.Relative),

   36                     BackTitle = “New Background Image”,

   37                     BackBackgroundImage = new Uri(textBoxBackBackgroundImage.Text, UriKind.Relative),

   38                     BackContent = “New Back Content”

   39                 };

   40                 // Update the application Tile

   41                 myTile.Update(newTileData);

   42             }

 

In this example I’ve used the ShellTile static property ActiveTiles.First() to reach the main application tile (which is for me the only tile), I’ve created a new FilpTileData object with all the new Data I want to change, and updated my tile. In this case we only changed some properties of this tile, the rest will stay the same. Playing with ShellTile is pretty much the same as it was on the previous versions of WP.

Another way to initialize the FlipTemplateData object, is to provide it with a string that is an XML, containing all the data needed for the template-

   31 FlipTileData xmlData = new FlipTileData(@”<?xml version=”"1.0″”?>

   32    <wp:Notification xmlns:wp=”"WPNotification”" Version=”"2.0″”>

   33    <wp:Tile Id=”"WindowsPhoneTilesToken”" Template=”"FlipTile”">

   34    <wp:SmallBackgroundImage Action=”"Update”" IsRelative=”"true”">Assets\Tiles\NewImageMed.png</wp:SmallBackgroundImage>

   35    <wp:WideBackgroundImage Action=”"Update”" IsRelative=”"true”">Assets\Tiles\NewImageWide.png</wp:WideBackgroundImage>

   36    <wp:WideBackBackgroundImage Action=”"Update”" IsRelative=”"true”">Assets\Tiles\NewCustomTileLarge.png</wp:WideBackBackgroundImage>

   37    <wp:WideBackContent Action=”"Update”">New and improved</wp:WideBackContent>

   38    <wp:BackgroundImage Action=”"Update”" IsRelative=”"true”">Assets\Tiles\NewImageMed.png</wp:BackgroundImage>

   39    <wp:Count Action=”"Update”">42</wp:Count>

   40    <wp:Title Action=”"Update”">Xml updated</wp:Title>

   41    <wp:BackBackgroundImage Action=”"Update”" IsRelative=”"true”">Assets\Tiles\NewCustomTileMedium.png</wp:BackBackgroundImage>

   42    <wp:BackTitle Action=”"Update”">back of new title</wp:BackTitle>

   43    <wp:BackContent Action=”"Update”">back of new content</wp:BackContent>

   44    </wp:Tile>

   45    </wp:Notification>”);

 
This XML could also be uploaded from a file, and using this format we can also change only some of the properties of the tile (we don’t to have all the properties in the file). The Action attribute in the XML is set to update for the data we wish to change, but if we want to delete we can also use Clear action to delete the current value in the property. If I don’t specify an action, the action will be update.

The Tile’s id (line 33) doesn’t matter here, but the Template has to be of the original’s template type.

Cycle tile:

Cycle tile’s template definition in the WMAppManifest is:

   17  <TemplateCycle>

   18 <SmallImageURI   IsRelative=true  IsResource=false>Assets\Tiles\FlipCycleTileSmall.png</SmallImageURI>

   19           <Title>Cycle Tiles</Title>

   20           <Photo01ImageURI  IsRelative=true  IsResource=false>Assets\Tiles\mare.png</Photo01ImageURI>

   21           <Photo02ImageURI  IsRelative=true  IsResource=false>Assets\Tiles\bird.png</Photo02ImageURI>

   22           <Photo03ImageURI  IsRelative=true  IsResource=false>Assets\Tiles\doghaylarge.jpg</Photo03ImageURI>

   23           <Photo04ImageURI  IsRelative=true  IsResource=false>Assets\Tiles\snaillarge.jpg</Photo04ImageURI>

   24           <HasLarge>true</HasLarge>

   25           <DeviceLockImageURIIsRelative=trueIsResource=false>

   26           </DeviceLockImageURI>

   27         </TemplateCycle>

As we can see I’ve cycled only 4 pictures, but you can cycle up to 9 by simply adding more URIs and more pictures. Also the cycle tile doesn’t distinguish between medium and large pictures, it will automatically crop the large image to medium size or expand a medium sized image to a fit a large one.

Again in code it will look like this-

   30   var cycleImages = new List<Uri>() { new Uri(@”Assets\Tiles\FlipCycleTileMedium.png”, UriKind.Relative),

   31   new Uri(@”Assets\Tiles\CustomTileLarge.png”, UriKind.Relative) };

   32

   33                 CycleTileData newTileData = new CycleTileData

   34                 {

   35                     Title = “New Title”,

   36                     CycleImages = cycleImages,

   37                     Count = 5

   38                 };

 

Notice that a new property appeared in code that didn’t exist in the manifest, “Count”.

And in the XML-

   40  CycleTileData xmlData = new CycleTileData(@”<?xml version=”"1.0″”?>

   41   <wp:Notification xmlns:wp=”"WPNotification”" Version=”"2.0″”>

   42   <wp:Tile Id=”"id”" Template=”"CycleTile”">

   43   <wp:Count>45</wp:Count>

   44   <wp:Title>tile</wp:Title>

   45   </wp:Tile>

   46   </wp:Notification>”);

 
(Again Count is here and working, guess the fact that it’s missing in the manifest is just a fluke)

The skeleton for this template’s XML is

   40    CycleTileData xmlData = new CycleTileData(@”<?xml version=”"1.0″”?>

   41     <wp:Notification xmlns:wp=”"WPNotification”" Version=”"2.0″”>

   42     <wp:Tile Id=”"”" Template=”"CycleTile”">

   43     <wp:SmallBackgroundImage></wp:SmallBackgroundImage>

   44     <wp:CycleImage1></wp:CycleImage1>

   45     <wp:CycleImage2></wp:CycleImage2>

   46     <wp:CycleImage3><wp:CycleImage3>

   47     <wp:CycleImage4></wp:CycleImage4>

   48     <wp:CycleImage5></wp:CycleImage5>

   49     <wp:CycleImage6></wp:CycleImage6>

   50     <wp:CycleImage7></wp:CycleImage7>

   51     <wp:CycleImage8></wp:CycleImage8>

   52     <wp:CycleImage9></wp:CycleImage9>

   53     <wp:Count></wp:Count>

   54     <wp:Title></wp:Title>

   55     </wp:Tile>

   56    </wp:Notification>”);

 

Iconic tile:

Iconic tile’s template definition in the WMAppManifest is:

   17  <TemplateIconic>

   18  <SmallImageURIIsRelative=trueIsResource=false>Assets\Tiles\transThunder.png</SmallImageURI>

   19           <Count>5</Count>

   20           <IconImageURIIsRelative=trueIsResource=false>Assets\Tiles\transThunderMed.png</IconImageURI>

   21           <Title>Iconic template</Title>

   22           <Message>Message line</Message>

   23           <BackgroundColor>Black</BackgroundColor>

   24           <HasLarge>True</HasLarge>

   25           <LargeContent1>First line</LargeContent1>

   26           <LargeContent2>Second line</LargeContent2>

   27           <LargeContent3>Third line</LargeContent3>

   28           <DeviceLockImageURIIsRelative=trueIsResource=false>

   29           </DeviceLockImageURI>

   30         </TemplateIconic>

 
And in code-

   30       IconicTileData newTileData = new IconicTileData

   31                 {

   32                     Title = “New Title”,

   33                     BackgroundColor = Colors.Blue,

   34                     Count = 2,

   35                     IconImage = new Uri(@”Assets\Tiles\CustomIconicTileMediumLarge.png”, UriKind.Relative),

   36                     SmallIconImage = new Uri(@”Assets\Tiles\CustomIconicTileSmall.png”, UriKind.Relative),

   37                     WideContent1 = “New Wide Content1″,

   38                     WideContent2 = “New Wide Content2″,

   39                     WideContent3 = “New Content3″

   40                 };

The weird thing about this template is the background color, it doesn’t change from the manifest, but it does when changed in code.

And finally the XML (skeleton only)-

   43           IconicTileData xmlData = new IconicTileData(@”<?xml version=”"1.0″”?>

   44    <wp:Notification xmlns:wp=”"WPNotification”" Version=”"2.0″”>

   45    <wp:Tile Id=”"”" Template=”"IconicTile”">

   46    <wp:SmallIconImage></wp:SmallIconImage>

   47    <wp:IconImage></wp:IconImage>

   48    <wp:WideContent1></wp:WideContent1>

   49    <wp:WideContent2></wp:WideContent2>

   50    <wp:WideContent3></wp:WideContent3>

   51    <wp:Count></wp:Count>

   52    <wp:Title></wp:Title>

   53    <wp:BackgroundColor></wp:BackgroundColor>

   54    </wp:Tile>

   55    </wp:Notification>”);

This entry was posted in Windows Phone 8. Bookmark the permalink.

5 Responses to Tiles in Windows Phone 8

  1. Ben says:

    You may want to try your Iconic template again – I was able to set the background color of an iconic tile in the manifest, but it was really picky about the syntax:

    <BackgroundColor>#RRGGBB</BackgroundColor>

    Any spaces (or newlines) around the hex color, and the phone seems to ignore it entirely.

  2. Claus Jørgensen says:

    Hey

    Your tile sizes for the IconicTemplate are wrong, please see http://stackoverflow.com/a/12958512/95309 for the correct tile sizes.

    / Claus from Windows Phone team, Skype Division ;)

  3. Thomas says:

    Hi
    thanks for this comprehensive article.
    Regards Tom
    Thanks to Ben also – I didn’t find anything specific about the backgroundcolor for iconic tiles but here. And it works.

  4. Michał Bożydar Pawłowski says:

    Hi,

    I’m trying to run Manifest Manager. I’ve written on may forums and didn’t get answer. When I try to run it, it shows me my WMAppManifest.xml in xml editor. When I try to OpenWith…->Windows Phone Manifest Designer it shows me an error message:

    “The file cannot be opened with the selected editor. Please choose another editor”.

    I’m using VS 2012 Express for Windows Phone 8. Do you have any idea how to run it? It’s weird but I recognise, that I was running it at the beginning of using VS. I have no idea now how to get it back.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>