MVVM using Expression Blend

In this article we are going to see how we can use Expression Blend to create a Sample MVVM Project.

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.


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


 
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.


 
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.


 
Click on the icon shown below:


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


 
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.


 
Hit the Buttoin Update Value.


 
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.