Windows-8.1

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

Chetan Gulati

Currently am doing B TECH in IT from Delhi Technological University. App development is my passion. Believe in quality rather than quantity.

  • Lumia

    Hey, can you add the changes to get it to work within a Windows RT app? Seems like the namespaces changed. Bitmap rendering seems changed to on WinRT. I can’t get it to work…

    Thanks for your good posts, helped me a lot!

Read more:
How to create your first Windows Phone app
How to change the App name and Tile name of your Windows phone app
Data binding in Windows Phone app – One way binding
Close