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


Top 5 Contributors of the Month
david stephan

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
    {
        get
        {
            return this.viewModelProperty;
        }
        set
        {
            this.viewModelProperty = value;
            this.NotifyPropertyChanged("ViewModelProperty");
        }
    }

    /// 
    /// 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));
        }
    }
    #endregion

}


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

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

 
 
 

  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:

Responses

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