Post
Ask Question

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:

1.gif

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

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel 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="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>

        <!--ContentPanel - place additional content here-->
        <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>

    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

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

    }
}

Step 3: The Output of the Application looks like this:

CreateTile1.png

CreateTile2.png
Step 4: The Output of the Create Tile Application looks like this:

CreateTile3.png
Step 5: The Output of the Update Tile Application looks like this:

CreateTile4.png

I hope this article is useful for you.


Similar Articles
MVC Corporation
MVC Corporation is consulting and IT services based company.