Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Talk:Custom Live Tile Layout with UserControl as image source

From Wiki
Jump to: navigation, search


Hamishwillee - References

Hi Aady

I haven't subedited yet, but a few points:

  1. Excellent choice of topic. The approach of creating a user control and rendering to image for displaying in a flip tile sounds like a good one.
  2. Do you have any references? ie how did you work this approach out? Are there similar articles around that you based this on?

The title is accurate, but can we be more specific? For example we already had an article with a name very like this but changed to Custom Live Tile with Formatted Text (and you should link to this). I think it is OK because the approach you have used is very generic (ie the other article is a more specific implementation). How about "Custom Live Tile Layout with UserControl as image source"



hamishwillee 04:02, 1 July 2013 (EEST)

Croozeus - Re: References

Hi Aady,

I agree with Hamish's points.

WriteableBitmap.Render function does the magic of rendering a UI element to a bitmap. I've seen discussions about this on several forums. It may be good also to cover the corner cases, which are several from what I've seen. For e.g. what if the bitmap returned is null, what happens when you use bindings for data in your UI element, etc.

Suggest you to add such use cases, would add value to the article.



croozeus 08:18, 1 July 2013 (EEST)

Croozeus - Other applications

Just to add - it'd be cool if you can think of more applications of using this functionality. For instance, lock screen currently doesn't give flexibility to add custom text layouts - however using WriteableBitmap.Render, you can generate an image which you can set as lock screen image. I am assuming, that's how Accuweather app does it.



croozeus 08:16, 1 July 2013 (EEST)

Aady - Thanks for the review

Hi Hamish/Pankaj,

Thanks for reviewing the article. Hamish please do change the title as you prefer, I am not too picky on that :D

Added reference. I was trying to make a HTC ONE kinds clock & time widget and that's where i came across this amazing technique and thought to share with others. The referenced article takes care of the lockscreen part. Will try to add some more use cases to it.



Aady 20:07, 1 July 2013 (EEST)

Hamishwillee - Minor subedit


I gave this a minor subedit for English - also decided summary not all that useful in this case so deleted it.

I think that looking at edge cases like "It may be good also to cover the corner cases, which are several from what I've seen. For e.g. what if the bitmap returned is null, what happens when you use bindings for data in your UI element, etc." would add a lot of value.




hamishwillee 07:52, 2 July 2013 (EEST)

Croozeus -

Hi Aady,

Thanks for adding the reference.

>The referenced article takes care of the lockscreen part.

Looks like a very good article - covers both custom lock screen and tiles.

> Will try to add some more use cases to it.

Great. It'll definitely make your article more valuable then the referenced article.

For example, I like the points summarized in this post -

In the process, I discovered a few very important gotchas:

  1. The UIElement that you render has to be in the application’s visual tree when you call the WriteableBitmap constructor. Otherwise, it may not render at all, may lay out incorrectly, may not have access to the correct StaticResources, or databinding may not occur. You can put it in the visual tree, render it and immediately hide it so that the user never sees it if you like. Unfortunately, this rules out the use of XAML to produce live tiles from background agents.
  2. The image must be stored under the special directory \Shared\ShellContent in your isolated storage folder or it will not be accessible by the operating system.
  3. If you don’t close the image’s filestream before creating the live tile you will see a weird bug where the live tile’s image is only visible when you are moving it around the start screen
  4. If you want transparency, you’ll need to save a PNG. For this you will need to use the .NET image tools library as documented on stackoverflow.



croozeus 07:53, 2 July 2013 (EEST)

Aady - amazing observations

Thanks Pankaj for sharing those observations, will include in the topic when I edit it/or if you wish to add those, feel free to do so.



Aady 20:49, 2 July 2013 (EEST)

Mfabiop - Congratulations

Congratulations Aady,

It's a smart solution!

I have just one question: Have you tried to publish an application using this feature? Does the store accepts this customization without problems?

I guess that it would be a good improvement to the article.


mfabiop 22:14, 2 July 2013 (EEST)

Aady - Not yet

Thanks Mfabiop. A a good suggestion, i will create a very simple app and will publish it and update this article with results.

But my guess is that, this process is very much suggested by Microsoft guys themselves, so i don't think there will be any issue regarding publishing.



Aady (talk) 20:33, 3 July 2013 (EEST)

Croozeus - Featured on home page

This article is now featured on Wiki home page. Aady, I renamed the article to what Hamish suggested earlier.



croozeus (talk) 20:05, 8 July 2013 (EEST)

Aady - Thank you

Thanks for changing the title. Glad to see this article as a featured one :)



Aady (talk) 20:07, 9 July 2013 (EEST)

Max Meng -


I have 2 little questions:

1st, I noticed that the image size seems to be set as 336 * 366 in the sample code, which suppose to be 336 * 366 according to the MSDN documentation. Is this intentional or just mistyped? {

    bmp.SaveJpeg ( stream, 336, 366, 0, 100 );   

} If it is intentional, what's the purpose, then?

2nd, I found the (original) code sample failed to create the tile correctly from time to time, I couldn't recall exactly, but it seems always happened on the first time I pin the tile to Start page.

Check the screenshot below:

However, if I resize the tile between different sizes, or if I unpin it and pin a new tile, it might display correctly.

Any idea why this would happen? Any one else noticed the same behavior?

Max Meng (talk) 06:46, 12 November 2013 (EET)

SB Dev -

The SaveJPEG call definitely looks like a typo to me. All other measurements are 336 by 336 as well.

Your Screenshot looks like the Measure- and Arrange-Calls aren't working properly.

SB Dev (talk) 13:59, 12 November 2013 (EET)