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.