A few years back, Julian Dominguez from Microsoft pattern and practice team proposed a solution that uses Implicit Data Teamplate for WPF MVVM application development. You can read the details in his blog post “Presentation Model with DataTemplates in CompositeWPF (Prism) Sample“. I was working in Xuenn developing WPF applications for sport betting platform at that time and we introduced Julian’s approach to team. We found both advantages and disadvantages of using this approach (I will share with you all the details soon.) but using “Implicit data template” did help a lot for some scenarios. I’ve been requesting this feature to the team again and again for last a couple of years and I’m really glad that Silverlight team added it in Silverlight 5.
What is Implicit Data Template?
Implicit data template is something similar to “Implicit style” that was introduced in Silverlight 4. When you define a data template in <*.Resources> or resource dictionary, you used to define the key over there and reference it from the place where you want to use that data template. With implicit data template, you don’t need to define any key for your data template. There is a new property called “DataType” where you can define the type of data (Model) in data template that you want to use.
The code will be something like that below ~
<DataTemplate DataType="local:MyAwesomeModel">
....
</DataTemplate>
In this example, our model is called “MyAwesomeModel” and we set it to the “DataType” property of data template. Of course, you can create any template you want inside that data template as usual. After that, you can directly bind this model with UI (e.g. ContentControl or ItemControl ). The template that you created will be displayed on the UI when you run the project. How simple it is?
In order to show this feature, I created one demo with metro design in my mind (even thought I’m not professional designer. )
Download : ImplicitDataTemplatesDemo from github
What I did in this sample is pretty simple. I created an interface called “IPerson” which has three properties such as Name, Description, ProfilePhoto. And, I created three models (MichaelSync, ElenaSync and ShwesinSync) that implement “IPerson” interface. Note that I didn’t implement INotifyPropertyChanged or the setter in any of the classes but you may want to implement them in real project.
public interface IPerson {
string Name { get; }
string Description { get; }
BitmapImage ProfilePhoto { get; }
}
In MainPage, I set the DataContext in order to make the bindng work. Yap! I have to set it before initializing the components. I added new property called “People” and filled it up with the instances of models.
public partial class MainPage : UserControl
{
public MainPage()
{
this.DataContext = this;
// Required to initialize variables
InitializeComponent();
People = new List{
new MichaelSync(),
new ElenaSync(),
new ShwesinSync(),
};
}
public IList People { get; set; }
}
There is only one ItemControl that bind to “People” property.
<Grid Width="640" HorizontalAlignment="Left">
<ItemsControl ItemsSource="{Binding People}" Margin="41,84,41,0"/>
</Grid>
I created three data templates with different data type as below.
When you run it, you will see beautiful metro style application with my family photos. I’m just trying to show you one scenario that you can use but if you really want to use MVVM with implicit data template, I would recommend you to read Julian’s post.
Pros and Cons of using Implicit DataTemplate in MVVM
I would say that Julian’s approach is kinda extreme MVVM approach because it limited you from having any code behind code in View but it does help you more code cleaner (Oh no! I’m not counting code. ) and force developers to use MVVM in proper way (like creating blend bahivors or attached properties or etc). Another good thing is that you can directly bind your model with UI without explicitly calling the views.
Good
- Cleaner and encourage the proper way of doing things
- Easier binding
Bad
- sometimes, it makes developers’ life damn difficult.
That’s all from my side.
Happy Silverlighting!
