Wpf Mvvm Design Pattern Model View Viewmodel Separation Complete Guide

Example: A WPF Application for Managing Employee Details

Step 1: Create a New WPF Project

1. Open Visual Studio.
2. Go to File > New > Project.
3. Select WPF App (.NET Framework) or .NET Core / .NET 5/6/7+, depending on your preference.
4. Name your project WpfMvvmExample.
5. Click Create.

Step 2: Create the Model

The Model represents the data structure of your application. In this example, we'll create a simple Employee class.

1. Add a new folder named Models to your project.
2. Right-click the Models folder and select Add > Class.
3. Name the class Employee.cs.

// Models/Employee.cs
using System.ComponentModel;

public class Employee : INotifyPropertyChanged
{
    private string _name;
    private int _id;

    public string Name
    {
        get => _name;
        set
        {
            if (_name != value)
            {
                _name = value;
                OnPropertyChanged(nameof(Name));
            }
        }
    }

    public int Id
    {
        get => _id;
        set
        {
            if (_id != value)
            {
                _id = value;
                OnPropertyChanged(nameof(Id));
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

Step 3: Create the ViewModel

The ViewModel acts as a bridge between the View and the Model. It exposes properties and commands to manipulate the model.

1. Add a new folder named ViewModels to your project.
2. Right-click the ViewModels folder and select Add > Class.
3. Name the class MainWindowViewModel.cs.

// ViewModels/MainWindowViewModel.cs
using System.Collections.ObjectModel;
using System.Windows.Input;

namespace WpfMvvmExample.ViewModels
{
    public class MainWindowViewModel
    {
        public ObservableCollection<Employee> Employees { get; set; }

        public ICommand AddEmployeeCommand { get; }

        public MainWindowViewModel()
        {
            Employees = new ObservableCollection<Employee>();

            // Initialize with some sample employees
            Employees.Add(new Employee { Id = 1, Name = "John Doe" });
            Employees.Add(new Employee { Id = 2, Name = "Jane Smith" });

            AddEmployeeCommand = new RelayCommand(AddEmployee);
        }

        private void AddEmployee(object parameter)
        {
            Employees.Add(new Employee { Id = Employees.Count + 1, Name = $"{parameter} {Employees.Count + 1}" });
        }
    }
}

You'll also need to define the RelayCommand class, which is a common implementation of ICommand in many MVVM frameworks.

4. Add another class to the ViewModels folder named RelayCommand.cs.

// ViewModels/RelayCommand.cs
using System;
using System.Windows.Input;

public class RelayCommand : ICommand
{
    private readonly Action<object> _executeAction;
    private readonly Predicate<object> _canExecutePredicate;

    public RelayCommand(Action<object> executeAction, Predicate<object> canExecutePredicate = null)
    {
        _executeAction = executeAction ?? throw new ArgumentNullException(nameof(executeAction));
        _canExecutePredicate = canExecutePredicate;
    }

    public bool CanExecute(object parameter)
    {
        return _canExecutePredicate == null || _canExecutePredicate(parameter);
    }

    public void Execute(object parameter)
    {
        _executeAction(parameter);
    }

    public event EventHandler CanExecuteChanged
    {
        add { CommandManager.RequerySuggested += value; }
        remove { CommandManager.RequerySuggested -= value; }
    }
}

Step 4: Create the View

The View is the UI layer of your application. We’ll use XAML to define the layout and bind the ViewModel using data bindings.

1. Modify MainWindow.xaml to display the Employee details and bind to the MainWindowViewModel.

<Window x:Class="WpfMvvmExample.MainWindow"
        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"
        mc:Ignorable="d"
        Title="Employee Manager"
        Height="450"
        Width="800">
    <Grid>
        <ListBox ItemsSource="{Binding Employees}" Margin="10">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Margin="5">
                        <TextBlock Text="{Binding Id}" FontWeight="Bold" Margin="0,0,10,0"/>
                        <TextBlock Text="{Binding Name}" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <Button Content="Add Employee" HorizontalAlignment="Center" VerticalAlignment="Bottom" Width="120" Margin="0,20,0,0" Command="{Binding AddEmployeeCommand}" CommandParameter="New" />
    </Grid>
</Window>

Step 5: Bind the View to the ViewModel

Next, you need to set the DataContext of the MainWindow to an instance of MainWindowViewModel. You can do this either in code-behind or directly in XAML.

2. Modify MainWindow.xaml.cs.

// MainWindow.xaml.cs
using System.Windows;

namespace WpfMvvmExample
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = new MainWindowViewModel();
        }
    }
}

Or you can set it in XAML:

<Window x:Class="WpfMvvmExample.MainWindow"
        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:local="clr-namespace:WpfMvvmExample.ViewModels"
        mc:Ignorable="d"
        Title="Employee Manager"
        Height="450"
        Width="800">
    <Window.DataContext>
        <local:MainWindowViewModel />
    </Window.DataContext>
    <Grid>
        <ListBox ItemsSource="{Binding Employees}" Margin="10">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Margin="5">
                        <TextBlock Text="{Binding Id}" FontWeight="Bold" Margin="0,0,10,0"/>
                        <TextBlock Text="{Binding Name}" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <Button Content="Add Employee" HorizontalAlignment="Center" VerticalAlignment="Bottom" Width="120" Margin="0,20,0,0" Command="{Binding AddEmployeeCommand}" CommandParameter="New" />
    </Grid>
</Window>

Step 6: Run the Application

Now, you're ready to run your application and see the MVVM pattern in action.

1. Press F5 or click on Debug > Start Debugging.
2. Your application should show a window with a list box containing employee names and a button to add more employees.

When you click the "Add Employee" button, it triggers the AddEmployeeCommand in the MainWindowViewModel which adds a new Employee object to the Employees collection, causing the UI to automatically update via data binding.

Conclusion

This example illustrates the basics of the MVVM pattern in WPF applications. It separates concerns:

• The Model holds the data (Employee class).
• The ViewModel provides the data to the view and handles logic (MainWindowViewModel class).
• The View displays the data and sends user actions back to the ViewModel via commands (defined in MainWindow.xaml).