This example stays very simple. It shows a list box that contains the result of a search.  Soda’s and Alcoholic Beverages are displayed in different colors and list the calories or the alcohol content respectively. I decide to color code the beverages the following:

• Red: Sodas with high calorie content
• Green: Sodas with low calorie content
• Orange: Alcoholic beverages with high alcohol content
• Yellow: Alcoholic beverages with low alcohol content

Instructions

As I explained in “Windows Presentation Foundation (WPF) Development (2 of 4)”, MVVM Light gives you a nice project template pattern. For our example, we start implementing the Domain Model, Domain Service (as an in-memory emulator only), View Model and finally the View.
 

Here the road-map for our implementation:

1. Domain Model
2. Domain Service
4. View
5. Templates
6. Template Selector
 

1. Domain Model
Create a new MVVM Light project in Visual Studio
In the Model folder implement the follwing three classes. For this example, they can be simple POCOs:
 

2. Domain Service
Next implement the data service with one simple method that returns an list of Beverages

The emulator class just instantiates a number of sodas and alcoholic beverages:

3. Model View
For this, open the existing MainViewModel.cs that was created by the MVVM Light code project.
All the Model View will contain is an Observable collection property that is bindable to a ListBox later on. In addition, it instantiates the Data Serice in its constructor:

For the Property use the MVVM Light code snippet called: mvvminpc (not really needed for ths example, but it is a good habit to implement that way):

 Compile and run. We are done with our backend!
 

4. View
Now open Expression Blend and drag a list box onto your window. Next, bind the ‘ItemSource’ to our Property in the ViewModel.

As you can see, the beauty of using MVVM Light is its ‘blendability’! By binding the list item source to the property in our ViewModel and the fact that we initialized the Property through our emulator data service, we have real model data in our Blend environment!
Obviously, since we haven’t created any visual templates yet the list box display the default ToString() values of each element.

5. Templates
Now let’s create a template: right click on the list box and select ‘Edit additional templates’ --> ‘Edit generated items’--> Create empty…

Now add a TextBox to the Grid in the new template and bind the Text attribute to the Name property of our beverage instances. Also, apply color and other visual changes to the template so it looks the way you want it for Soda-High.

You finished one template. Now repeat and create 3 more templates Soda-Low, Alcohol-High and Alcohol-low.

6. Template Selector
Of course, when you run the application you will only see the last selected template. We now have to tell the ListBox in Blend to choose one of the templates according to some rules. We do that by subclassing the standard Data Template Selector class and by overriding the ‘SelectTemplate’ method. As you see below, you can make it as complex as you wish, at the end it just needs to return an existing DataTemplate instance:

Next you have to make the Template Selector available in Expression Blend. I haven’t figured out yet how to configure this in Blend, so I manually edited the MainWindow.xaml file. The changes are high-lighted below:

Once you are done, rebuild and run it. It will now display 4 different templates according to our logic in the Template Selector class.

You can dowload the project from here: download