Working With Tiles in Windows Phone 7

Introduction

In this article we are going to use how to use the Tile in our windows phone 7 development. In this article we will see the different types of tile available and also see the step by step process on creating a tile for an application.

Tiles are nothing but linking an application to the home screen with some options to update the status. Here we have 2 types of Tile development available.

• Application Tile - This type is used when the application is pinned to the Start screen by the user for easy accessing with the application Icon in the application list. Clicking on the tile will navigate directly to the application for easy accessibility.
• Secondary Tile - This type is basically created programmatically by the application based on the user interaction. This type of Tile will be used to navigate to the application and can be create only one instance. We need to use Create(Uri, ShellTileData) method to create a secondary tile.

Let us jump start to see the step by step process on how to create the Application Tile and the Secondary Tile one by one in detail.

Steps

Open Visual Studio 2010 and create a new Silverlight for Windows Phone 7 application with a valid project name as shown in the screen below.

Let us first create an application tile and see the properties that are need to be assigned to create the tile. Once the page is opened in Visual Studio 2010 IDE just add 2 buttons to trigger the Application Tile and Secondary Tile one by one. Once we customized the design we can see the UI as shown in the screen below.

Now let us add the code to trigger the Application tile, to do that we need to go to the Application Tile button click event and write the below code.

Code Behind

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;

using Microsoft.Phone.Shell;

namespace F5debugWp7Tiles

{

public partial class MainPage : PhoneApplicationPage

{

// Constructor

public MainPage()

{

InitializeComponent();

}

private void button1_Click(object sender, RoutedEventArgs e)

{

ShellTile AppShell = ShellTile.ActiveTiles.First();

StandardTileData AppTile = new StandardTileData();

AppTile.Title = "F5debug";

AppTile.BackgroundImage = new Uri("RedTile.jpg", UriKind.Relative);

AppTile.Count = 10;

AppTile.BackTitle = "F5Debug Back";

AppTile.BackBackgroundImage = new Uri("BlueTile.jpg", UriKind.Relative);

AppTile.BackContent = " This is Back Content";

AppShell.Update(AppTile);

}

}

}

Now we will check if the application is building and executing correctly and the Application Tile is working good on pinning the application to start. To check build and execute the application by pressing F5 directly and we can see the application loaded to the Windows Phone 7 Emulator as shown in the screen below.

Now click on the Application Tile button and we can see the application tile get created on the start screen. To check that first click on the Start button at the bottom and in the list view of the applications select our application F5debugWp7Tiles and select pin to start. Now go back to the main screen (Home) and we can see the tiles as shown in the screen below.

Now we are good with creating a Application Tile, let us start with creating a Secondary Tile. To start with first let us add a new page Page1.xaml and design it as shown in the screen below.

XAML Code

<Grid x:Name="LayoutRoot" Background="Transparent">