Creating Simple MVVM Application With Data Binding

Introduction

In this article I have taken simple a grid and some input controls to be bound with some controls. Entity's entity lists have been used for the data source.

How to create a simple MVVM

1. Create an empty WPF Application in Visual Studio.

2. Add one App.xaml to your project.

3. Add one folder and rename it to "Model"

4. Add another folder and rename to "View"

5. Again add another folder and rename it to ViewModel

6. Add a proco class named "Employee" in the Model and write the following code.

namespaceExample05
{
public class Employee : INotifyPropertyChanged
{
int _employeeNumber;
string _firstName;
string _lastName;
string _department;
string _title;

public Employee()
{
_employeeNumber = 0;
_firstName =
_lastName =
_department =
_title = null;
}
public int EmployeeNumber
{
get { return _employeeNumber; }
set
{
_employeeNumber = value;
OnPropertyChanged("EmployeeNumber");
}
}
public string FirstName
{
get { return _firstName; }
set
{
_firstName = value;
OnPropertyChanged("FirstName");
}
}

public string LastName
{
get { return _lastName; }
set
{
_lastName = value;
OnPropertyChanged("LastName");
}
}

public string Department
{
get { return _department; }
set
{
_department = value;
OnPropertyChanged("Department");
}
}

public string Title
{
get { return _title; }
set
{
_title = value;
OnPropertyChanged("Title");
}
}

public override string ToString()
{
return String.Format("{0} {1} ({2})", FirstName, LastName, EmployeeNumber);
}

protected void OnPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChangedEventArgs args = new PropertyChangedEventArgs(propertyName);
this.PropertyChanged(this, args);
}
}

#region INotifyPropertyChanged Members

public event PropertyChangedEventHandler PropertyChanged;

#endregion
}
}

8. Add another new class named "MainWindowViewModel". This class must implement the INotifyPropertyChanged interface. Write the folllwoing code in that class:

usingSystem;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Example04.Model;
using Example04.Common;
using System.ComponentModel;

namespace Example04.ViewModel
{
public class MainWindowViewModel : INotifyPropertyChanged
{
public List<Employee> empList { get; set; }

private Employee selectedEmployee;
public Employee SelectedEmployee
{
get { return selectedEmployee; }
set
{
selectedEmployee = value;
NotifyPropertyChanged("SelectedEmployee");
}
}

public DelegateCommand<object> MyCommand { get; private set; }

public MainWindowViewModel()
{
List<Employee> elist = new List<Employee>();

elist.Add(new Employee() { EmployeeNumber = 1, FirstName = "John", LastName = "Dow", Title = "Accountant", Department = "Payroll" });
elist.Add(new Employee() { EmployeeNumber = 2, FirstName = "Jane", LastName = "Austin", Title = "Account Executive", Department = "Employee Management" });
elist.Add(new Employee() { EmployeeNumber = 3, FirstName = "Ralph", LastName = "Emmerson", Title = "QA Manager", Department = "Product Development" });
elist.Add(new Employee() { EmployeeNumber = 4, FirstName = "Patrick", LastName = "Fitzgerald", Title = "QA Manager", Department = "Product Development" });
elist.Add(new Employee() { EmployeeNumber = 5, FirstName = "Charles", LastName = "Dickens", Title = "QA Manager", Department = "Product Development" });
empList = elist;

MyCommand = new DelegateCommand<object>(Excute);
}

public void Excute(object employee)
{
SelectedEmployee = (Employee)employee;
}

protected void NotifyPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChangedEventArgs args = new PropertyChangedEventArgs(propertyName);
this.PropertyChanged(this, args);
}
}

public event PropertyChangedEventHandler PropertyChanged;

}
}

9. Add a WPF Window to your project in the view folder.

10. Paste the following XAML Code in the form:

XMALCode: <Windowx:Class="Example04.View.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:si="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"
Title="MainWindow" Height="250" Width="300" MinHeight="200">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="110px" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ListBox Name="employeeListBox" ItemsSource="{Binding empList}" Grid.Row="0" SelectedItem="{Binding SelectedIndex}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<i:InvokeCommandAction Command="{Binding MyCommand}" CommandParameter="{Binding ElementName=employeeListBox, Path=SelectedValue}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</ListBox>
<Grid Grid.Row="1" DataContext="{Binding SelectedEmployee}">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0">First Name</Label>
<Label Grid.Row="1" Grid.Column="0">Last Name</Label>
<Label Grid.Row="2" Grid.Column="0">Title</Label>
<Label Grid.Row="3" Grid.Column="0">Department</Label>

<TextBox Grid.Row="0" Grid.Column="1" Text="{Binding Path=FirstName, Mode=TwoWay}" />
<TextBox Grid.Row="1" Grid.Column="1" Text="{Binding Path=LastName, Mode=TwoWay}" />
<TextBox Grid.Row="2" Grid.Column="1" Text="{Binding Path=Title, Mode=TwoWay}" />
<TextBox Grid.Row="3" Grid.Column="1" Text="{Binding Path=Department, Mode=TwoWay}" />
</Grid>
</Grid>
</Window>

11. Try the code above that gives the MVVM example with databinding. Please feel free to ask questions if you have any query.