Wzorzec MVVM w C#/.NET: Praktyczne Wprowadzenie dla Początkujących

Dzisiaj na warsztat bierzemy MVVM (Model-View-ViewModel) – jeden z najpopularniejszych wzorców projektowych, używany głównie w aplikacjach desktopowych (WPF), mobilnych (Xamarin, .NET MAUI), a nawet w niektórych webowych frameworkach Blazor (w pewnym zakresie). Skupimy się tutaj na przykładzie WPF w C#, żebyś zrozumiał(a) sedno MVVM i mógł szybko zacząć tworzyć własne aplikacje.

Czym jest MVVM?

Przykładowa aplikacja WPF z MVVM

1. Model

namespace MyMvvmApp.Models
{
    public class Person
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }
}

Tu nie dzieje się wiele – mamy po prostu dane, czyli nasz "Model". Gdybyśmy korzystali z bazy danych czy API, to w tym miejscu moglibyśmy zaimplementować logikę dostępu do danych.

2. ViewModel

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

namespace MyMvvmApp.ViewModels
{
    public class MainViewModel : INotifyPropertyChanged
    {
        private Person _currentPerson;
        public Person CurrentPerson
        {
            get => _currentPerson;
            set
            {
                _currentPerson = value;
                OnPropertyChanged();
            }
        }

        // Prostą komendę możemy zaimplementować np. w taki sposób:
        public ICommand UpdateCommand { get; set; }

        public MainViewModel()
        {
            // Inicjalizujemy dane
            CurrentPerson = new Person
            {
                FirstName = "Jan",
                LastName = "Kowalski"
            };

            // Przypisanie komendy do delegata
            UpdateCommand = new RelayCommand(
                execute: _ => UpdatePerson(),
                canExecute: _ => true
            );
        }

        private void UpdatePerson()
        {
            // Przykładowa logika, np. w realnej aplikacji zapiszemy do bazy itp.
            // Tutaj wyświetlimy tylko w Debug output:
            System.Diagnostics.Debug.WriteLine(
                $"Zaktualizowano dane: {CurrentPerson.FirstName} {CurrentPerson.LastName}"
            );
        }

        public event PropertyChangedEventHandler PropertyChanged;

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

RelayCommand
W powyższym kodzie używamy klasy RelayCommand, którą musimy jeszcze zdefiniować. Dzięki niej szybko tworzymy komendy w MVVM. Dodaj do projektu plik RelayCommand.cs:

using System;
using System.Windows.Input;

namespace MyMvvmApp.ViewModels
{
    public class RelayCommand : ICommand
    {
        private readonly Action<object> _execute;
        private readonly Predicate<object> _canExecute;

        public RelayCommand(Action<object> execute, Predicate<object> canExecute = null)
        {
            _execute = execute;
            _canExecute = canExecute;
        }

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

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

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

Ta prosta implementacja ICommand pozwala nam tworzyć w ViewModel komendy, które można zbindować do przycisków w View bez pisania zdarzeń (Click) w code-behind.

3. View (XAML)

<Window x:Class="MyMvvmApp.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:local="clr-namespace:MyMvvmApp"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        Title="MVVM Demo" Height="200" Width="300"
        mc:Ignorable="d">

    <Grid>
        <StackPanel Margin="10">
            <TextBlock Text="Imię:" FontWeight="Bold"/>
            <TextBox Text="{Binding CurrentPerson.FirstName, UpdateSourceTrigger=PropertyChanged}" />

            <TextBlock Text="Nazwisko:" FontWeight="Bold" Margin="0,10,0,0"/>
            <TextBox Text="{Binding CurrentPerson.LastName, UpdateSourceTrigger=PropertyChanged}" />

            <Button Content="Zaktualizuj"
                    Margin="0,10,0,0"
                    Command="{Binding UpdateCommand}" />
        </StackPanel>
    </Grid>
</Window>

W powyższym kodzie:

    • TextBox ma przypisane Text="{Binding CurrentPerson.FirstName}". To znaczy, że gdy zmieni się właściwość CurrentPerson.FirstName we ViewModelu, to automatycznie zmieni się tekst w kontrolce (i odwrotnie, jeśli użytkownik coś wpisze, wartość w ViewModelu też się zmieni).
    • Button jest powiązany przez Command="{Binding UpdateCommand}". Oznacza to, że kliknięcie w przycisk wywoła metodę UpdatePerson() we ViewModelu.

MainWindow.xaml.cs (code-behind)

using System.Windows;
using MyMvvmApp.ViewModels;

namespace MyMvvmApp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            // Ustawiamy DataContext
            this.DataContext = new MainViewModel();
        }
    }
}

W code-behind ustawiamy DataContext na nową instancję MainViewModel. Dzięki temu całe wiązanie danych w XAML będzie odnosić się do obiektów i właściwości w MainViewModel.

Jak to wszystko działa?

Kilka słów o testach jednostkowych

Podsumowanie