How to Create a Custom tile layout with the help of Usercontrol as image source

This is the sixth blog post of this series in which I am going to explain you how to create a custom tile layout with the help of User control as image source.

As we know Windows Phone has got some restrictions on what can be changed in a tile update. For example, on the primary tile you can only specify Title, Background Image, Count (can be only integer data type), Icon etc. But sometimes there may be situation that you need more than one counter on your tile, or you may need to change the position of icon.

The solution to this is to create a User Control and stream it to a bitmap image – then use this image as the background source for our tile (a User Control is a UI control made up of existing UI elements but with its own behavior – you can use it just like any other default controls available).

So in this article I will show how you can render virtually any custom tile layout. We shall be building a note making app in this following post.

1. First of all create a new project Usercontroltiles.

 

 

2. To create the following UI on the Mainpage.xaml.

 

 

Add the following code given below in the Grid named ContentPannel on Mainpage.xaml.

3. Now add two user controls having the name mediumcontrol and widecontrol in your solution.

Now you need to edit the following properties of both Usercontrols as given below a) Set the width and height of mediumcontrol as 336*336(medium tile size) and that of widecontrol as 691*336(wide tile size).

 

 

b) Remove the Background property attribute from the Layoutroot grid.

 

 

c) Add the following code given below in the LayoutRoot grid for both the controls.

 

 

For Medium control code is

For Wide control code is

4. Now we are ready to make customize tile with the templates defined above in the usercontrol. To pin the tile on Startscreen with a text note we need to follow the certain steps as given below. Step1: Get the textmessage to be written on tile from the messagebox textbox on Mainpage.xaml.

Step2: Create a user control instance of medium control and widecontrol with messageblock of both controls containing the text given in messagebox.

Step 3: Save the user control images in isolated storage. These image file will be later used as the background images of our tile.

Note

Every image should be stored in ShellContent directory and every image file for a tile should have a unique name in isolatedstorage. We will be using a function to generate a unique path file name for the images. The code for the following is given below.

If you have any doubts you can refer to the following post.
http://www.windowsapptutorials.com/windows-phone/how-to-create-secondary-tiles-on-windows-phone-start-screen-using-images-from-isolated-storage

Step 4: This is the final step where we will create a FlipTile. And then assign the backgroundimage attribute of this tile with the source of user control’s images.

Thus the code for the Click event handler of Pin button will be following comprising of the above four steps is given below.

Namespace required are

Code for the event handler is

5. Now run the application on emulator you will observe the following output.

Note

You can customize the tile layout according to your wish as I have done for the following post by adding new UI elements in usercontrols.

I hope this post will be helpful to you. You can download the full source project file from the link given below.

Download full source project file Usercontrols.zip

How to Create Secondary tiles on Windows phone start screen using images from isolated Storage

This is the fifth blog post of this series in which I am going to explain you how to create secondary tiles on Windows phone start screen using the images which are stored in isolated storage.

 

1. First of all create a new project having the name Secondarytile.

 

 

2. Then add two buttons and an image control on the MainPage.xaml to choose an image and second one to create a secondary tile on start screen.Image control is used to display the image selected from gallery.

 

3. Our first step would be to choose an image from gallery and save it to isolated storage so that it could be used as and background image for a secondary tile.

We will be using the Photochooser task for selecting an image from gallery. The code for the following is given below.

Namespace required are


 

File name of image

Code for click event handler of Choose button


 

If you have any doubts related to Photochooser task. You can refer to the following post.

http://www.windowsapptutorials.com/windows-phone/isolated-storage/isolated-storage-in-windows-phone-app-reading-and-saving-images/

4. Our next step would be to create a Flip tile on start screen with background image as of that selected from the gallery above.

The code for click event handler of the create button is given below

 

 

If you have any doubts related to the method which is being used to create secondary tiles on start screen. You can refer to the following post.

http://www.windowsapptutorials.com/windows-phone/how-to-create-secondary-tiles-on-windows-phone-start-screen-using-c/

Note: In the above method I have used one image source for all three sizes. You can set it individually using three different images.

5. After you will debug the application on emulator. You will observe the following output as shown below.

I hope this post will be helpful to you. You can download the full project source file from the link given below.

Download full source project file Secondarytile.zip
 
 

How to update and delete Secondary tiles on Windows phone start screen using c#

This is the fourth blog post of this series in which I am going to explain you how to update or delete secondary tiles on Windows phone start screen.

We will be using the following reference of the last post to create secondary tiles on start screen.

http://www.windowsapptutorials.com/windows-phone/how-to-create-secondary-tiles-on-windows-phone-start-screen-using-c

 

1. First of all create a new project having the name Tiles.

 


 

2. Then add three buttons on the MainPage.xaml to Create, Update and Delete a secondary tile which is pinned on start screen.

 


 

3. Our initial step would be to create a tile on Windows phone Startscreen.

 

Creating a Secondary tile

The code for the click event handler of create button is given below. We will be using Iconic tile template to create a Secondary tile on start screen.

 

To uniquely identify the tile that is created on start screen. We will be using battery as id in the Navigation URI of tile.

 

 

Output images

 

Medium tile


 

Wide tile


 

Updating a Secondary tile

To update a secondary tile we must first check whether the tile with the given id exists on start screen. If the tile with current id exists on start screen we will be using Update(ShellTileData) method to update the tile.

 

Different steps we need to follow to update the tile are

1. First identify the tile with the given id on start screen.

2. Second step is to prepare the Shell tile data class with updated properties.

3. Then call the update tile method to update the tile.

 

The code for the click event handler of the update button is given below.

 

 

Output images (after calling update function)

 

Medium tile


 

Wide tile


 

This is the most common approach followed by most developers in the market to update the live tiles especially the tiles which show the battery life of your phone. In the coming post of this series I shall be explaining you to how to make live tiles for your Windows phone apps.

 

Deleting a Secondary tile

A secondary tile of Windows phone app that is pinned to start screen can be deleted by one of the following methods given below.

 

1. When the application is uninstalled from the phone all the secondary tiles of that application are automatically deleted from the start screen.

2. User can easily unpin the tile from start screen manually.

3. We can easily delete the tile from start screen dynamically using the Delete() Method.

 

Different steps that you need to follow to delete a secondary tile

1. Identify the tile with the given id on start screen.

2. Call the delete method to delete the tile from start screen.

 

The code for the click event handler of the delete button is given below.

 

 

Note: I have used the Iconic Template class in this following post to explain you the update and delete methods of the ShellTile Class. But you can follow the same approach for the different tile templates.

 

I hope this post will be helpful to you. If you have any doubts related to this article you can download the full project source file from the link given below.

 
Download full project source file Tiles.zip
 

In the coming post of this series I shall be explaining you how to create live tiles for your Windows phone application. Stay tuned or you can subscribe to our newsletter.

 
Introduction to tiles in Windows phone app
Different tile templates and their properties in Windows phone
How to create Secondary tiles on Windows phone start screen using c#
 


How to create Secondary tiles on Windows phone start screen using c#

This is the third blog post of this series in which I am going to explain you how to create a secondary tile on Windows phone start screen.

 

Before going ahead I would like to give you a short summary on Secondary tiles.

 

What are Secondary tiles?

A secondary Tile is created programmatically by an application based on interaction from the user. Typical uses for a secondary Tile include scenarios where you want to show important information to the user on the Start screen of the phone.

 

1. First of all create a new project having the name Secondarytiles.

 


 

2. Then create a new image folder having the name Images in your project and add some sample images to it.

 


 

3. We shall be using Create(Uri, ShellTileData) method to create a Tiles on Start Screen. Whenever this method will be called the UI will navigate to Start Screen.

 

The different parameters in the above method are

1. Uri – It is the Uri of any page within the application where the application will navigate to whenever user taps on this tile from start screen. It should be unique for each secondary tile. By unique uri we mean that more than one tile can navigate to the same page but each should have different tag in the uri which will be explained in the further post.

2. ShellTileData– This data class is used to provide different properties to the tiles created through this method. It can be of different types.

 

Note: One property of the Secondary tiles which are created through the above method is that each should have a unique uri.

 

So if we try to create more than one secondary tile having the same uri. It will give an exception and will lead to crash. So as to avoid the following situation we use the following method checktile given below to check whether any tile with same uri exist before or not on start screen.

 

 

As there are three different tile templates in Windows phone 8/8.1. We will be discussing an example of each of the types.

 
http://www.windowsapptutorials.com/windows-phone/different-tile-templates-properties-windows-phone
 


 

Flip tile

For creating a flip tile on start screen we shall be using FlipTileData class as discussed in our previous post.

Create a button on the MainPage to pin the tile. The code for click event handler of the button is given below.

 

 

Output Images:

 

Front


Back


 

Cyclic tile

For creating a cyclic tile on start screen we shall be using CyclicTileData class as discussed in our previous post.

Create a button on the MainPage to pin the tile. The code for click event handler of the button is given below.

 

 

Output Images:

 

Medium


Wide


 

Iconic tile

For creating an iconic tile on start screen we shall be using IconicTileData class as discussed in our previous post.

Create a button on the MainPage to pin the tile. The code for click event handler of the button is given below.

 

 

Output Images:

 

Medium


Wide


 

As a developer I would like you to experiment with the different tile templates to get a better understanding of tiles.

 

I hope this post will be helpful to you. If you have any doubts related to this post you can download the full project from link from the link given below.

 
Download full project source Secondarytiles.zip
 

In the next blog post of this series I will explain you how to update and delete secondary tiles pinned on start screen.

 
Introduction to tiles in Windows phone app
Different tile templates and their properties in Windows phone
How to update and delete Secondary tiles on Windows phone start screen using c#

Different tile templates and their properties in Windows phone

This is the second blog post of this series in which I am going to tell you about different tile templates and their properties in windows phone application.

In case you have missed the last post you can refer to the following link given below

 
http://www.windowsapptutorials.com/windows-phone/introduction-to-tiles-in-windows-phone-app
 

Different tile templates are

1. Flip Tile Template

2. Cyclic Tile Template

3. Iconic Tile Template

 

First of all I shall be starting up with one of my favorite Flip tile template that is mostly used by developers for creating secondary tiles on start screen.

 

Flip Tile Template

The following image given below shows the property name associated with each aspect of the Tile template.


Tile Size info

Small tile Medium tile Wide tile
159*159 pixels 336*336 pixels 691*336 pixels

 

Creating a tile class

We can use the FlipTileData class to create or update any of the following properties of the tile.

The following code example shows how to create or update a flip Tile class using C# code

 

 

We will be showing the implementation of the following code in the next post of this series.

Note: You can also leave any of the following properties undefined. By default it will take values from the system.

 

Cyclic Tile Template

The following image given below shows the property name associated with each aspect of the Tile template.


 

Tile Size info

Small tile Medium tile Wide tile
159*159 pixels 336*336 pixels 691*336 pixels

 

Creating a tile class

We can use the CycleTileData class to create or update any of the following properties of the tile.

The following code example shows how to create or update a Cyclic Tile class using C# code

 

 

Note: You can specify minimum 1 and maximum 9 local image URLs not more that.

 

Iconic Tile Template

The following image given below shows the property name associated with each aspect of the Tile template.


 

Tile Size info

Small tile Medium tile Wide tile
159*159 pixels 336*336 pixels 691*336 pixels

 

Creating a tile class

We can use the IconicTileData class to create or update any of the following properties of the tile.

The following code example shows how to create or update a Icon Tile class using C# code

 

 

In my next post of this series I will explain you how to create secondary tiles on start screen using the above three tile templates.

 

Introduction to tiles in Windows phone app
How to create Secondary tiles on Windows phone start screen using c#
How to update and delete Secondary tiles on Windows phone start screen using c#

Introduction to tiles in Windows phone app

In this blog post I shall be giving you a brief introduction of different types of tile which are available in Windows phone application.

Tiles are nothing but linking an application to the home screen with some options to update the status.

 

There are two types of tiles

1. Primary tile or Default tile – All apps have at least one Tile, known as the Primary Tile, which displays on the Start screen when a customer pins your app from the App list.

2. 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 for a single tile. We need to use Create(Uri, ShellTileData) method to create a secondary tile.

 

Note: There is only one primary tile for an application that is present on start screen. But there can be one or more secondary tiles that can be pinned to start screen by an application.

 

Different Tile templates

There are three different types of Tile templates which are available in Windows phone of different sizes

 

FlipTile

This tile consists of two parts, one front and one back. The tile flips between these two. The flip tile can contain both images and texts.

 


 

Cycle Tile

Cyclic tile contains up to 9 images which are changed in a cycle. There can also be text etc in the tile but the text are the same of all images since the image are just background images.

 


 

Iconic Tile

This shows a fix tile but with changeable text and numbers .Can also contain an icon of the app.

 


 

In the following posts I will explain you how to create, update and delete different types of tiles on start screen and their properties.

 

Different tile templates and their properties in Windows phone
How to create Secondary tiles on Windows phone start screen using c#
How to update and delete Secondary tiles on Windows phone start screen using c#

Hub tile in Windows phone app – Part 1: Introduction

Hub tiles is a control that enables you to add animated and informative tiles to your application. A HubTile can have Image, Title, Message and Notification. HubTiles can be grouped using the GroupTag property. They are animated randomly using the following effects:

1. Flip animation with PlaneProjection

2. Translate animation

In this first article related to Hub tile I will show you how can you add Hub tile to your app and what are the key concepts and API associated with it.

 

Getting Started

Hub tile is a component that is present in the Windows phone toolkit assembly. To use the Hub tile in your app you first need to add the following toolkit into your project.

You can add the Windows phone toolkit to your project with the help of NuGet Package Manager.

 

 

If you don’t know how to integrate a toolkit with your project you can refer to the following blog post.

http://www.windowsapptutorials.com/windows-phone/how-to-integrate-a-toolkit-or-third-party-sdk-with-windows-phone-app-using-nuget-package-manager-2/

 

How to add Hub tile using Xaml

There are two ways of adding a Hub tile control using Xaml.

First way:

First one is to directly add it through the toolbox containing different Windows phone controls. You can simply Drag and drop the Hub tile control from the toolbox into the phone page.

If the Hub tile control is not present in toolbox you can follow the steps given below to add the Hub tile control into your toolbox.

 

1. Go to Toolbox in your Visual studio and right click on general category and select Choose Items.

 


 

2. Select the Windows phone component tab or Windows phone Silverlight control tab from choose items dialog box.

3. The tick the Hub tile control and click ok to include it in your toolbox.

 


 

4. Hub tile control will be included in the general category of your toolbox.

 

Second way:

Second way is to directly add the Xaml code. To directly add the Xaml code of Hub tile you need to add the following namespace given below in Xaml window.

Namesapace

xmlns:toolkit=”clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit”

 
add
 
Hub tile example

<toolkit:HubTile Title=”HubTile” Message=”Hello everyone” x:Name=”hubTile” Margin=”142,217,141,333″/>


How to add Hub tile dynamically using C#

You can also add Hub tile dynamically into your application using C#. An example is given below.

Consider the following code

We can see that in above function a new hub tile is being created and is being added into the Content panel grid of the page.

 

Different properties of Hub tile

1. Title

Title is a dependency property of type string. It gets or sets the title of the HubTile control.

 

2. Message

Message is a dependency property of type string. It gets or sets the displayed message of the HubTile control, displayed in small font.

Example 1:

<toolkit:HubTile Title=”HubTile” Message=”Hello everyone”/>

Front image


Back image


In this tile Title of the tile is – HubTile and Message is – Hello everyone

 

3. Source

Source is a dependency property of type ImageSource. It gets or sets the image source of the HubTile control.

Example 2:

<toolkit:HubTile Title=”HubTile” Message=”Hello everyone” Source=”/logo.jpg”/>

Front image


Back image is same as the previous example.

 

4. DisplayNotification

DisplayNotification is a dependency property of type bool. It determines the flag for new notifications.

 

5. Notification

Title is a dependency property of type string. It gets or sets the notification alert of the HubTile control displayed in large font at the back of the tile.

Example 3:

<toolkit:HubTile Title=”HubTile” DisplayNotification=”True” Notification=”2 messages” />

Back image


Front image is same as that of Example 1.

 

6. Background

One of the most important property of Hub tile with the help of which you can change the background color of your tile.

Example 4:

<toolkit:HubTile Background=”Blue” Title=”HubTile” DisplayNotification=”True” Notification=”2 messages” />

Back image


Front image will be same as that of previous example but background color will change to blue.

Another interesting thing that you can do with the help of background property is that you can set the background to image source rather than setting it to any color.

Example 5:

<toolkit:HubTile Source=”/logo.jpg” Message=” ” >

<toolkit:HubTile.Background>

<ImageBrush Stretch=”UniformToFill” ImageSource=”/logo 2.jpg”/>

</toolkit:HubTile.Background>

</toolkit:HubTile>

 

Front image

Back image


 

The above example will create a Hub tile which will have the following front and back images.

Note: Remember to add message property into the code otherwise the tile will not flip and the tile will remain frozen.

 
For more information about Data binding in Hubtiles and Freezing of tiles you can refer to the following blog post

 
Hub tile in Windows phone app – Part 2: Data binding and Freezing of tiles