WPF Development, MVVM

Windows Presentation Foundation (WPF) is a platform for creating graphical user interface (GUI) applications in Microsoft’s .NET framework. WPF provides powerful data binding, excellent graphic capabilities, and a variety of flexible UI components that enable developers to easily create attractive UI applications.

1. Features of WPF

WPF has the following features:

  • XAML (Extensible Application Markup Language): WPF uses a markup language called XAML to build the UI. This allows for declarative definition of layouts and UI elements.
  • Data Binding: WPF provides powerful data binding capabilities, making it easy to connect UI elements with data models.
  • Styles and Templates: You can define the styles of UI elements and modify the visual aspects of the UI through templates.
  • 3D Graphics: WPF supports 3D graphics, providing a richer user experience.

2. What is the MVVM Pattern?

The MVVM (Model-View-ViewModel) pattern is an architectural pattern that separates the UI and business logic in WPF applications. The MVVM pattern consists of the following three main components:

  • Model: Contains the data and business logic of the application.
  • View: Composes the user interface, primarily defined in XAML files.
  • ViewModel: Acts as a mediator between the model and the view, preparing data for the UI and handling commands.

2.1 Advantages of MVVM

  • Increases code reusability.
  • Improves testability.
  • Enhances maintainability.
  • Separates UI and business logic to minimize interference.

3. WPF Example Using the MVVM Pattern

Now, let’s look at a simple example of a WPF application that applies the MVVM pattern. This example will create an application that takes user input and performs a simple calculation.

3.1 Creating the Project

Create a new WPF application project in Visual Studio. Name the project “MVVMExample”.

3.2 Model

First, create a model class. This class will have properties for the two numbers to be calculated. 


public class CalculatorModel
{
    public double Number1 { get; set; }
    public double Number2 { get; set; }
    public double Result { get; set; }
    
    public void Add()
    {
        Result = Number1 + Number2;
    }
}

3.3 ViewModel

Next, create the ViewModel class. The ViewModel manages access to the model and implements commands using the ICommand interface to interact with the UI. 


using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows.Input;

public class CalculatorViewModel : INotifyPropertyChanged
{
    private CalculatorModel _model;

    public CalculatorViewModel()
    {
        _model = new CalculatorModel();
        CalculateCommand = new RelayCommand(Calculate);
    }

    public double Number1
    {
        get => _model.Number1;
        set
        {
            _model.Number1 = value;
            OnPropertyChanged();
        }
    }

    public double Number2
    {
        get => _model.Number2;
        set
        {
            _model.Number2 = value;
            OnPropertyChanged();
        }
    }

    public double Result
    {
        get => _model.Result;
        set
        {
            _model.Result = value;
            OnPropertyChanged();
        }
    }

    public ICommand CalculateCommand { get; private set; }

    private void Calculate()
    {
        _model.Add();
        Result = _model.Result;
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

3.4 Command Class (RelayCommand)

Add a RelayCommand class that implements ICommand. This class defines the command and includes logic to determine whether it can be executed. 


using System;
using System.Windows.Input;

public class RelayCommand : ICommand
{
    private readonly Action _execute;
    private readonly Predicate _canExecute;

    public RelayCommand(Action execute, Predicate canExecute = null)
    {
        _execute = execute ?? throw new ArgumentNullException(nameof(execute));
        _canExecute = canExecute;
    }

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

    public bool CanExecute(object parameter) => _canExecute == null || _canExecute(parameter);

    public void Execute(object parameter) => _execute(parameter);
}


3.5 View



    Finally, modify the XAML file to compose the UI. Create a UI to accept two numbers from the user and display the result.





    
        
            
            
            
            
        
    




4. Importance of Applying the MVVM Pattern



    Applying the MVVM pattern can significantly improve the maintainability, scalability, and testability of an application. By separating the UI and business logic, developers can enhance code reusability and modify business logic without the need to change the UI. Additionally, the ViewModel allows for intuitive code writing by binding data and commands to the UI.



5. Conclusion



    The combination of WPF and the MVVM pattern is a powerful tool in modern GUI application development. WPF’s rich UI components and the structured approach of MVVM make it an attractive choice for both experts and beginners. The simple example discussed above illustrates how to effectively apply the MVVM pattern to WPF applications.



6. References