×
Namespaces

Variants
Actions
(Difference between revisions)

Live Tile Templates in Windows Phone 8

From Nokia Developer Wiki
Jump to: navigation, search
arunkam (Talk | contribs)
(Arunkam - - Cycle Tile Template)
arunkam (Talk | contribs)
(Arunkam -)
 
Line 30: Line 30:
 
}}
 
}}
 
== Introduction ==
 
== Introduction ==
In simple term Tile is a shortcut of an application, which shows on the start screen that is also known as primary tile or default tile. An application can have one or more secondary tiles.
+
In simple terms, Tile is a shortcut of an application, which is shown on the start screen, also known as a primary tile or default tile. An application can also have one or more additional tiles, known as secondary tiles.
  
 
[[File:Wmdev Wp8 001.png|frame|none|Windows Phone 8 Live Tile|360x420px]]
 
[[File:Wmdev Wp8 001.png|frame|none|Windows Phone 8 Live Tile|360x420px]]
  
What is Live Tile?
+
What is a Live Tile?
  
Live tile is a part of notification, it is smart and simple robust user friendly alert system which allows you to have a quick updates on your phone Start screen.
+
Live tile is a part of a notification.It is a smart, simple, robust and user friendly alert system which allows you to show quick updates on your phone start screen.
  
 
== Live Tiles Templates ==  
 
== Live Tiles Templates ==  
Line 46: Line 46:
 
# [http://msdn.microsoft.com/en-US/library/windowsphone/develop/microsoft.phone.shell.iconictiledata(v=vs.105).aspx IconicTileData]
 
# [http://msdn.microsoft.com/en-US/library/windowsphone/develop/microsoft.phone.shell.iconictiledata(v=vs.105).aspx IconicTileData]
  
These tile templates are used three standard sizes small, medium, and wide.
+
These tile templates use three standard sizes, which are  small, medium, and wide.
  
 
{| class="wikitable sortable"
 
{| class="wikitable sortable"
Line 62: Line 62:
 
|}
 
|}
  
In this example I have build each tile programmatically using C# code
+
In this example I have built each tile programmatically using C# code
Let’s create a new Windows Phone 8 project and add three buttons to main page (MainPage.xaml) to develop a Flip, Cycle and iconic tile templates. See the following XAML code snippet.
+
 
 +
Let’s create a new Windows Phone 8 project and add three buttons to the main page (MainPage.xaml) in order to develop a Flip, Cycle and iconic tile templates. See the following XAML code snippet.
  
 
XAML code snippet
 
XAML code snippet
Line 78: Line 79:
 
[[File:Wmdev Wp8 005.png|frame|none|UI (User Interface) Design View]]
 
[[File:Wmdev Wp8 005.png|frame|none|UI (User Interface) Design View]]
  
'''Note:''' You can create or update a Live Tiles either XML code or C# code. In this example I have consider C# code.
+
'''Note:''' You can create or update Live Tiles using either XML code or C# code. In this example I have considered C# code.
  
 
== Flip Tile Template ==  
 
== Flip Tile Template ==  
  
Flip tile basically know as primary or default tile, either way phone user have to pin it form application list or from the own application. Flip tile flips from front to back and back to front. The figure shows the structure and properties of flip tiles.
+
Flip tile is also known as a primary or default tile.The phone user has to pin it form application list or from within the application. Flip tile flips from front to back and back to front. The figure shows the structure and properties of flip tiles.
  
 
[[File:Wmdev Wp8 004.png|frame|none|Flip Tile Template]]
 
[[File:Wmdev Wp8 004.png|frame|none|Flip Tile Template]]
  
Flip tile also supported in Windows Phone 7. To create a Flip Tile developer need to set few basic properties such as title, count, a back ground image and a text located on the back of the tile of {{Icode|FlipTileData}} class.
+
Flip tiles are also supported in Windows Phone 7. To create a Flip Tile, developer needs to set few basic properties such as title, count, a back ground image and a text located on the back of the tile of {{Icode|FlipTileData}} class.
Here is {{Icode|CreateFlipTileData()}} that invoke when the primary tile is not created on the start screen rest of code will taking care to update the tile with data.
+
Here, {{Icode|CreateFlipTileData()}} is invoked when the primary tile is not created on the start screen .Rest of the code deals with updating the tile with data.
  
 
<code csharp>
 
<code csharp>
Line 140: Line 141:
 
</code>
 
</code>
  
First of all we have to identify whether the application Tile is available on the start screen or not, using {{Icode|ShellTile}} API class. Using {{Icode|ShellTile}} API we can get the current active tile by query. After that we will instantiate a new object of {{Icode|FlipTileData}} and set the following properties. After set the properties need to call the {{Icode|Update()}} method of {{Icode|ShellTile}} object and it will update the primary tile.
+
First of all, we have to identify whether the application tile is available or not on the start screen, using {{Icode|ShellTile}} API class. Using {{Icode|ShellTile}} API we can get the current active tile by query. After that, we will instantiate a new object of {{Icode|FlipTileData}} and set the following properties. After setting the properties, we need to call the {{Icode|Update()}} method of {{Icode|ShellTile}} object and it will update the primary tile.
  
 
<code csharp>
 
<code csharp>
Line 157: Line 158:
 
== Cycle Tile Template ==
 
== Cycle Tile Template ==
  
Cycle tile similar to a windows phone 7.5’s pictures live tile, (Cycle tile that was not possible to create in Windows Phone 7.5 now it is possible to create in Windows Phone 8 using {{Icode|CycleTileData}} class) it could be a secondary tile of your application. The cycle tile template API allows you to cycles one and nine images in random time interval. Cycle tile does not have back of tile. Cycle tile have three standard size small, medium and wide. Small size tile does not cycle any images, however you can set a static background image, otherwise it will take phone theme color by default and medium and wide size tile cycles the images. Below figure shows the structure and properties of flip tiles.
+
Cycle tile is similar to a windows phone 7.5’s pictures live tile.Cycle tile was not possible via code  in Windows Phone 7.5, but it is now possible to create that in Windows Phone 8 using the {{Icode|CycleTileData}} class.Iit could be a secondary tile of your application. The cycle tile template API allows you to cycles one to nine images in random time interval. Cycle tile does not have back of a tile. Cycle tile have three standard size ; small, medium and wide. Small size tile does not cycle any images, however you can set a static background image, otherwise it will take phone theme color by default.Below figure shows the structure and properties of flip tiles.
  
 
[[File:Wmdev Wp8 006.png|frame|none|Cycle Tile Template]]
 
[[File:Wmdev Wp8 006.png|frame|none|Cycle Tile Template]]
  
Here is {{Icode|CaycleTileData}} code snippet it is invoke when user click on Cycle Tile button.
+
Here is {{Icode|CaycleTileData}} code snippet. It is invoked when user clicks on Cycle Tile button.
  
 
<code csharp>
 
<code csharp>
Line 201: Line 202:
 
</code>
 
</code>
  
{{Icode|ShellTile}} API class allows developer to create a Caycle Tile programmatically and navigate to tiles screen.
+
{{Icode|ShellTile}} API class allows developer to create a Cycle Tile programmatically and navigate to tiles screen.
  
 
== Iconic Tile Template ==
 
== Iconic Tile Template ==
  
The iconic tile template is a fresh template, that is pioneers in Windows Phone 8. Iconic tile itself comprehensive. The Iconic Tile template requires two icons transparent images such as {{Icode|SmallIconImage}} (110 x 110 in size) and {{Icode|IconImage}} (202 x 202 in size) it is also supports scalability across resolutions. Iconic tile API allows you to set background color if there is no color set it will take automatically phone theme color.
+
The iconic tile template is a fresh template, that is pioneered in Windows Phone 8. Iconic tile itself is comprehensive. The Iconic Tile template requires two icons as transparent images such as {{Icode|SmallIconImage}} (110 x 110 in size) and {{Icode|IconImage}} (202 x 202 in size).It also supports scalability across resolutions. Iconic tile API allows you to set background color.If there is no color set, it will take automatically use the phone theme color.
  
 
[[File:Wmdev Wp8 007 v1.png|frame|none|Iconic Tile Template ([http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj207009(v=vs.105).aspx Image courtesy of Microsoft)] ]]
 
[[File:Wmdev Wp8 007 v1.png|frame|none|Iconic Tile Template ([http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj207009(v=vs.105).aspx Image courtesy of Microsoft)] ]]
  
Here is {{Icode|IconicTileData}} code snippet it is invoke when user click on Iconic Tile button.
+
Here is {{Icode|IconicTileData}} code snippet.It is invoked when user clicks on Iconic Tile button.
  
 
<code csharp>
 
<code csharp>
Line 244: Line 245:
 
== Output ==
 
== Output ==
 
Here is the output of this sample code  
 
Here is the output of this sample code  
 +
 
[[File:Livetileswp8.gif|frame|none|output]]
 
[[File:Livetileswp8.gif|frame|none|output]]
  
 
== Download ==
 
== Download ==
Source code here
+
Source code is here
 
[[File:WP8 LiveTiles.zip]]
 
[[File:WP8 LiveTiles.zip]]
  

Latest revision as of 00:56, 27 November 2013

This article explains how to use Windows Phone 8 Live Tiles templates API. Windows Phone 8 has introduced new tile features such as multiple sizes, customizable, specific page navigation using secondary tile, static and dynamic updates etc.

WP Metro Icon UI.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
Article Metadata
Code ExampleTested withCompatibility
Platform(s): Windows Phone 8
Windows Phone 8
Article
Keywords: Live Tiles, Iconic Tile template, Flip Tile template, Cycle Tile template, Windows Phone 8 Tiles
Created: pavan.pareta (13 Dec 2012)
Last edited: arunkam (27 Nov 2013)

Contents

[edit] Introduction

In simple terms, Tile is a shortcut of an application, which is shown on the start screen, also known as a primary tile or default tile. An application can also have one or more additional tiles, known as secondary tiles.

Windows Phone 8 Live Tile

What is a Live Tile?

Live tile is a part of a notification.It is a smart, simple, robust and user friendly alert system which allows you to show quick updates on your phone start screen.

[edit] Live Tiles Templates

Windows Phone 8 has introduced three types of Live Tiles Templates with different sizes.

  1. FlipTileData
  2. CycleTileData
  3. IconicTileData

These tile templates use three standard sizes, which are small, medium, and wide.

Name of Tiles Small (Pixels) Medium (Pixels) Wide (Pixels)
Flip 159 x 159 336 x 336 691 x 336
Cycle 159 x 159 336 x 336 691 x 336
Iconic 110 x 110 202 x 202 N/A

In this example I have built each tile programmatically using C# code

Let’s create a new Windows Phone 8 project and add three buttons to the main page (MainPage.xaml) in order to develop a Flip, Cycle and iconic tile templates. See the following XAML code snippet.

XAML code snippet

       <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Button Name="btnFlipTile" Content="Flip Tile" HorizontalAlignment="Left" Margin="120,131,0,0" VerticalAlignment="Top" Width="207" Click="btnFlipTile_Click" FontSize="28"/>
<Button Name="btnIconicTile" Content="Iconic Tile" HorizontalAlignment="Left" Margin="120,234,0,0" VerticalAlignment="Top" Width="207" Click="btnIconicTile_Click" FontSize="28"/>
<Button Name="btnCycleTile" Content="Cycle Tile" HorizontalAlignment="Left" Margin="120,335,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.533,2.139" Width="207" FontSize="28" Click="btnCycleTile_Click"/>
</Grid>

UI Design View

UI (User Interface) Design View

Note: You can create or update Live Tiles using either XML code or C# code. In this example I have considered C# code.

[edit] Flip Tile Template

Flip tile is also known as a primary or default tile.The phone user has to pin it form application list or from within the application. Flip tile flips from front to back and back to front. The figure shows the structure and properties of flip tiles.

Flip Tile Template

Flip tiles are also supported in Windows Phone 7. To create a Flip Tile, developer needs to set few basic properties such as title, count, a back ground image and a text located on the back of the tile of FlipTileData class. Here, CreateFlipTileData() is invoked when the primary tile is not created on the start screen .Rest of the code deals with updating the tile with data.

       private void btnFlipTile_Click(object sender, RoutedEventArgs e)
{
// find the tile object for the application tile that using "flip" contains string in it.
ShellTile oTile = ShellTile.ActiveTiles.FirstOrDefault(x => x.NavigationUri.ToString().Contains("flip".ToString()));
 
 
if (oTile != null && oTile.NavigationUri.ToString().Contains("flip"))
{
FlipTileData oFliptile = new FlipTileData();
oFliptile.Title = "Hello WP8!!";
oFliptile.Count = 11;
oFliptile.BackTitle = "Updated Flip Tile";
 
oFliptile.BackContent = "back of tile";
oFliptile.WideBackContent = "back of the wide tile";
 
oFliptile.SmallBackgroundImage = new Uri("Assets/Tiles/Flip/159x159.png", UriKind.Relative);
oFliptile.BackgroundImage = new Uri("Assets/Tiles/Flip/336x336.png", UriKind.Relative);
oFliptile.WideBackgroundImage = new Uri("Assets/Tiles/Flip/691x336.png", UriKind.Relative);
 
oFliptile.BackBackgroundImage = new Uri("/Assets/Tiles/Flip/A336.png", UriKind.Relative);
oFliptile.WideBackBackgroundImage = new Uri("/Assets/Tiles/Flip/A691.png", UriKind.Relative);
oTile.Update(oFliptile);
MessageBox.Show("Flip Tile Data successfully update.");
}
else
{
// once it is created flip tile
Uri tileUri = new Uri("/MainPage.xaml?tile=flip", UriKind.Relative);
ShellTileData tileData = this.CreateFlipTileData();
ShellTile.Create(tileUri, tileData, true);
}
}
 
private ShellTileData CreateFlipTileData()
{
return new FlipTileData()
{
Title = "Hi Flip Tile",
BackTitle = "This is WP8 flip tile",
BackContent = "Live Tile Demo",
WideBackContent = "Hello Nokia Lumia 920",
Count = 8,
SmallBackgroundImage = new Uri("/Assets/Tiles/Flip/A159.png", UriKind.Relative),
BackgroundImage = new Uri("/Assets/Tiles/Flip/A336.png", UriKind.Relative),
WideBackgroundImage = new Uri("/Assets/Tiles/Flip/A691.png", UriKind.Relative),
};
}

First of all, we have to identify whether the application tile is available or not on the start screen, using ShellTile API class. Using ShellTile API we can get the current active tile by query. After that, we will instantiate a new object of FlipTileData and set the following properties. After setting the properties, we need to call the Update() method of ShellTile object and it will update the primary tile.

oFliptile.Title = "Hello WP8!!";
oFliptile.Count = 11;
oFliptile.BackTitle = "Updated Flip Tile";
oFliptile.BackContent = "back of tile";
oFliptile.WideBackContent = "back of the wide tile";
oFliptile.SmallBackgroundImage = new Uri("Assets/Tiles/Flip/159x159.png", UriKind.Relative);
oFliptile.BackgroundImage = new Uri("Assets/Tiles/Flip/336x336.png", UriKind.Relative);
oFliptile.WideBackgroundImage = new Uri("Assets/Tiles/Flip/691x336.png", UriKind.Relative);
oFliptile.BackBackgroundImage = new Uri("/Assets/Tiles/Flip/A336.png", UriKind.Relative);
oFliptile.WideBackBackgroundImage = new Uri("/Assets/Tiles/Flip/A691.png", UriKind.Relative);

[edit] Cycle Tile Template

Cycle tile is similar to a windows phone 7.5’s pictures live tile.Cycle tile was not possible via code in Windows Phone 7.5, but it is now possible to create that in Windows Phone 8 using the CycleTileData class.Iit could be a secondary tile of your application. The cycle tile template API allows you to cycles one to nine images in random time interval. Cycle tile does not have back of a tile. Cycle tile have three standard size ; small, medium and wide. Small size tile does not cycle any images, however you can set a static background image, otherwise it will take phone theme color by default.Below figure shows the structure and properties of flip tiles.

Cycle Tile Template

Here is CaycleTileData code snippet. It is invoked when user clicks on Cycle Tile button.

private void btnCycleTile_Click(object sender, RoutedEventArgs e)
{
CycleTileData oCycleicon = new CycleTileData();
oCycleicon.Title = "Hello Cycle Icon!!";
oCycleicon.Count = 9;
 
oCycleicon.SmallBackgroundImage = new Uri("Assets/Tiles/Cycle/159x159.png", UriKind.Relative);
 
// Images could be max Nine images.
oCycleicon.CycleImages = new Uri[]
{
new Uri("Assets/Tiles/Cycle/001.jpg", UriKind.Relative),
new Uri("Assets/Tiles/Cycle/002.jpg", UriKind.Relative),
new Uri("Assets/Tiles/Cycle/003.jpg", UriKind.Relative),
new Uri("Assets/Tiles/Cycle/004.jpg", UriKind.Relative),
new Uri("Assets/Tiles/Cycle/005.jpg", UriKind.Relative),
new Uri("Assets/Tiles/Cycle/006.jpg", UriKind.Relative),
new Uri("Assets/Tiles/Cycle/007.jpg", UriKind.Relative),
new Uri("Assets/Tiles/Cycle/008.jpg", UriKind.Relative),
new Uri("Assets/Tiles/Cycle/009.jpg", UriKind.Relative),
};
 
// find the tile object for the application tile that using "cycle" contains string in it.
ShellTile TileToFind = ShellTile.ActiveTiles.FirstOrDefault(x => x.NavigationUri.ToString().Contains("cycle".ToString()));
 
if (TileToFind != null && TileToFind.NavigationUri.ToString().Contains("cycle"))
{
TileToFind.Delete();
ShellTile.Create(new Uri("/MainPage.xaml?id=cycle", UriKind.Relative), oCycleicon, true);
}
else
{
ShellTile.Create(new Uri("/MainPage.xaml?id=cycle", UriKind.Relative), oCycleicon, true);
}
}

ShellTile API class allows developer to create a Cycle Tile programmatically and navigate to tiles screen.

[edit] Iconic Tile Template

The iconic tile template is a fresh template, that is pioneered in Windows Phone 8. Iconic tile itself is comprehensive. The Iconic Tile template requires two icons as transparent images such as SmallIconImage (110 x 110 in size) and IconImage (202 x 202 in size).It also supports scalability across resolutions. Iconic tile API allows you to set background color.If there is no color set, it will take automatically use the phone theme color.

Iconic Tile Template (Image courtesy of Microsoft)

Here is IconicTileData code snippet.It is invoked when user clicks on Iconic Tile button.

       private void btnIconicTile_Click(object sender, RoutedEventArgs e)
{
IconicTileData oIcontile = new IconicTileData();
oIcontile.Title = "Hello Iconic Tile!!";
oIcontile.Count = 7;
 
oIcontile.IconImage = new Uri("Assets/Tiles/Iconic/202x202.png", UriKind.Relative);
oIcontile.SmallIconImage = new Uri("Assets/Tiles/Iconic/110x110.png", UriKind.Relative);
 
oIcontile.WideContent1 = "windows phone 8 Live tile";
oIcontile.WideContent2 = "Icon tile";
oIcontile.WideContent3 = "All about Live tiles By WmDev";
 
oIcontile.BackgroundColor = System.Windows.Media.Colors.Orange;
 
// find the tile object for the application tile that using "Iconic" contains string in it.
ShellTile TileToFind = ShellTile.ActiveTiles.FirstOrDefault(x => x.NavigationUri.ToString().Contains("Iconic".ToString()));
 
if (TileToFind != null && TileToFind.NavigationUri.ToString().Contains("Iconic"))
{
TileToFind.Delete();
ShellTile.Create(new Uri("/MainPage.xaml?id=Iconic", UriKind.Relative), oIcontile, true);
}
else
{
ShellTile.Create(new Uri("/MainPage.xaml?id=Iconic", UriKind.Relative), oIcontile, true);
}
}

[edit] Output

Here is the output of this sample code

output

[edit] Download

Source code is here File:WP8 LiveTiles.zip

~ Happy Coding ~

[edit] References (MSDN)

- Tiles for Windows Phone

This page was last modified on 27 November 2013, at 00:56.
1859 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×