Dynamic Item Templates for LongListSelector

For one of the Windows Phone 8 pet projects I am working on, there was a need to list/enumerate available theme resources (see http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff769552(v=vs.105).aspx for the list) and show a preview of each of them on the screen. While it sounded very simple when I started off, it all became too tricky because I wanted this feature to be dynamic. In other words, I was looking for a Windows Phone API sort of thing that would get me the list of all inbuilt theme resources so that any new ones that might be added in future phone versions would automatically be picked up by the app and I do not have to make changes to the app code. After a desperate search everywhere, I came to the conclusion no such API is available in Windows Phone 8 SDK (if you know of any such API, please drop a comment below) and this left me to the only option of hard-coding resource names in my preview app. Well, that was a bit of a compromise!

The second part of the feature is showing a preview of available theme resources (colors, font sizes, font families, text styles, etc.). I decided to stick with a simple ListBox (or a LongListSelector) and “templatize” the list items dynamically so that each item in the list control will have a theme resource applied to it and thus a preview. A couple of screenshots of it below:


Here comes another challenge: change list item template constituents (controls) based on the resource type and apply the resource to that template. For example, I would have a TextBlock for font names, text block styles, font sizes and alike. However, I thought a text block may not be the right choice for brush and color resources; may be a filled rectangle shape could be a better one. So, I went with a Border element so that I can have a TextBlock inside it to display the resource name (Rectangle cannot have child elements). Since there is no support for dynamic item template selection in Windows Phone yet, I have seen people following different (yet similar) strategies to get the dynamic template behavior. One way, for instance, is to have your view model expose multiple DataTemplate properties and define a binding converter that would check the bound data and return an appropriate data template property. Another approach is to define multiple data templates as static resources instead of view model properties. The binding converter would then map the bound data to the appropriate static resource and return it. Of course, there are different ways by which you can implement it.

For the resource preview feature, I went with a slightly different logic. While the fundamental approach of mapping data to item templates remains the same, I decided to construct the data templates dynamically at runtime instead of declaring as static resources because I wanted control over the data template at runtime.

This is how my LongListSelector looks like:


The LongListSelector binds to a simple list of strings representing theme resource names. As you know, since I am not binding to any specific property of my data object, the entire object is passed to my binding converter. For this app, it is just a string representing the resource name that I can use to look up the application’s resource dictionary.


As you can see, the binding value converter constructs the data template using either UI elements directly or XAML markup parsing (I have shown both just for the demo), sets the properties and returns it. The returned content will be the child element of the ContentControl declared in the list item’s data template in XAML.

Hope this helps someone.

UPDATE: I had to disable commenting due to heavy spam comments. Sorry about it.