Use Prism data template selector in Windows Phone app

Quite often you would like to have a Collection in your view model that supports multiple types that derives from the same base type. Along with the different subclasses, you might want different data templates in your view, one for each type. Microsoft Prism can help you do this in an easy way and automatically select correct template for each type. This post will show how to do it on Windows Phone and you can also download the source code for the demo project (Windows Phone 7.1 for compatability) at the bottom of the page.

First of all, use Nuget to install Prism Phone to your project.
nuget prism phone

Now, lets play with an example where we want to present a Schedule that contains meetings and trips. This gives us a solution that looks like this.

We edit our simple models so they look like this;

namespace PrismTemplateSelector.Models
{
    public class ScheduleItem
    {
        public DateTime StartDate
        {
            get;
            set;
        }

        public DateTime StopDate
        {
            get;
            set;
        }
    }
}
namespace PrismTemplateSelector.Models
{
    public class Meeting : ScheduleItem
    {
        public string MeetingOrganizer
        { 
            get; 
            set; 
        }
    }
}
namespace PrismTemplateSelector.Models
{
    public class Trip : ScheduleItem
    {
        public string Destination
        {
            get;
            set;
        }
    }
}

Now we will add some code to our view model to add some demo data for our view.

namespace PrismTemplateSelector.ViewModels
{
    public class MainPageViewModel
    {
        public MainPageViewModel()
        {
            Items = new ObservableCollection();
            LoadDemoData();
        }

        public ObservableCollection Items { get; set; }

        private void LoadDemoData()
        {
            Items.Add(new Meeting()
            {
                StartDate = DateTime.Now.AddHours(1),
                StopDate = DateTime.Now.AddHours(4),
                MeetingOrganizer = "Todd Schmidt"
            });
            Items.Add(new Trip()
            {
                StartDate = DateTime.Now.AddDays(4),
                StopDate = DateTime.Now.AddDays(14),
                Destination = "New York"
            });
            Items.Add(new Meeting()
            {
                StartDate = DateTime.Now.AddDays(3),
                StopDate = DateTime.Now.AddDays(3).AddHours(1),
                MeetingOrganizer = "Gilian Pearson"
            });
        }
    }
}

Now when that is all set up, lets look at the magic in our xaml. First of all we will add namespace for Prism into our xaml-view.

xmlns:prism="clr-namespace:Microsoft.Practices.Prism.ViewModel;assembly=Microsoft.Practices.Prism"

After this we will start to write our data template and add them to our resources on the page. Note that the DataTemplate x:key shall be the name of the type you wish to bind to the template.

    
        

        
            
                
                    
                        
                            
                                
                                
                                
                            
                            
                                
                                
                            
                            
                            
                            
                            
                            
                            
                        
                    

                    
                        
                            
                                
                                
                                
                            
                            
                                
                                
                            
                            
                            
                            
                            
                            
                            
                        
                    
                
            
        

    

So finally we will tie Everything together and apply the templateselector to our listbox.


The result will now be;
prism result

download source code