DataTemplate Selector with Silverlight

With Windows Presentation Foundation (WPF) it is very easy to switch your datatemplate in dependency of for example the type of data you want to bind. But Silverlight does not support this “Out-of-box”. So we have investigated some time in our current project to get a similar mechanism. The idea for my solution is, that we have a area in our form which should contains dynamic objects.One of the conditions for the solution was that it should support the common MVVM pattern.

The key point of my solution is to use a DependencyProperty and bind this to our viewmodel instance.

Step 1: Write a user control for the dynamic area which binds the view model

   1: <UserControl x:Class="SDX.FinancialPlanning.Views.Uebersicht.EinzelItemView"

   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

   5:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 

   6:     xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 

   7:              xmlns:Detail1="clr-namespace:SDX.FinancialPlanning.ViewModels.Detail" 

   8:              xmlns:System="clr-namespace:System;assembly=mscorlib" xmlns:CommonHelpers="clr-namespace:SDX.FinancialPlanning.CommonHelpers" 

   9:              xmlns:Detail="clr-namespace:SDX.FinancialPlanning.Views.Detail" 

  10:              mc:Ignorable="d"

  11:     d:DesignHeight="300" d:DesignWidth="400">

  12:     

  13:     <Detail:DetailsViewSelector Content="{Binding SelectedEntryDetails}"  TemplateType="{Binding SelectedEntryDetails}"  >

  14:         <Detail:DetailsViewSelector.Resources>

  15:            <DataTemplate

  16:             x:Key="DetailWertpapierView"

  17:                         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  18:                         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  19:                         xmlns:Control="clr-namespace:SDX.FinancialPlanning.Views.Detail">

  20:                 <Control:DetailWertpapierView />

  21:             </DataTemplate>

  22:             <DataTemplate x:Key="EmptyTemplate">

  23:             </DataTemplate>

  24:         </Detail:DetailsViewSelector.Resources>

  25:         

  26:        

  27:     </Detail:DetailsViewSelector>

  28: </UserControl>

The DetailsViewSelector have two bindings

• Content: Binds the view model to the choosen control
• TemplateType: Binds also the view model to select the view by naming comventions

In my sample I habe only one DataTemplate and a empty Data Template if no corresponding objects could be bound.

Step 2: Implement the Detail View Selector

   1: <ContentPresenter x:Class="SDX.FinancialPlanning.Views.Detail.DetailsViewSelector"

   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

   5:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 

   6:                   Content="{Binding}">

   7:     <ContentPresenter.Resources>

   8:     </ContentPresenter.Resources>

   9: </ContentPresenter>

Code for the Control:

   1: public partial class DetailsViewSelector : ContentPresenter

   2:    {

   3:  

   4:        public static readonly DependencyProperty TemplateTypeProperty =

   5:        DependencyProperty.Register("TemplateType", typeof(DetailViewModelBase),

   6:        typeof(DetailsViewSelector), new PropertyMetadata(new DetailWertpapierViewModel()));

   7:  

   8:        public DetailViewModelBase TemplateType

   9:        {

  10:            get { return (DetailViewModelBase)GetValue(TemplateTypeProperty); }

  11:            set { SetValue(TemplateTypeProperty, value); }

  12:        }

  13:  

  14:        public DetailsViewSelector()

  15:        {

  16:            Loaded += new RoutedEventHandler(OnLoaded);

  17:        }

  18:  

  19:        private void OnLoaded(object sender, RoutedEventArgs e)

  20:        {

  21:            DetailViewModelBase templateType = TemplateType;

  22:            string viewName = templateType.GetType().FullName.Replace("Model", "");

  23:            Type viewType = Type.GetType(viewName);

  24:            if (viewType == null)

  25:            {

  26:                ContentTemplate = (DataTemplate) Resources["EmptyTemplate"];

  27:            }

  28:            else

  29:            {

  30:                DataTemplate dataTemplate = (DataTemplate)Resources[viewType.Name];

  31:                ContentTemplate = dataTemplate;

  32:            }

  33:        }

  34:    }

To have a very flexible mechanism the DetailsViewSelector works with naming conventions to choice the View for the given view model.