.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
Gaurav Pal

Home >> Articles >> Silverlight >> Post New Resource Bookmark and Share   

 Subscribe to Articles

MVVM using Expression Blend

Posted By:Mahadesh Mahalingappa       Posted Date: August 13, 2011    Points: 200    Category: Silverlight    URL: http://www.dotnetspark.com  

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

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";

    /// Sample ViewModel property; this property is used in the view to display its value using a Binding.

    public string ViewModelProperty
            return this.viewModelProperty;
            this.viewModelProperty = value;

    /// Sample ViewModel method; this method is invoked by a Behavior that is associated with it in the View.

    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));


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

  d:DesignWidth="640" d:DesignHeight="480">


  DataContext="{Binding Source={StaticResource MainViewModelDataSource}}" d:DataContext="{d:DesignData /SampleData/MainViewModelSampleData.xaml}">


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 .


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 .

 Subscribe to Articles


Further Readings:


No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend