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.