Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to Create Tiles in Windows Phone 7

This article will help you to know around the variety of tile present and will guide you through the process of coming up a tile for a Windows Phone application.

Introduction

What are tiles? They are nothing but the way to link an application to the home screen of the device. This is done with the help of some options so that the status can be updated. The types of tiles available are Application and Secondary tile.

Application Tile - The type is made use of at the time when application is pinned to the home screen or start screen by the end user so as to make simpler access with the icon of the application present in the application list. Accessing the tile will redirect the user directly to the application so as to easily access the same.

Secondary Tile – Based on the interaction of the user with the application, this type is generally generated programmatically. This type of tile will be utilized to redirect the user to the application and there can only be instance that can be created. To generate a secondary tile, the Create (Url, ShellTileData) needs to be used.

Let us start know and see the process to come up with an Application and Secondary Tile in a step by step manner.

Steps

The very first step that needs to be done is to open Visual Studio and generate or create an altogether a new Silverlight for Windows Phone 7 application. This should be done with a valid project name as can be seen from the below figure.

Representing the New Project added in Visual Studio

Figure 1: Representing the New Project added in Visual Studio

We will now create an application tile and will see the attributes that is required to be assigned in order to create the tile. We need to add 2 buttons so as to trigger the Application and Secondary tile one by one once the page is opened in Visual Studio. Post customizing the design, the UI can be seen as per the below screenshot.

Representing the UI after the customizing the design

Figure 2: Representing the UI after the customizing the design

The next step would be adding the code so as to trigger the Application tile. To do the same, simply navigate to the Application Tile button and then click event. Post doing this the following code can be written.

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 MrBoolTiles
{
    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 = "MrBool";
            AppTile.BackgroundImage = new Uri("RedTile.jpg", UriKind.Relative);
            AppTile.Count = 10;
            AppTile.BackTitle = "MrBool Back";
            AppTile.BackBackgroundImage = new Uri("BlueTile.jpg", UriKind.Relative);
            AppTile.BackContent = " This is Back Content";
            AppShell.Update(AppTile);
        }
    }
}

The task is now to verify if the application is being built correctly and the application is working fine. Also the need is to verify if the Application tile is working fine when the application is pinned to get started. The button F5 can be pressed directly to check build and execute the application. This can help us to see the application loaded to the Windows Phone 7 Emulator as can be seen from the below figure.

Representing the Application loaded to the Windows Emulator

Figure 3: Representing the Application loaded to the Windows Emulator

Access the Application tile button now and we would see the application tile being created on the start or the home screen. In order to verify this, Click on Start button first present at the bottom and then you can select the application present in the list view of the device and then pin to start or initiate. Navigating back to the home or start screen will make you to see the tiles as shown in the screen below.

Representing how the tile looks

Figure 4: Representing how the tile looks

The time is now to create an Application tile which we will begin first by creating a Secondary Tile. We need to add new page Page1.xaml and design it as can be seen from the below coding.

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="Mr Bool" 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>
Representing the UI after the customizing the design

Figure 5: Representing the UI after the customizing the design

C# Code

private void button2_Click(object sender, RoutedEventArgs e)
{
StandardTileData SecTitle = new StandardTileData();
SecTitle.Title = "Mr Bool 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);
}

On Page1.xaml, we would be required to write our requirements now in case we want to some manipulation at the time of accessing the secondary tile. Below lists just the sample page on page redirection.

C# Code

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
base.OnNavigatedTo(e);
}

We are completed with the coding part now. The task is now to build and implement the project and the screen can be displayed with 2 buttons as shown in the screen below.

Representing the Expected Output

Figure 6: Representing the Expected Output

Access the Secondary tile now and we can see the creation of Secondary tile created as shown in the screen below.

Representing the creation of Secondary tile

Figure 7: Representing the creation of Secondary tile

Accessing the secondary tile (Mr Bool Tile) will redirect the user to the Secondary Tile Page (Page1.xaml) as shown in the screen below.

Representing the Secondary Tile

Figure 8: Representing the Secondary Tile

Conclusion

We got to know about the Tile via this article and the process to come up with a simple tile and to assign the same with the basic attributes. Also we learnt about the secondary tile and the process to make use of it on navigation depending on the purpose.



I am a software developer from India with hands on experience on java, html for over 5 years.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login