Beginning MVVM in Silverlight Part 1

                     This article provides you an introduction to the Model-View-ViewModel (MVVM) pattern. It’s for the beginners who are learning the pattern have very little to go on and a lot of conflicting resources to wade through in order to try to implement it in their own code. It’s easy and straightforward to understand the value of the pattern and how it can be implemented. MVVM is really far simpler.

Model:

            Its domain object, which represent entity (usually a class with some properties),
        for example consider Employee Class with some properties like Employee Name, Age, qualification etc.

View:

It’s the only thing the end user really interacts with, n MVVM, the view is active. As opposed to a passive view which has no knowledge of the model and is completely manipulated by a controller/presenter, the view in MVVM contains behaviours, events, and data-bindings that ultimately require knowledge of the underlying model and view model. While these events and behaviours might be mapped to properties, method calls, and commands, the view is still responsible for handling its own events, and does not turn this completely over to the view model.

One thing to remember about the view is that it is not responsible for maintaining its state. Instead, it will synchronize this with the view model.

Example:

<Grid x:Name="LayoutRoot" Background="White" HorizontalAlignment="Center" VerticalAlignment="Top" >

        <Grid.RowDefinitions>

            <RowDefinition Height="auto"></RowDefinition>

            <RowDefinition Height="auto"></RowDefinition>

            <RowDefinition Height="auto"></RowDefinition>

            <RowDefinition Height="auto"></RowDefinition>

            <RowDefinition Height="auto"></RowDefinition>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="auto"></ColumnDefinition>

            <ColumnDefinition Width="auto"></ColumnDefinition>

        </Grid.ColumnDefinitions>

        <!--First Row-->

        <TextBlock Text="Name" Grid.Row="0" Grid.Column="0" Width="auto" Height="auto" Margin="5" />

        <TextBox Text="{Binding EmployeeName,Mode=TwoWay}" Grid.Row="0" Grid.Column="1" Width="100" Height="25" Margin="5"/>

       

        <!--Second Row-->

        <TextBlock Text="Age" Grid.Row="1" Grid.Column="0" Margin="5" />

        <TextBox Text="{Binding EmployeeAge,Mode=TwoWay}" Grid.Row="1" Grid.Column="1" Width="100" Height="25"  Margin="5"/>

        <!--Third Row-->

        <TextBlock Text="DateOfJoin" Grid.Row="2" Grid.Column="0" Margin="5" />

        <ctrl:DatePicker SelectedDate="{Binding DateOfJoin,Mode=TwoWay}" Grid.Row="2" Grid.Column="1" Width="100" Height="25"  Margin="5" />

        <!--Fourth Row-->

        <TextBlock Text="Qualification" Grid.Row="3" Grid.Column="0" Margin="5" />

        <ComboBox Margin="5" ItemsSource="{Binding EmployeeQualification,Mode=TwoWay}" SelectedValue="{Binding SelectedQualification,Mode=TwoWay}"

                  Grid.Row="3" Grid.Column="1" Width="100" Height="25" />

        <!--Fifth Row-->

        <Button Command="{Binding UpdateDetailsCommand}" Grid.Row="4" Grid.Column="1" Width="60" Height="25" Content="Update" Margin="5" />       

    </Grid>

View Model:

            The view model is a key piece Separation, or the concept of keeping  view separate from the model. Instead of making the model aware of the user's view of a date, so that it converts the date to the display format, the model simply holds the data, the view simply holds the formatted date, and the controller acts as the liaison between the two. The controller might take input from the view and place it on the model, or it might interact with a service to retrieve the model, then translate properties and place it on the view.

The view model also exposes methods, commands, and other points that help maintain the state of the view, manipulate the model as the result of actions on the view, and trigger events in the view itself.

INotifyPropertyChanged

                The heart of the MVVM pattern is the INotifyPropertyChanged interface, which notify any change in View to model and vice versa.

The basic MVVM framework really only requires two things:

1.       A class that is either a DependencyObject or implements INotifyPropertyChanged to fully support data-binding.

2.       Some sort of commanding support.

The second issue exists in Silverlight 3 because the ICommand interface is provided, but not implemented. In Silverlight 4, commanding is more "out of the box". Commands facilitate binding of events from the view to the viewmodel. These are implementation details that make it easier to use the MVVM pattern.

Note:

A very common and popular way to synchronize data between the model and the view in Silverlight or WPF is using DataBinding. The value of the model is transferred to the view once, when the binding is initialized. But for every subsequent change, the model must notify the binding to transfer the value again. This is done by implementing the INotifyPropertyChanged interface on the model.

Establishing Connection Between View and View Model:

                Connection is established through DataContext property in code behind

public partial class EmployeeDetails : UserControl

    {

        private EmployeeDetailsViewModel mvvmViewModel;

        public EmployeeDetails()

        {

            InitializeComponent();

            if (this.DataContext == null)

            {

                mvvmViewModel = new EmployeeDetailsViewModel();

                this.DataContext = mvvmViewModel;

            }

            this.Loaded += EmployeeDetails_Loaded;

        }

        private void EmployeeDetails_Loaded(object sender, RoutedEventArgs e)

        {

            if (this.DataContext != null)

                mvvmViewModel = this.DataContext as EmployeeDetailsViewModel;

        }

    }

Project File Description:

            1.CommonCommand.cs:
                     Implementation class for ICommand, with some more features than             DelegateCommand, for more details refer ICommand Implementation Exmple

                   2.  ViewModelBase.cs:
                    Implementation of INotifyPropertyChanged interface, which is an abstract class to avoid creating object

Project

                I article contain sample project to demonstrate MVVM pattern with simple example. 
Download MVVM Project Sample