MVVM using Expression Blend


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.

Up Next
    Ebook Download
    View all
    Learn
    View all