Data Template Selector in Windows 8 Metro XAML App
It has been work around to have more than one data template in a list to display the data. In Windows 8 it has been eased, WinRT introduces the DataTemplateSelector class, where we could have more than one template to display in an items source control in Windows 8. In this article we would discover that.
To explore the sample, you definitely need Windows 8 Consumer Preview and Visual Studio 2012 RC.
As you see below, I have created a Windows Metro Style Blank App in XAML.
We’ll create a class which would inherit from the class DataTemplateSelector, which requires “Windows.UI.Xaml.Controls” to be referenced.
Now we would add the number of properties of type DataTemplate, which requires “Windows.UI.Xaml” to be referenced.
As you see above, we have three properties of type DataTemplate, such as PictureTemplate, VideoTemplate, StoryTemplate.
We would have the SelectTemplateCore method overridden, and there we would define the logic for selecting the template based on. As you see in the below image, the type is checked to provide the template. You could have your own logic based on your own requirement.
Now we would add three templates, as StandardStyles is a Resource Dictionary provided by the template, we would use it for storing our DataTemplates.
Design Note: While designing DataTemplates for a DataTemplateSelector, keep in mind that the DataTemplate should have same Height and Width, of the parent container (Grid, StackPanel, Border, etc…), if you are providing Margin or padding for it, should be the same for all.
The following Template describes a DataTemplate for a Video Data.
The following Template describes a DataTemplate for an Image Data.
The following Template describes a DataTemplate for a Story Data.
Now we have to add reference of the namespace where the TemplateSelector is located, in our case we have created in Common, so be it.
We would add the DataTemplateSelector in the resources.
And we would use it, as follows: it has to be a StaticResource to ItemTemplateSelector property.
Assuming we have sample data (Dig into code, to find out about the sample data), we are running the application.
And we have successfully displayed a list with multiple DataTemplates.
Hope this article helps, thanks for reading.
Source Code: Click Here
Article as PDF: Click Here
Related Posts:
1) FileSavePicker in Windows 8 XAML App
2) FileOpenPicker in Windows 8 XAML App
3) Save as Image in Picture Library in Windows 8 XAML Metro App
4) Remove Windows 8 from your Dual-Boot Setup
Pingback: FileSavePicker in Windows 8 XAML App « Method ~ of ~ Tried
Really nice post…. i was looking for this solution since couple of days….thanks.
Btw i liked your Blog name too “Method ~ of ~ Tried”, looks inspired Tim Heuer’s “Method ~ of ~ failed” but more meaningful.
Hey one request, do you have sample code for custom GroupStyleSelector. I am trying but not working out. group parameter in SelectGroupStyleCore() is coming as null at level=0 and DependencyObject at ;level=1
Any help in this will really be helpful.
Pingback: Save as Image in Picture Library in Windows 8 XAML Metro App « Method ~ of ~ Tried
Thank you very much for sharing your code and time. I had been looking for this solution, but no one had exactly what i needed. Mostly things that related to WPF, and silverlight…but you had the solution for Windows 8. Thank you from East Los Angeles California.
Pingback: No implicit data templating in Metro :( « Jesper Hyldenbrandt Bjerre
Pingback: WinRT. DataTemplateSelectors en aplicaciones Windows Store. | Javier Suárez Ruiz | Blog
Thank you very much for shared. It’s so helpful.
brilliant article thanks
hi, i tried to run your source code but i got an error
An exception of type ‘Newtonsoft.Json.JsonReaderException’ occurred in mscorlib.dll but was not handled in user code
Additional information: Unexpected character encountered while parsing value: A. Path ”, line 0, position 0.
what should i do? thank you
The topsy rest api needs a key, which is recently added. The DataTemplateSelector would work with other api.
This was for demonstration purposes only, you might consider binding with your own application requirement.
Thanks. Helpful !
Nice Article… I need one more info like how do i display these items by grouped like Videos, photos, story separately
NIce idea. I would try to work on this idea.
Thank you very much. I replaced my converter with a data template selector. The converter returned a default image if no folder thumbnail was available.
Your solution is more straightforward and yet more flexible. I still need the ThumbnailToBitmapConverter, but now it only does what it says.
The selector:
class FolderInfoTemplateSelector : DataTemplateSelector
{
public DataTemplate FolderWithThumbnailTemplate { get; set; }
public DataTemplate FolderWithoutThumbnailTemplate { get; set; }
protected override DataTemplate SelectTemplateCore(object item)
{
var folderInfo = item as FolderInfo;
if(folderInfo != null)
{
return folderInfo.Thumbnail != null ? FolderWithThumbnailTemplate : FolderWithoutThumbnailTemplate;
}
return base.SelectTemplate(item);
}
}
—
…
My spouse and I stumbled over here from a different web address and thought
I might check things out. I like what I see so now i’m following you.
Look forward to looking over your web page for a second time.
Thank you so much! Still useful in 2015 😀