Архитектура MVVM в WPF: Model, View, ViewModel и BindingHelper

Архитектуры приложения, MVVM #

По мере выполнения практических, каждый из вас создавал свою архитектуру приложения — использовал окна, создавал новые классы, может размещал их по папкам и прочее. Представьте, что половина второго курса объединится в одну организацию, которая будет писать или тестировать один большой проект. Вы никогда не определитесь в какой именно структуре вы должны будете написать код так, чтобы он был и понятен всем разработчикам, и был достаточно мобилен для расширения вашего функционала. Именно для этого были придуманы различные архитектуры приложений.

Архитектура приложений — это структурный принцип, по которому создано приложение таким образом, чтобы оно удовлетворяло всем заявленным к нему требованиям, а также обеспечивало максимальную простоту доработки, развертывания и масштабирования приложения.

Если проект был сделан грамотно, то лишь взглянув на пару-тройку классов, вы сразу же сможете определить его архитектуру. Для WPF самой распространенной архитектурой является MVVM.

MVVM является аббревиатурой и расшифровывается как Model-View-ViewModel. Эти три компонента связаны между собой следующим образом:

• Model — модель данных, над которой идет работа. Данные из нее мы будем выгружать в интерфейс.
• View — сам интерфейс, к которому будет привязываться данные модели.
• View model — принцип того, как данные будут связываться между моделью и интерфейсом. Вся логика работы с данными находится здесь.

Банальные примеры внедрения MVVM на основе практических:

• Ежедневник или учет бюджета:
  • Model — свой класс с заметкой.
  • View — окно с CRUD операциями и датой.
  • ViewModel — логика добавления, изменения и удаления данных.
• Аудиоплеер:
  • Model — файл или MediaElement, созданный в коде (модели могут быть не только самописными).
  • View — окно аудиоплеера.
  • ViewModel — логика отображения данных из файла в элементы интерфейса: текущая позиция музыки, плей/пауза и прочее.

Можно подумать, что мы и так пишем программы в подобной архитектуре, ведь всю логику мы пишем внутри xaml.cs. Однако есть большая разница. В MVVM работа идет с привязкой, то есть биндингами. Мы создаем полностью отдельный класс, к которому будем привязывать интерфейс, xaml.cs мы больше не используем.

Такое отделение от xaml.cs позволит нам привязывать ViewModel сразу к нескольким окнам одновременно и удобно расширять функционал сразу во всех окнах.

Когда стоит использовать эту архитектуру? MVVM удобно использовать вместо классического MVC (о которой вы узнаете из других дисциплин, как РПМ) и ему подобных в тех случаях, когда в платформе, на которой ведётся разработка, есть «связывание данных».

Пример программы #

Рассмотрим пример программы, написанный на MVVM. Я хочу создать простое приложение — датагрид с цветами. При выборе любого элемента, все значения из таблицы выгрузятся в текстовые поля.

Если бы мы реализовали эту программу основываясь на знаниях из предыдущей лекции, мы бы сделали следующее.

Перво наперво, подготовимся к привязкам и реализуем интерфейс INotifyPropertyChanged, чтобы интерфейс знал о том, что значения внутри переменных может меняться. Наследуем интерфейс:

И в самом низу реализуем этот интерфейс:

1
public event PropertyChangedEventHandler PropertyChanged;
2

3
protected void OnPropertyChanged([CallerMemberName] string name = null)
4
{
5
    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
6
}

Создадим модель данных с цветами, которые мы будем выгружать. Модель состоит из имени и HEX значения этого цвета. Внутри модели также создам конструктор, чтобы было проще в будущем создавать переменные:

1
public class Colour
2
{
3
    public Colour(string name, string hexademical)
4
    {
5
        Name = name;
6
        Hexademical = hexademical;
7
    }
8

9
    public string Name { get; set; }
10
    public string Hexademical { get; set; }
11
}

Внутри MainWindow.xaml.cs я создам два свойства — одно для выбранного элемента из датагрида, а другое — для списка элементов датагрида. Список у меня будет как ObservableCollection. Заметьте, что внутри каждого свойства у меня стоит метод OnPropertyChanged для отслеживания изменения значения.

Реализую сам интерфейс с привязкой данных:

Заполню свою переменную Colours. Здесь уже не имеет значения где заполнять — перед или после InitializeComponent. Заполню при помощи конструктора:

1
public MainWindow()
2
{
3
    InitializeComponent();
4
    Colours = new ObservableCollection<Colour>()
5
    {
6
        new Colour("Насыщенный фиолетовый", "#53377A"),
7
        new Colour("Сине-зелёный", "#008080")
8
    };
9
}

Запустить запустится, работает работается. Но в данном случае архитектура у нас дико хромает — все раскидано непонятно как, логика данных какого-то черта прямо внутри логики окна и прочее.

Предлагаю все это дело структурировать.

Переход от обычной структуры к MVVM #

Начну с того, что я создам 4 нужные мне папки — Model, View, ViewModel и Helpers (для разных дополнительных классов, которые помогут мне разрабатывать мою модель. Эта папка будет внутри ViewModel).

Затем перемещу существующие файлы по папкам — Colour в Model, MainWindow в View.

Сейчас программа не запустится, так как файл App.xaml, где пишется запускаемое окно, автоматически не изменится. Чтобы его изменить, зайдем в App.xaml и в StartupUri пропишем новое расположение нашего главного окна, добавив название папки.

Программа снова будет запускаться.

Осталось только разобраться с ViewModel. Туда мы должны перенести весь наш код кроме конструктора с InitializeComponent, которое будет создавать наше окно. Создам новый файл внутри папки ViewModel с названием НазваниеокнаViewModel.cs.

1
namespace vipief.ViewModel
2
{
3
    internal class MainViewModel
4
    {
5
    }
6
}

Перенесу весь код из xaml.cs внутрь MainViewModel:

BindingHelper и наследование #

А также вынесу реализацию INotifyPropertyChanged в отдельный класс, чтобы:

• не засорять код внутри ViewModel этой реализацией.
• создать единый класс, который я буду просто наследовать и использовать его методы внутри ViewModel.

Назову его BindingHelper и создам его внутри папки Helpers.

Внутри мне необходимо написать следующий код:

1
using System.ComponentModel;
2
using System.Runtime.CompilerServices;
3

4
namespace vipief.ViewModel.Helpers
5
{
6
    internal class BindingHelper : INotifyPropertyChanged
7
    {
8
        public event PropertyChangedEventHandler PropertyChanged;
9

10
        protected void OnPropertyChanged([CallerMemberName] string name = null)
11
        {
12
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
13
        }
14
    }
15
}

А внутри ViewModel я удалю реализацию INotifyPropertyChanged и буду наследовать BindingHelper:

Регионы и DataContext #

Для сокрытия кусочка кода с переменными я могу создать регион при помощи #region и #endregion. Вещь просто удобная и на код никак не влияет.

И, так как теперь внутри xaml.cs у нас ничего нет, то и привязки не работают, так как в окне мы указали контекст данных — наш внутренний файл. Теперь, в качестве контекста, нам нужно указать нашу ViewModel. Для этого сделаем следующее:

И тогда архитектура MVVM будет реализована, а программа будет работать также.

Опять же, MVVM существует для более лучшей расширяемости функционала нашего приложения, и её будет удобно использовать в больших проектах об этом не стоит забывать!

Для удобства рассмотрения этого примера MVVM проекта, я прикреплю для вас ссылку с проектом, который вы можете загрузить, ознакомиться с ним, и понять, как это работает своими руками:

drive.google.com/drive/folders/1GKkdE-HTCeNaWKLPTtZ-ELW0pXDrTng2

Полный код примера #

Model/Colour.cs — модель данных:

1
namespace vipief.Model
2
{
3
    public class Colour
4
    {
5
        public Colour(string name, string hexademical)
6
        {
7
            Name = name;
8
            Hexademical = hexademical;
9
        }
10

11
        public string Name { get; set; }
12
        public string Hexademical { get; set; }
13
    }
14
}

ViewModel/Helpers/BindingHelper.cs — базовый класс с реализацией INotifyPropertyChanged:

1
using System.ComponentModel;
2
using System.Runtime.CompilerServices;
3

4
namespace vipief.ViewModel.Helpers
5
{
6
    internal class BindingHelper : INotifyPropertyChanged
7
    {
8
        public event PropertyChangedEventHandler PropertyChanged;
9

10
        protected void OnPropertyChanged([CallerMemberName] string name = null)
11
        {
12
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
13
        }
14
    }
15
}

ViewModel/MainViewModel.cs — наследует BindingHelper, держит свойства и инициализацию:

1
using System.Collections.ObjectModel;
2
using vipief.Model;
3
using vipief.ViewModel.Helpers;
4

5
namespace vipief.ViewModel
6
{
7
    internal class MainViewModel : BindingHelper
8
    {
9
        #region Свойства
10

11
        private Colour selected;
12
        public Colour Selected
13
        {
14
            get { return selected; }
15
            set
16
            {
17
                selected = value;
18
                OnPropertyChanged();
19
            }
20
        }
21

22
        private ObservableCollection<Colour> colours;
23
        public ObservableCollection<Colour> Colours
24
        {
25
            get { return colours; }
26
            set
27
            {
28
                colours = value;
29
                OnPropertyChanged();
30
            }
31
        }
32

33
        #endregion
34

35
        public MainViewModel()
36
        {
37
            Colours = new ObservableCollection<Colour>()
38
            {
39
                new Colour("Насыщенный фиолетовый", "#53377A"),
40
                new Colour("Сине-зелёный", "#008080")
41
            };
42
        }
43
    }
44
}

View/MainWindow.xaml.cs — единственное, что осталось: InitializeComponent и установка DataContext:

1
using System.Windows;
2
using vipief.ViewModel;
3

4
namespace vipief.View
5
{
6
    public partial class MainWindow : Window
7
    {
8
        public MainWindow()
9
        {
10
            InitializeComponent();
11
            DataContext = new MainViewModel();
12
        }
13
    }
14
}