Expression Blend offers us a Project Template for creating MVVM project by default. MVVM Project template can be created by creating Silverlight Databound application.

Well lets create a new Silverlight Databound application as shown below.

Databound application in silverlight

The Blend takes care of creating a MVVM Project Template for us as shown below :

MVVM Project Template

Lets take a deeper look at what Blend has created for us.

Make note that the Important DLLs are already added for us by Blend. In Visual studio we would have to do it Manually.

DLL in MVVM Project

The ViewModel is created as shown below :

public class MainViewModel : INotifyPropertyChanged
{
 public MainViewModel()
{
 // Insert code required on object creation below this point.
 }
private string viewModelProperty = "Runtime Property Value";
/// <summary>
 /// Sample ViewModel property; this property is used in the view to display its value using a Binding.
 /// </summary>
 /// <returns></returns>
public string ViewModelProperty
{
get
 {
 return this.viewModelProperty;
 }
 set
 {
 this.viewModelProperty = value;
 this.NotifyPropertyChanged("ViewModelProperty");
}
}
/// <summary>
 /// Sample ViewModel method; this method is invoked by a Behavior that is associated with it in the View.
 /// </summary>
public void ViewModelMethod()
{
if(!this.ViewModelProperty.EndsWith("Updated Value", StringComparison.Ordinal))
{
this.ViewModelProperty = this.ViewModelProperty + " - Updated Value";
}
}

 #region INotifyPropertyChanged
public event PropertyChangedEventHandler PropertyChanged;

 private void NotifyPropertyChanged(String info)
{
 if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(info));
}
}
 #endregion
}

Also creates a View named as MainView.xaml for us.

<UserControl
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
 xmlns:ic="http://schemas.microsoft.com/expression/2010/interactions"
 xmlns:local="clr-namespace:MVVMBlend"
 mc:Ignorable="d"
 x:Class="MVVMBlend.MainView"
 d:DesignWidth="640" d:DesignHeight="480">
<UserControl.Resources>
 <local:MainViewModel x:Key="MainViewModelDataSource" />
 </UserControl.Resources>
<Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource MainViewModelDataSource}}" d:DataContext="{d:DesignData
/SampleData/MainViewModelSampleData.xaml}">
 <TextBlock Text="{Binding ViewModelProperty}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Button Content="Update Value" Height="41" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,125,0,0">
 <i:Interaction.Triggers>
 <i:EventTrigger EventName="Click">
 <ic:CallMethodAction MethodName="ViewModelMethod" TargetObject="{Binding}"/>
 </i:EventTrigger>
 </i:Interaction.Triggers>
 </Button>
 </Grid>
</UserControl>

Just select the xaml view and move to the Properties Window , you would see somethng like this.

We need not touch the xaml all the modifications could be done from here.

The below highlighted area is the place to work.

Work place in MVVM

Click on the icon shown below:

MVVM application

That would open a Create Data Binding dialog box. Modify it just like that and click ok. The xaml would be updated.

Data binding in MVVM

A Call is made for the MainView.xaml from the startup page MainPage.xaml.

 <Grid x:Name="LayoutRoot" Background="White">
 <local:MainView />
 </Grid>

Lets not modify anything for now. Lets retain the code generated by Blend.

Lets give it a run.

run MVVM application

Hit the Buttoin Update Value.

Databound application

This is a very simple implementation of MVVM offereed by Blend.

In my next post regarding this topic I would describe what other features Expression Blend offers to the Developers and how we can create Business application using Blend. Till Then Happy Coding.