What’s New in Windows Phone 8 (1 out of 8)–Tiles

October 30, 2012

One of the most noticeable feature of Windows Phone 8 is change of main screen with 3 different tile types:

image

Each tile could be one out from 3 types available sizes – small, normal and wide. Also, each type could be form 3 different types – Iconic, Flip and Cycle.

All 3 sizes and all 3 types are available for 3rd party developers. Let’s see how to use this interesting feature in the application.

So what are the sizes? The sizes are:

Small

image

Medium

image

Wide

image

What about 3 types? The types are:

Flip – this tile flips from front to back exposing front and back content

image image

Iconic – this tile mimics Metro design

image

Cycle – this tile cycles through collection of local images (up to nine images could be defined)

imageimage 

It is important to mention, that all “interesting” tile functionality such as cycling images and flipping available only for medium and wide tiles. In case of Flip/Cycle tiles, small tile shows static image as defined in application manifest (see below).

To switch between different tile sizes tap and hold on the tile. In addition to “unpin” icon from previous version new version shows additional icon which enables size change:

imageimageimage

Working with the tiles

Main tile type (template) is defined via application manifest:

image

Also manifest is used to enable support for wide tile (“Support for large Tiles” checkbox) and define initial tile graphics. It is important to define main tile type which suites best your application’s needs as it cannot be changed later.

For best results it is important to provide tile graphics according to expected sizes, though wrongly sized graphics will be presented anyway with possible visual distortions. The sizes are:

Tile Size Flip Tile Cycle Tile Iconic Tile
Small 159×159 159×159 110×110
Medium 336×336 33×336 202×202
Wide 691×336 691×336 N/A

The content of main tile could be changed from code, though, as mentioned before, the tile template couldn’t be changed. The following code snippet changes the content of main app tile:

var mainTile = ShellTile.ActiveTiles.FirstOrDefault();

 

if (mainTile != null)

{

    IconicTileData tileData = new IconicTileData()

    {

        Count = 73,

        BackgroundColor = Colors.Green,

        Title = "Main",

        IconImage = new Uri("/Assets/Tiles/IconicTileMediumLarge.png", UriKind.RelativeOrAbsolute),

        SmallIconImage = new Uri("/Assets/Tiles/IconicTileSmall.png", UriKind.RelativeOrAbsolute),

        WideContent1 = "Wide content 1",

        WideContent2 = "Wide content 2",

        WideContent3 = "Wide content 3",

    };

 

    mainTile.Update(tileData);

}

This code snippet updates main tile using IconicTileData class (as application tile defined in app manifest as Iconic tile – see image above). This snippet uses all possible properties, many of them are optional (such as wide contents for example). The code snippet updates main tile which looks like the following:

Original tile Update tile
image image
image image
image image

* Numbers on small and medium tiles cut due to bug in early build of SDK used while writing this post

The templates used for main tile could be used to create and update also secondary tiles for application.

Let’s see how to create secondary tile using Flip template:

//Flip

FlipTileData tileData = new FlipTileData()

{

    Title = "Flip",

    Count = 12,

    BackgroundImage = new Uri("/Assets/Tiles/FlipCycleTileMedium.png", UriKind.RelativeOrAbsolute),

    BackBackgroundImage = new Uri("/Assets/Tiles/FlipCycleTileMedium.png", UriKind.RelativeOrAbsolute),

                

    BackTitle = "Flip back",

    BackContent = "Back content",

                

    SmallBackgroundImage = new Uri("/Assets/Tiles/FlipCycleTileSmall.png", UriKind.RelativeOrAbsolute),

 

    WideBackContent = "Wide back content",

    WideBackgroundImage = new Uri("/Assets/Tiles/FlipCycleTileLarge.png", UriKind.Relative),

    WideBackBackgroundImage = new Uri("/Assets/Tiles/FlipCycleTileLarge.png", UriKind.Relative)

};

 

ShellTile.Create(new Uri(uri, UriKind.Relative), tileData, true);

The code snippet is pretty self-descripting: it creates FlipTileData object, populates properties for front and back of the tile for normal and wide content (in case we want to support wide tile) and invokes ShellTile.Create function. Last parameter (in this case true) defines the support for wide tile. The result produced for this tile looks as follows:

image imageimageimageimage

Now, let us see the code to create third

(and most interesting in my opinion) tile type – cycle.

//Cycle

List<Uri> list = new List<Uri>();

list.Add(new Uri("/Images/WP1.jpg", UriKind.Relative));

list.Add(new Uri("/Images/WP2.jpg", UriKind.Relative));

list.Add(new Uri("/Images/WP3.jpg", UriKind.Relative));

list.Add(new Uri("/Images/WP4.jpg", UriKind.Relative));

list.Add(new Uri("/Images/WP5.jpg", UriKind.Relative));

 

CycleTileData tileData = new CycleTileData()

{

    Title = "Cycle",

    Count = 12,

    SmallBackgroundImage = new Uri("/Assets/Tiles/FlipCycleTileSmall.png", UriKind.RelativeOrAbsolute),

    CycleImages = list

};

 

ShellTile.Create(new Uri(uri, UriKind.RelativeOrAbsolute), tileData, true);

 

Most important in this this code block is the CycleImages list for CycleTileData object. It expects IEnumerabe<Uri> object with local images path. Remote images (not on the device) are not supported. The result of this code produces tile which looks like the following illustrations:

imageimageimage

Tiles also could be updated using same push notification mechanism as in previous version. The only change would be in payload sent as new tiles needs more information.

 

That’s it for now. In next post I will how another end-user oriented feature – Lock Screen backgrounds and notifications.

 

Stay tuned,

Alex

Add comment
facebook linkedin twitter email

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>