Live Tiles in Windows Phone 7

Introduction

Today, in this article let's explore another concept related to Windows Phone 7, which provides a very flexible way to access the phone using live tiles.

Question: What are Live Tiles?

In simple terms "Tiles Provides Flexible way to access the phone application which enables to navigate to specific link whereby enables us to perform some expected operation". The Live Tiles are of two different types:

Question: What is an Application Tile?

In simple terms "Permanent tiles, cannot be deleted, may or may not be pinned when the application fires up".

Question: What is a Secondary Tile?

In simple terms "Programmatically created Tiles, which can be created, updated and deleted".

Let's get this started off now!!!

Step 1: The Complete Code of MainPage.xaml looks like this:

 <phone:PhoneApplicationPage 
    x:Class="Create_Live_Tiles_Application.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="Creat Live Tiles Application" FontFamily="Verdana" FontSize="22" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Windows 7 Phone" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Button Content="Create Tile" FontFamily="Verdana" FontSize="22" Height="72" HorizontalAlignment="Left" Margin="-12,459,0,0" Name="button1" VerticalAlignment="Top" Width="198" Click="button1_Click" />
<TextBox Height="72" HorizontalAlignment="Left" Margin="85,28,0,0" Name="textBox1" VerticalAlignment="Top" Width="242" />
<TextBlock Height="30" HorizontalAlignment="Left" Margin="105,6,0,0" Name="textBlock1" Text="Please Enter Title: " FontFamily="Verdana" FontSize="22" VerticalAlignment="Top" />
<TextBlock Height="30" Foreground="Red" HorizontalAlignment="Left" Margin="65,423,0,0" Name="textBlock2" FontFamily="Verdana" FontSize="22" VerticalAlignment="Top" />
<TextBlock FontFamily="Verdana" FontSize="22" Height="30" HorizontalAlignment="Left" Margin="65,106,0,0" Name="textBlock3" Text="Please Enter BackContent: " VerticalAlignment="Top" />
<TextBox Height="72" HorizontalAlignment="Left" Margin="85,128,0,0" Name="textBox2" VerticalAlignment="Top" Width="242" />
<TextBlock FontFamily="Verdana" FontSize="22" Height="30" HorizontalAlignment="Left" Margin="99,206,0,0" Name="textBlock4" Text="Please Enter Count: " VerticalAlignment="Top" />
<TextBox Height="72" HorizontalAlignment="Left" Margin="85,242,0,0" Name="textBox3" VerticalAlignment="Top" Width="242" />
<TextBlock FontFamily="Verdana" FontSize="22" Height="30" HorizontalAlignment="Left" Margin="85,320,0,0" Name="textBlock5" Text="Please Enter BackTitle: " VerticalAlignment="Top" />
<TextBox Height="72" HorizontalAlignment="Left" Margin="99,356,0,0" Name="textBox4" VerticalAlignment="Top" Width="225" />
<Button Content="Delete Tile" FontFamily="Verdana" FontSize="22" Height="72" HorizontalAlignment="Left" Margin="134,535,0,0" Name="button2" VerticalAlignment="Top" Width="193" Click="button2_Click" />
<Button Content="Update Tile" FontSize="22" FontFamily="Verdana" Height="72" HorizontalAlignment="Left" Margin="257,457,0,0" Name="button3" VerticalAlignment="Top" Width="193" Click="button3_Click" />
</Grid>
</Grid>

</phone:PhoneApplicationPage>

Step 2: The Complete Code of MainPage.xaml.cs looks like this:

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 Create_Live_Tiles_Application
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
}

private void button1_Click(object sender, RoutedEventArgs e)
{
textBlock2.Text = "";
if (string.IsNullOrEmpty(textBox1.Text) || string.IsNullOrEmpty(textBox2.Text) || string.IsNullOrEmpty(textBox3.Text) || string.IsNullOrEmpty(textBox4.Text))
{
textBlock2.Text = "Please Enter Some Values";
}
else
{
createtiledata.Title = textBox1.Text;
createtiledata.BackContent = textBox2.Text;
createtiledata.BackTitle = textBox4.Text;
createtiledata.Count = Convert.ToInt32(textBox3.Text);
createtiledata.BackgroundImage = new Uri("appbar.next.rest.png", UriKind.Relative);
createtiledata.BackBackgroundImage = new Uri("appbar.refresh.rest.png", UriKind.Relative);
ShellTile.Create(new Uri("/MainPage.xaml", UriKind.Relative), createtiledata);
textBox1.Text = "";
textBox2.Text = "";
textBox3.Text = "";
textBox4.Text = "";

}

}
private void button2_Click(object sender, RoutedEventArgs e)
{
delete();

}

private void delete()
{
Uri uri = new Uri("/MainPage.xaml", UriKind.Relative);
ShellTile tiledelete = ShellTile.ActiveTiles.Where(p => p.NavigationUri == uri).FirstOrDefault();
if (tiledelete != null)
{
tiledelete.Delete();
}
}

private void update()
{
Uri uri = new Uri("/MainPage.xaml", UriKind.Relative);
ShellTile tileupdate = ShellTile.ActiveTiles.Where(p => p.NavigationUri == uri).FirstOrDefault();
StandardTileData obj_Standard = new StandardTileData();
obj_Standard.Title = textBox1.Text;
obj_Standard.BackContent = textBox2.Text;
obj_Standard.BackTitle = textBox4.Text;
obj_Standard.Count = Convert.ToInt32(textBox3.Text);
obj_Standard.BackgroundImage = new Uri("appbar.next.rest.png", UriKind.Relative);
obj_Standard.BackBackgroundImage = new Uri("appbar.refresh.rest.png", UriKind.Relative);
tileupdate.Update(obj_Standard);
textBox1.Text = "";
textBox2.Text = "";
textBox3.Text = "";
textBox4.Text = "";
}

private void button3_Click(object sender, RoutedEventArgs e)
{
textBlock2.Text = "";
if (string.IsNullOrEmpty(textBox1.Text) || string.IsNullOrEmpty(textBox2.Text) || string.IsNullOrEmpty(textBox3.Text) || string.IsNullOrEmpty(textBox4.Text))
{
textBlock2.Text = "Please Enter Some Values";
}
else
{
update();
textBox1.Text = "";
textBox2.Text = "";
textBox3.Text = "";
textBox4.Text = "";
}
}

#region Instance Variables
StandardTileData createtiledata = new StandardTileData();
#endregion