MobileA Guide to Better User Interaction Using Windows Phone 8 Tiles

A Guide to Better User Interaction Using Windows Phone 8 Tiles

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

Introduction

Tiles are an innovative way the Windows Phone platform attempts to differentiate from competitors. Live tiles make interaction more personal by providing notifications on the Start screen itself. In this article, we will learn about the Tile feature available on Windows Phone 8.

What are Tiles?

Tiles are the modern replacement of application shortcut icons. What makes them different on the Windows Phone 8 platform is the fact that the icons are interactive, making them a lot more than static icons. The tiles can change how they are displayed to communicate to the user about any status changes in the application.

Every app can have at least one default tile, which is created by pinning the app to the Start screen. Clicking this tile will result in launching the app main page.

Since space is limited on the Start screen, Windows Phone 8 allows users to “pin” the tiles of the applications, which might be of interest. There are a few applications whose tiles are, by default, pinned on Windows Phone 8, like “People” and “Mail”.

Secondary tiles can launch any page in the application.

What are Secondary Tiles?

Windows 8 revolutionizes the concept of tiles further by allowing users to pin multiple tiles for an application. For example, if there was an application that showed traffic conditions, a user might be interested to know the traffic conditions of both his work place and his residence. Secondary tiles help fill that need.

Tile Templates

There are three visual templates available to use tiles. Tiles can be set at compile tile by setting the startup behavior. To programmatically change tiles, we can use scheduled local notifications or use a cloud service with push notifications.

The default tile for the application needs to be carefully chosen since the template cannot be changed programmatically. Secondary tiles are created dynamically; hence there is freedom to choose the template in the code.

Flip Tile Template

The flip tile can be flipped between front and back positions.  This tile template also exists in Windows Phone 7.1. One of the improvements over Windows Phone 7.1 is the ability to specify wide tiles.

Cycle Tile Template

This tile lets you rotate up to 9 images. This is an ideal template to use for social applications where you might want to show updates from different users in your social circle.

Iconic Tile Template

This tile shows a small image in the tile and is an example of a tile that is designed to represent the Windows Phone design principles.

Tile Sizes

All tile templates can appear in the small (159 x 159 pixels) and medium (336 x 336 pixels) sizes – while flip and cycle templates also sport the wide size (691 x 336 pixels)

Hands on Application Development with Tile Support

Start Visual Studio 2012 and create a new Windows Phone 8 application titled WindowsPhoneTileDemo.

Create a new Windows Phone 8 application
Create a new Windows Phone 8 application

Choose Windows Phone OS 8.0 as the target OS.

Select the Windows Phone Platform
Select the Windows Phone Platform

From Project explorer, open WPAppManifest.xml file

Project Explorer
Project Explorer

To setup a file, open up the WMAppManifest.xml in Visual Studio by double-clicking the file.

Open WPAppManifest.xml
Open WPAppManifest.xml

You will notice that you can select the type of template for the application under “Tile Template” on the Application Manifest settings.

When Flip Template is selected as “Tile Template” and “Support for large tiles” is checked, we will need to provide a large tile image.

If Cycle Tile template is selected, you can provide up to 9 different cycle images, with the minimum being 1.

You can provide up to 9 different cycle images
You can provide up to 9 different cycle images

For flip tile template, you can specify a number in the tile, which can be used to represent a count of updates to the application. For that, we need to open WMAppManifest.xml file in the text format and make the following change.

<?xml version="1.0" encoding="utf-8"?>
<Deployment xmlns="http://schemas.microsoft.com/windowsphone/2012/deployment" AppPlatformVersion="8.0">
  <DefaultLanguage xmlns="" code="en-US" />
  <App xmlns="" ProductID="{2d69217b-ced3-4f2c-8605-a26968bcecbb}" Title="WindowsPhoneTileDemo" RuntimeType="Silverlight" Version="1.0.0.0" Genre="apps.normal" Author="WindowsPhoneTileDemo author" Description="Sample description" Publisher="WindowsPhoneTileDemo" PublisherID="{45e8beab-2d53-46a2-8da1-0b7663740e53}">
    <IconPath IsRelative="true" IsResource="false">AssetsApplicationIcon.png</IconPath>
    <Capabilities>
      <Capability Name="ID_CAP_NETWORKING" />
      <Capability Name="ID_CAP_MEDIALIB_AUDIO" />
      <Capability Name="ID_CAP_MEDIALIB_PLAYBACK" />
      <Capability Name="ID_CAP_SENSORS" />
      <Capability Name="ID_CAP_WEBBROWSERCOMPONENT" />
    </Capabilities>
    <Tasks>
      <DefaultTask Name="_default" NavigationPage="MainPage.xaml" />
    </Tasks>
    <Tokens>
      <PrimaryToken TokenID="WindowsPhoneTileDemoToken" TaskName="_default">
        <TemplateFlip>
          <SmallImageURI IsRelative="true" IsResource="false">AssetsTilesFlipCycleTileSmall.png</SmallImageURI>
          <Count>10</Count>
          <BackgroundImageURI IsRelative="true" IsResource="false">AssetsTilesFlipCycleTileMedium.png</BackgroundImageURI>
          <Title>
          </Title>
          <BackContent>
          </BackContent>
          <BackBackgroundImageURI IsRelative="true" IsResource="false">
          </BackBackgroundImageURI>
          <BackTitle>
          </BackTitle>
          <LargeBackgroundImageURI IsRelative="true" IsResource="false">AssetsTilesFlipCycleTileLarge.png</LargeBackgroundImageURI>
          <LargeBackContent />
          <LargeBackBackgroundImageURI IsRelative="true" IsResource="false">
          </LargeBackBackgroundImageURI>
          <DeviceLockImageURI IsRelative="true" IsResource="false">
          </DeviceLockImageURI>
          <HasLarge>True</HasLarge>
        </TemplateFlip>
      </PrimaryToken>
    </Tokens>
    <ScreenResolutions>
      <ScreenResolution Name="ID_RESOLUTION_WVGA" />
      <ScreenResolution Name="ID_RESOLUTION_WXGA" />
      <ScreenResolution Name="ID_RESOLUTION_HD720P" />
    </ScreenResolutions>
  </App>
</Deployment>
 

Now when you deploy your application, you will notice that the default application tile has a number 10 displayed.

To see how to update the tile data, add a button to your application.

On the click event of the button, add the following code.

private void buttonUpdateTileCount_Click(object sender, RoutedEventArgs e)
        {
            var tile = ShellTile.ActiveTiles.FirstOrDefault();
            Random rand = new Random();
            
            FlipTileData s = new FlipTileData
            {
                Count = rand.Next()
                
            };
            tile.Update(s);
        }

The above code updates the count information on the tile to a random value.

If you are following along, you can download the sample code from here.

Now deploy your application and pin it to the start screen. You will notice that the App icon on the screen has “10” as the count. Now, click the button and go back to the start screen. You will notice that the count value has changed for the application tile. That is because the click action caused an update to the tile.

Summary

In this article, we learned about tile support in Windows Phone 8. I hope you have found this information useful.

About this author

Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories