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">

    <Grid.RowDefinitions>

        <RowDefinition Height="Auto"/>

        <RowDefinition Height="*"/>

    </Grid.RowDefinitions>

    <!--<span class="hiddenSpellError" pre="">TitlePanel</span> contains the name of the application and page title-->

    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

        <TextBlock x:Name="ApplicationTitle" Text="F5DEBUG WP7 TUTORIALS" Style="{StaticResource PhoneTextNormalStyle}"/>

        <TextBlock x:Name="PageTitle" Text="Secondary Tiles" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

    </StackPanel>

    <!--<span class="hiddenSpellError" pre="">ContentPanel</span> - place additional content here-->

    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

        <TextBlock Height="193" HorizontalAlignment="Left" Margin="71,146,0,0" Name="textBlock1" FontSize="36" TextWrapping="Wrap" Text="This is Secondary Tile Application" VerticalAlignment="Top" Width="293" />

    </Grid>

</Grid>

C# Code

private void button2_Click(object sender, RoutedEventArgs e)

{

StandardTileData SecTitle = new StandardTileData();

SecTitle.Title = "F5Debug Sec Title";

SecTitle.BackgroundImage = new Uri("BlueTile.jpg", UriKind.Relative);

SecTitle.Count = 70;

var URINav = "/Page1.xaml?state=Sec Tile";

ShellTile.Create(new Uri(URINav, UriKind.Relative), SecTitle);

}

 

Now on the Page1.xaml we need to write our requirement if all we need to do some manipulation when clicking on the secondary tile. Here we are just showing the sample page on page navigation so we have not written any code on the OnNavigatedTo event as shown in the screen below.

 

C# Code

 

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)

{

base.OnNavigatedTo(e);

}

Now we are done with our code, just build and execute the project and we can see the screen with the 2 buttons as shown in the screen below.

 

 

Now click on the Secondary Tile and we can see the Secondary tile created as shown in the screen below.

 

 

Clicking on the secondary tile (F5Debug Sec Tile) will navigate to the Secondary Tile Page (Page1.xaml) as shown in the screen below.

 

Conclusion

 

So in this article we have seen what is a Tile and how to create a basic tile and to assign the tile with the basic properties. Also we have seen how to create a Secondary tile and use it on navigation based on the purpose.