How can I create a custom live tile in Windows Phone 8.1?

Question

I wanted to ask how it's possible to achieve something like this (first wide tile):

http://oi59.tinypic.com/149p6s8.jpg

I know that there are only a limited number of live tile templates and this is the list I found on Microsoft's website:

http://msdn.microsoft.com/en-us/library/windows/apps/hh761491.aspx

There isn't any template that looks like what I'm looking for, so is there any other way to create a custom tile specyfing text size and position? Thank you!

Solution 1

You need to create an image (use a custom control and render an image from it) and use it has a bakcground.

This link could help for generating the image: http://spasol.wordpress.com/2013/06/24/creating-custom-live-tiles-for-windows-phone/

And here are the template available for universal app : http://msdn.microsoft.com/en-us/library/windowsphone/develop/hh761491.aspx

Solution 2

On Windows Phone 8.1 (or Windows 8.1) you can use the RenderTargetBitmap class. It has a method called RenderAsync() that takes a UIElement object as parameter. You can then use the RenderTargetBitmap object as an ImageSource to display it in the tile.

Comments

[fantastik78]

This could help rendering the image, new feature on WP8.1 msdn.microsoft.com/en-us/library/windowsphone/develop/…

[Evorlor]

your first link is for windows 8.0, and your second/third link are for internet explorer websites

[fantastik78]

@Evorlor I you really sure of you ? I quite sure that xaml is not a web technologie. Also the introduction of the second article clearly states that this is for windows and windows phone.

[Evorlor]

I was sure, but when I checked your links again, they weren't what I thought. Oops. Srry

[Cabuxa.Mapache]

"You can then use the RenderTargetBitmap object as an ImageSource to display it in the tile." That's not correct, you can use the saved image generated with the "RenderTargetBitmap" class to update your Tile.However, it has some implications as for example your UIElement MUST be in the visual tree to generate the image.