Основы MVVM Pattern’а

Хочу описать процесс создания простенького WPF приложения по MVVM шаблону. Этот шаблон используется на проекте, на котором я работаю в текущее время. Такое желание у меня возникло после того, как я убедился в проблематичности его освоения на собственном опыте и на опыте наблюдения за окружающими программистами, которые впервые сталкиваются с этим шаблоном.

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

Этот шаблон очень распространен среди Silverlight приложений и приложений WPF.

MVVM удобно использовать вместо классического MVC и ему подобных в тех случаях, когда в платформе, на которой ведется разработка, присутствует «связывание данных».

В MVC/MVP изменения в пользовательском интерфейсе не влияют непосредственно на модель, а предварительно идут через Контроллер/Presenter. В таких технологиях как WPF и Silverlight есть концепция «связывание данных», позволяющая связывать данные с визуальными элементами в обе стороны. Следовательно при использовании этого приема применение паттерна MVC становится крайне неудобным из-за того, что привязка данных к представлению напрямую не укладывается в концепцию MVC/MVP.

Основная идея MVVM Pattern’а – отделить View, он же (UI) от логики, которая может происходить в рамках формы (View) и произвести «связывание данных» между этими двумя слоями. Это необходимо, так как позволяет изменять их отдельно друг от друга. Например, программист задает логику работы с данными, а дизайнер соответственно работает с пользовательским интерфейсом.

Схематично это выглядит так:

Паттерн MVVM делится на три части:

• Модель (Model), так же, как в классическом паттерне MVC, Модель представляет собой фундаментальные данные, необходимые для работы приложения (классы, структуры).
• Вид/Представление (View) так же, как в классическом паттерне MVC, Вид — это графический интерфейс, то есть окно, кнопки и.т.п.
• Модель вида (ViewModel, что означает «Model of View») является с одной стороны абстракцией Вида, а с другой предоставляет обертку данных из Модели, которые подлежат связыванию. То есть она содержит Модель, которая преобразована к Виду, а так же содержит в себе команды, которыми может пользоваться Вид, чтобы влиять на Модель.

Здесь интересен момент – как наш UI может отобразить наши данные из наших моделей?

В двух словах «связывание данных» – Binding говорит какому-либо свойству объекта на форме, из какого свойства DataContext’а взять данные.

DataContext – это свойство. Оно есть у каждого UI-объекта, те объекта имеющего визуальную составляющую. К этому свойству как раз и цепляют ViewModel. Таким образом вся эта цепочка начинает работать. При этом мы полностью отделяем всю логику приложения от его визуальной составляющей. Наша модель ничего не знает о том как она будет отображаться, а представление не знает что она будет отображать. Это свойство наследуется на все дочерние элементы. Поэтому его можно указать один раз на весь контрол и использовать на всей форме.
Теперь, чтобы было все понятно, давайте напишем простенькое WPF приложение по MVVM шаблону.

Сразу после создания пустого WPF проекта, дерево решения выглядит следующим образом:

Добавим в него 3 папки: View, Model и ViewModel.

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

MainWindow.xaml

<Window x:Class="WpfApplication.View.MainWindowView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="170" Width="400">
    <Grid>
 
    </Grid>
</Window>

MainWindow.xaml.cs

using System.Windows;
 
namespace WpfApplication.View
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindowView : Window
    {
        public MainWindowView()
        {
            InitializeComponent();
        }
    }
}

Дерево нашего решения примет следующий вид:



В файле App.xaml прописан путь к форме, которая запускается по умолчанию при старте программы. Так как мы перенесли нашу форму в другой namespace и в добавок к этому переименовали ее, то путь необходимо изменить:


App.xaml

<Application x:Class="WpfApplication.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="View/MainWindowView.xaml">
    <Application.Resources>
         
    </Application.Resources>
</Application>

Теперь, если мы запустим наше приложение, оно должно запуститься:



Теперь добавим в наш проект простенькую модель. Например, это будет класс человека:

PeopleModel.cs

namespace WpfApplication.Model
{
    class PeopleModel
    {
        #region Properties
 
        /// <summary>
        /// Get or set first name.
        /// </summary>
        public string FirstName { get; set; }
 
 
        /// <summary>
        /// Get or set last name.
        /// </summary>
        public string LastName { get; set; }
 
        #endregion
    }
}

Далее нам надо создать связующее звено между нашей формой и моделью. Это будет MainWindowViewModel, в котором будет свойство типа нашей модели:

MainWindowViewModel.cs

using System.Windows;
using System.Windows.Input;
using WpfApplication.Model;
 
namespace WpfApplication.ViewModel
{
    class MainViewModel
    {
        #region Constructor
 
        /// <summary>
        /// Constructor.
        /// </summary>
        public MainViewModel()
        {
            People = new PeopleModel
            {
                FirstName = "First name",
                LastName = "Last name"
            };
        }
 
        #endregion
 
 
        #region Properties
 
        /// <summary>
        /// Get or set people.
        /// </summary>
        public PeopleModel People { get; set; }
 
        #endregion
    }
}

Теперь давайте набросаем на форме контролов, чтобы все это отображать:


MainWindowView.xaml

<Window x:Class="WpfApplication.View.MainWindowView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="170" Width="400">
    <Grid>
        <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Margin="12,12,0,0" 
                   Text="First name"/>
        <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Margin="12,52,0,0" 
                   Text="Last name"/>
 
        <TextBox HorizontalAlignment="Left" VerticalAlignment="Top" Margin="90,9,0,0" Width="120" 
                 Text="{Binding Path=People.FirstName, Mode=TwoWay}"/>
        <TextBox HorizontalAlignment="Left" VerticalAlignment="Top" Margin="90,49,0,0" Width="120" 
                 Text="{Binding Path=People.LastName, Mode=TwoWay}"/>
 
        <TextBox HorizontalAlignment="Left" VerticalAlignment="Top" Margin="246,9,0,0" Width="120"
                 Text="{Binding Path=People.FirstName, Mode=TwoWay}" IsReadOnly="True" />
        <TextBox HorizontalAlignment="Left" VerticalAlignment="Top" Margin="246,49,0,0" Width="120"
                 Text="{Binding Path=People.LastName, Mode=TwoWay}" IsReadOnly="True" />
 
        <Button Content="Click me" HorizontalAlignment="Left" Margin="291,97,0,0" VerticalAlignment="Top" Width="75" />
    </Grid>
</Window>

Теперь, если мы запустим наше приложение, оно будет выглядеть так:



Теперь самое важное. Как наша форма будет брать данные из связующего звена – ViewModel?

Для этого мы должны вначале указать форме какой объект будет являться для нее ViewModel’лью. Ссылка на этот объект должна находиться в DataContext’е формы.

DataContext у формы должен задаваться при создании формы. Поэтому мы немного изменим App.xaml и App.xaml.cs следующим образом:


App.xaml

<Application x:Class="WpfApplication.App"

             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Application.Resources>
         
    </Application.Resources>
</Application>

App.xaml.cs

using System.Windows;
using WpfApplication.View;
using WpfApplication.ViewModel;
 
namespace WpfApplication
{
    /// <summary>
    /// Interaction logic for App.xaml
    /// </summary>
    public partial class App : Application
    {
        public App()
        {
            var mw = new MainWindowView
            {
                DataContext = new MainViewModel()
            };
 
            mw.Show();
        }
    }
}

То есть мы тут убираем из разметки запускаемую по умолчанию форму и в коде, в конструкторе, сами ручками прописываем создание формы, задание у нее DataContext’а и непосредственно отображение.

Теперь мы должны привязать элементы на форме к конкретным свойствам модели. Для этого мы должны описать эти привязки в разметке. Например:


MainWindowView.xaml

<TextBox HorizontalAlignment="Left" VerticalAlignment="Top" Margin="90,9,0,0" Width="120" Text="{Binding Path=People.FirstName, Mode=TwoWay}"/>

Тут мы привязали у TextBox’а свойство Text к свойству People.FirstName у ViewModel. Так же мы указали настройку привязки. Мы сказали, что она будет двусторонняя. То есть, если мы изменяем на форме значение в TextBox’е, то это значение изменится и в свойстве модели. И наоборот.

Таким образом мы привязываем все элементы на нашей форме к модели через ViewModel:

MainWindowView.xaml

<Window x:Class="WpfApplication.View.MainWindowView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="170" Width="400">
    <Grid>
        <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Margin="12,12,0,0" 
                   Text="First name"/>
        <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Margin="12,52,0,0" 
                   Text="Last name"/>
 
        <TextBox HorizontalAlignment="Left" VerticalAlignment="Top" Margin="90,9,0,0" Width="120" 
                 Text="{Binding Path=People.FirstName, Mode=TwoWay}"/>
        <TextBox HorizontalAlignment="Left" VerticalAlignment="Top" Margin="90,49,0,0" Width="120" 
                 Text="{Binding Path=People.LastName, Mode=TwoWay}"/>
 
        <TextBox HorizontalAlignment="Left" VerticalAlignment="Top" Margin="246,9,0,0" Width="120"
                 Text="{Binding Path=People.FirstName, Mode=TwoWay}" IsReadOnly="True" />
        <TextBox HorizontalAlignment="Left" VerticalAlignment="Top" Margin="246,49,0,0" Width="120"
                 Text="{Binding Path=People.LastName, Mode=TwoWay}" IsReadOnly="True" />
 
        <Button Content="Click me" HorizontalAlignment="Left" Margin="291,97,0,0" VerticalAlignment="Top" Width="75" />
    </Grid>
</Window>

Теперь, если мы запустим наше приложение, то мы увидим на форме наши данные, которые мы проинициализировали в конструкторе нашей MainViewModel.



Если вы измените текст в каком-либо из TextBox’ов первого столбика, то значение TextBox’а напротив тоже изменится:



Это происходит благодаря тому, что оба TextBox’а привязаны к одним и тем-же полям модели.

Теперь давайте сделаем привязку команды у кнопки к нашей MainViewModel.

Логика такая: Кнопка –> Команда –> Метод.

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


MainWindowViewModel.cs

using System.Windows;
using System.Windows.Input;
using WpfApplication.Model;
 
namespace WpfApplication.ViewModel
{
    class MainViewModel
    {
        #region Constructor
 
        /// <summary>
        /// Constructor.
        /// </summary>
        public MainViewModel()
        {
            People = new PeopleModel
            {
                FirstName = "First name",
                LastName = "Last name"
            };
        }
 
        #endregion
 
 
        #region Properties
 
        /// <summary>
        /// Get or set people.
        /// </summary>
        public PeopleModel People { get; set; }
 
        #endregion
 
 
        #region Commands
 
        /// <summary>
        /// Get or set ClickCommand.
        /// </summary>
        public ICommand ClickCommand { get; set; }
 
        #endregion
 
 
        #region Methods
 
        /// <summary>
        /// Click method.
        /// </summary>
        private void ClickMethod()
        {
            MessageBox.Show("This is click command.");
        }
 
        #endregion
    }
}

Для того, чтобы нам привязать метод к команде, необходимо создать класс, реализующий интерфейс ICommand:


Command.cs

using System;
using System.Windows.Input;
 
namespace WpfApplication.ViewModel
{
    public class Command : ICommand
    {
        #region Constructor
 
        public Command(Action<object> action)
        {
            ExecuteDelegate = action;
        }
 
        #endregion
 
 
        #region Properties
 
        public Predicate<object> CanExecuteDelegate { get; set; }
        public Action<object> ExecuteDelegate { get; set; }
 
        #endregion
 
 
        #region ICommand Members
 
        public bool CanExecute(object parameter)
        {
            if (CanExecuteDelegate != null)
            {
                return CanExecuteDelegate(parameter);
            }
 
            return true;
        }
 
        public event EventHandler CanExecuteChanged
        {
            add { CommandManager.RequerySuggested += value; }
            remove { CommandManager.RequerySuggested -= value; }
        }
 
        public void Execute(object parameter)
        {
            if (ExecuteDelegate != null)
            {
                ExecuteDelegate(parameter);
            }
        }
 
        #endregion
    }
}

Суть этого класса в следующем. Когда мы нажимаем кнопку на форме, происходит попытка вызова метода Execute интерфейса ICommand. Поэтому мы должны сделать так, чтобы при вызове этого метода, внутри него происходил вызов нашего метода через делегат, который мы передаем в конструкторе класса. При необходимости этот класс легко расширить и сделать вызов любого количества пользовательских методов при срабатывании команды.

Теперь в конструкторе MainViewModel привяжем метод к команде:


MainWindowViewModel.cs

#region Constructor
 
/// <summary>
/// Constructor.
/// </summary>
public MainViewModel()
{
    ClickCommand = new Command(arg => ClickMethod());
 
    People = new PeopleModel
                 {
                    FirstName = "First name",
                    LastName = "Last name"
                 };
}
 
#endregion 

Теперь нам осталось привязать нашу команду к кнопке.


MainWindowView.xaml

<Button Content="Click me" HorizontalAlignment="Left" Margin="291,97,0,0" VerticalAlignment="Top" Width="75" Command="{Binding ClickCommand}"/>

И можно проверить, что все это работает.

Если нам необходимо, изменять значения свойств в коде. И, при этом, форма должна автоматически обновляться. То модель, значения свойств которой должны автоматически обноляться на форме, надо немного модернезировать.

Для этого эта модель должна реализовывать интерфейс INotifyPropertyChanged

Этот интерфейс описывает "механизм уведомления", всех привязанных к свойству "клиентов", о том, что значение свойства изменилось.

Работает это следующим образом.

Каждое свойство, при изменении его значения, должно "уведомлять" всех "клиентов" о том, что его значение изменилось. А "клиенты", в свою очередь, выполнять всю необходимую им логику, при обновлении "источника". Например, считать значение обновленного свойства и вывести это значение на форму.

Это "уведомление" происходит через вызов метода OnPropertyChanged реализация которого делает попытку вызова события PropertyChanged на которое подписываются все "клиенты".

Это событие и метод как раз описаны в интерфейсе INotifyPropertyChanged.

Реализация всего этого тут довольно простая:


PeopleModel.cs

class PeopleModel : INotifyPropertyChanged
    {
        #region Implement INotyfyPropertyChanged members
 
        public event PropertyChangedEventHandler PropertyChanged;
 
        protected virtual void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
 
        #endregion
 
        #region Fields
 
        private string _FirstName;
        private string _LastName;
 
        #endregion
 
        #region Properties
 
        /// <summary>
        /// Get or set first name.
        /// </summary>
        public string FirstName
        {
            get { return _FirstName; }
            set
            {
                if (_FirstName != value)
                {
                    _FirstName = value;
                    OnPropertyChanged("FirstName");
                }
            }
        }
 
 
        /// <summary>
        /// Get or set last name.
        /// </summary>
        public string LastName
        {
            get { return _LastName; }
            set
            {
                if (_LastName != value)
                {
                    _LastName = value;
                    OnPropertyChanged("LastName");
                }
            }
        }
 
        #endregion
    }

Собственно это самое минимальное, что нам нужно сделать, чтобы написать WPF приложение, следуя шаблону MVVM.

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

У нас появляется возможность не перезагружая форму, а всего лишь заменой DataContext’а менять выводимые на форму данные. И много чего еще.

Лично у меня понимание всех преимуществ этого шаблона пришли не сразу, а с получением определенного опыта разработки с его использованием. Поэтому не спешите делать выводы. Почитайте еще, попишите на нем и вам станет ясно, – нравится или нет.

Исходники примеров:

WpfApplication

WpfApplication with editing TextBoxes