Using MVVM Pattern in WPF

Rama Sagar
Posted by in WPF category on for Beginner level | Points: 250 | Views : 24164 red flag

MVVM prescribes separating the nonvisual classes that encapsulate interaction logic, business logic and data from the visual classes that actually render things to the screen. This separation makes the code easier to maintain: first, it prevents the UI from becoming a monolithic class with display controls, interaction logic and business logic all stuffed in side by side; and second, it enables you to automate the testing of interaction logic and user interface mappings instead of relying on expensive, unreliable manual testing..

Introduction


This article explains how to use MVVM Pattern in WPF using Visual Studio 2013 RC

The Model View View Model (MVVM) is an architectural pattern used in software engineering that originated from Microsoft as a specialization of the Presentation Model design pattern introduced by Martin Fowler. Largely based on the model–view–controller pattern (MVC), MVVM is a specific implementation targeted at UI development platforms which support the event-driven programming in Windows Presentation Foundation (WPF) and Silverlight on the .NET platforms using XAML and .NET languages.


Lets start by creating a WPF Application

Step 1: Create a New Project  Open visual studio 2013 RC -> click on File -> New Project -> Create new Wpf Application 

Now create three folders in root application. Name should be Model,View,ViewModel and now add a new class in Model folder. Here i have given Student

Student.cs

using System.ComponentModel;

namespace WpfApplication1.Model
{
    public class User : INotifyPropertyChanged
    {
        private int studentId;
        private string firstName;
        private string lastName;
        private string city;
        private string state;
        private string country;

        public int StudentId
        {
            get
            {
                return studentId;
            }
            set
            {
                studentId = value;
                OnPropertyChanged("StudentId");
            }
        }
        public string FirstName
        {
            get
            {
                return firstName;
            }
            set
            {
                firstName = value;
                OnPropertyChanged("FirstName");
            }
        }
        public string LastName
        {
            get
            {
                return lastName;
            }
            set
            {
                lastName = value;
                OnPropertyChanged("LastName");
            }
        }
        public string City
        {
            get
            {
                return city;
            }
            set
            {
                city = value;
                OnPropertyChanged("City");
            }
        }
        public string State
        {
            get
            {
                return state;
            }
            set
            {
                state = value;
                OnPropertyChanged("State");
            }
        }
        public string Country
        {
            get
            {
                return country;
            }
            set
            {
                country = value;
                OnPropertyChanged("Country");
            }
        }
        #region INotifyPropertyChanged Members
        public event PropertyChangedEventHandler PropertyChanged;
        private void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
        #endregion
    }

}

Step 2:Now right click on ViewModel Folder and add a new class

StudentViewModel.cs

Here we have created a Student ViewModel with all the students List and created a Update command using    
Icommand
using System.Windows.Input;
using System.Collections.Generic;
using System;
using WpfApplication1.Model;

namespace WpfApplication1.ViewModel
{
    class StudentViewModel
    {
        private IList<Student> _StudentsList;
        public StudentViewModel()
        {
            _StudentsList = new List<Student>
            {
                new Student{StudentId = 1,FirstName="Ramiz",LastName="Raja",City="Banglore",State="KA",Country="INDIA"},
                new Student{StudentId=2,FirstName="Chris",LastName="Hammond",City="New York", State="NY", Country="USA"},
                new Student{StudentId=3,FirstName="Naresh",LastName="Chand",City="Philadelphia", State="PHL", Country="USA"},
                new Student{StudentId=4,FirstName="Veeresh",LastName="Singh",City="Noida", State="UP", Country="INDIA"},
                new Student{StudentId=5,FirstName="Harsha",LastName="Vardhan",City="Ghaziabad", State="UP", Country="INDIA"},
                new Student{StudentId=6,FirstName="Ritesh",LastName="Kumar",City="Mumbai", State="MP", Country="INDIA"},
                new Student{StudentId=7,FirstName="Ritwik",LastName="Patel",City="Palwal", State="HP", Country="INDIA"},
                new Student{StudentId=8,FirstName="Rama",LastName="Sagar",City="Hyderabad", State="AP", Country="INDIA"}            
            };
        }
        public IList<Student> Students
        {
            get { return _StudentsList; }
            set { _StudentsList = value; }
        }
        private ICommand mUpdater;
        public ICommand UpdateCommand
        {
            get
            {
                if (mUpdater == null)
                    mUpdater = new Updater();
                return mUpdater;
            }
            set
            {
                mUpdater = value;
            }
        }
        private class Updater : ICommand
        {
            #region ICommand Members
            public bool CanExecute(object parameter)
            {
                return true;
            }
            public event EventHandler CanExecuteChanged;
            public void Execute(object parameter)
            {
            }
            #endregion
        }
    }
}
Step 3:Now Lets create a view Right Click on View Folder and create a view'

MainPage.xaml

Here we have created the view and corresponding  bindings
<Window x:Class="WpfApplication1.View.MainPage"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="485" Width="525">
    <Grid Margin="0,0,0,20">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <ListView Name="StudentGrid" Grid.Row="1" Margin="4,178,12,13"  ItemsSource="{Binding Students}"  >
            <ListView.View>
                <GridView x:Name="grdstudent">
                    <GridViewColumn Header="StudentId" DisplayMemberBinding="{Binding Student Id}"  Width="50"/>
                    <GridViewColumn Header="First Name" DisplayMemberBinding="{Binding FirstName}"  Width="80" />
                    <GridViewColumn Header="Last Name" DisplayMemberBinding="{Binding LastName}" Width="100" />
                    <GridViewColumn Header="City" DisplayMemberBinding="{Binding City}" Width="80" />
                    <GridViewColumn Header="State" DisplayMemberBinding="{Binding State}" Width="80" />
                    <GridViewColumn Header="Country" DisplayMemberBinding="{Binding Country}" Width="100" />
                </GridView>
            </ListView.View>
        </ListView>
        <TextBox Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="80,7,0,0" Name="txtUserId" VerticalAlignment="Top" Width="178" Text="{Binding ElementName=UserGrid,Path=SelectedItem.UserId}" />
        <TextBox Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="80,35,0,0" Name="txtFirstName" VerticalAlignment="Top" Width="178" Text="{Binding ElementName=UserGrid,Path=SelectedItem.FirstName}" />
        <TextBox Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="80,62,0,0" Name="txtLastName" VerticalAlignment="Top" Width="178" Text="{Binding ElementName=UserGrid,Path=SelectedItem.LastName}" />
        <Label Content="Student Id" Grid.Row="1" HorizontalAlignment="Left" Margin="12,12,0,274" Name="lblStudent" />
        <Label Content="Last Name" Grid.Row="1" Height="28" HorizontalAlignment="Left" Margin="12,60,0,0" Name="lblLastname" VerticalAlignment="Top" />
        <Label Content="First Name" Grid.Row="1" Height="28" HorizontalAlignment="Left" Margin="12,35,0,0" Name="lblFirstname" VerticalAlignment="Top" />
        <Button Content="Update" Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="310,40,0,0" Name="btnUpdate" 
                VerticalAlignment="Top" Width="141"
                Command="{Binding Path=UpdateCommad}"  />
        <TextBox Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="80,143,0,0" x:Name="txtCity" VerticalAlignment="Top" Width="178" Text="{Binding SelectedItem.City, ElementName=UserGrid}" />
        <Label Content="Country" Grid.Row="1" Height="28" HorizontalAlignment="Left" Margin="12,141,0,0" x:Name="Country_Copy" VerticalAlignment="Top" />
        <TextBox Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="80,88,0,0" x:Name="txtCountry" VerticalAlignment="Top" Width="178" Text="{Binding SelectedItem.Country, ElementName=UserGrid}" />
        <Label Content="City" Grid.Row="1" Height="28" HorizontalAlignment="Left" Margin="12,86,0,0" x:Name="City_Copy" VerticalAlignment="Top" />
        <TextBox Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="80,115,0,0" x:Name="txtSTate" VerticalAlignment="Top" Width="178" Text="{Binding SelectedItem.State, ElementName=UserGrid}" />
        <Label Content="State" Grid.Row="1" Height="28" HorizontalAlignment="Left" Margin="12,113,0,0" x:Name="State_Copy" VerticalAlignment="Top" />
    </Grid>
</Window>

Now Lets bind the Application to open on Startup
 protected override void OnStartup(StartupEventArgs e)
        {
            base.OnStartup(e);
            WpfApplication1.MainWindow window = new MainWindow();
            StudentViewModel SVM = new StudentViewModel();
            window.DataContext = SVM;
            window.Show();
        }

Conclusion

 In this article we have learned how to use MVVM pattern in WPF
Page copy protected against web site content infringement by Copyscape

About the Author

Rama Sagar
Full Name: RamaSagar Pulidindi
Member Level: Silver
Member Status: Member,MVP
Member Since: 12/30/2012 1:51:40 AM
Country: India
ramasagar
http://www.ramasagar.com
A Software Profesional working in Microsoft .NET technologies since year 2008, and I work for Dake ACE. I am passionate about .NET technology and love to contribute to the .NET community at Dot Net Funda

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)