One of the most noticeable feature of Windows Phone 8 is change of main screen with 3 different tile types:
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:
What about 3 types? The types are:
Flip – this tile flips from front to back exposing front and back content
Iconic – this tile mimics Metro design
Cycle – this tile cycles through collection of local images (up to nine images could be defined)
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:
Working with the tiles
Main tile type (template) is defined via application manifest:
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|
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:
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|
* 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:
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:
Now, let us see the code to create third
(and most interesting in my opinion) tile type – cycle.
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:
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.