Как правильно написать на MVVM?

Question

[Михаил]

Подскажите, как правильно использовать шаблон MVVM в WPF приложении. Пример классов:

Использование контрола в стороннем классе (Создание из кода):

BrowserView someBrowser = new BrowserView();
	container.Children.Add(someBrowser);
	someBrowser.Navigate("http://google.ru/");
	someBrowser.SomeControlText = "Перешёл на сайт google.ru";

View класс:

public partial class BrowserView : UserControl
	{
		BrowserViewModel viewModel;
		public BrowserView()
		{
			InitializeComponent();
			viewModel = new BrowserViewModel(this.GetType());
			this.DataContext = viewModel;
		}
		
        public string SomeControlText
        {
            get { return viewModel.Model.SomeControlText; }
            set { viewModel.Model.SomeControlText = value; }
        }
		
        public void Navigate(string newAddress)
        {
            viewModel.Model.SomeBrowser.Address = newAddress;
        }
	}

XAML:

<UserControl x:Class="GPClient.View.BrowserView">
		<Grid x:Name="BrowserContainer">
			<ContentControl Content="{Binding Path=Model.SomeBrowser}"></ContentControl>
		</Grid>
		<SomeControl Text="{Binding Path=Model.SomeControlText}" />
	</UserControl>

ViewModel класс:

public class BrowserViewModel : Notifier
    {
        public BrowserModel Model { get; private set; }
        public BrowserViewModel(Type typeControl)
        {
            Model = new BrowserModel();
			
            ChromiumWebBrowser browser = new ChromiumWebBrowser();
            Model.SomeBrowser = browser;
        }
    }

Model класс:

public class BrowserModel : Notifier
    {
        ChromiumWebBrowser someBrowser;
        public ChromiumWebBrowser SomeBrowser
        {
            get { return someBrowser; }
            set { someBrowser = value; OnPropertyChanged("SomeBrowser"); }
        }
		
        string someControlText;
        public string SomeControlText
        {
            get { return someControlText; }
            set { someControlText = value; OnPropertyChanged("SomeControlText"); }
        }
    }

Есть пара конкретных вопросов:
1) Допустим, я хочу изменить свойство Text у SomeControl.
Это свойство забиндено на Model.SomeControlText.
Как правильно это сделать?
- Есть вариант viewModel сделать публичным и обратитсья вот так:

someBrowser.viewModel.Model.SomeControlText = "какой-то текст";

- Есть вариант продублировать это свойство в ViewModel (при этом viewModel так же сделать публичным) и сделать вот так:

someBrowser.viewModel.SomeControlText = "какой-то текст";

- Ещё вариант, создать свойство во View и сделать как-то так:

public string SomeControlText
        {
            get { return viewModel.Model.SomeControlText; }
            set { viewModel.Model.SomeControlText = value; }
        }

Обращаться вот так:
someBrowser.SomeControlText = "какой-то текст";
Вопрос, какой из этих вариантов правильный и если никакой, то как это делается?

2) Я хочу изменить свойство Address у объекта ChromiumWebBrowser в ViewModel. Есть такие-же варианты как в прошлом вопросе. А как это делать правильно?

Что я делаю не так? Или все верно?

Answer 1

[Роман]

Для начала, возьмите какой нибудь MVVM framework (SimpleMVVM, MVVMLight, у них есть куча примеров), делаем свой view, ViewModel. В этих фрейморках уже реализованы базовые классы для создания VM (реализован INotyfyPropertyChanged). В VM надо добавить необходимые свойства, с которыми будет привязка свойств элементов. Так же желательно сделать класс-сервис, который будет создавать по требованию модель, экземпляр класса прописать в App.Resources, и биндить необходимую VM сразу в Xalm, к DataContext="{Binding GroupsViewModel, Mode=OneWay, Source={StaticResource Locator}}">(у локатора есть свойство GroupsViewModel, в котором зоздается необходимый VM, передаются все параметры на сервисы (например работа с БД).

создание и передача элементов, или работа с контролами напрямую, увеличивает связанность кода, и тд.

те, например в вашем случае:

locator.cs

public class Locator
{
  public MainViewModel MainVM 
  {
      get {return new MainViewModel(); }
  }
}

MainViewModel.cs

public class MainViewModel : Notifier
    {
       MainViewModel ()
       {
       }

        string address;
        public string Address;
        {
            get { return address; }
            set { address = value; OnPropertyChanged("Address"); }
        }

        string someControlText;
        public string SomeControlText
        {
            get { return someControlText; }
            set { someControlText = value; OnPropertyChanged("SomeControlText"); }
        }
    }

в App.xaml в ресурсы прописываем (естественно добавляем необходимые xmlns)
<Locator x:Key="Locator"/>

MainView.xaml

<UserControl x:Class="GPClient.View.BrowserView" DataContext="{Binding MainViewModel, Source={StaticResource Locator}}">>
    <ChromiumWebBrowser Address="{Binding Path=Address, Mode=TwoWay}"/>
    <SomeControl Text="{Binding Path=SomeControlText, Mode=TwoWay}" />
  </UserControl>

Все дело в Mode=TwoWay. если элемент сам устанавливает свойство, то оно автоматом обновляется в VM, и наоборот, те если вам надо перейти на адрес, в методе в VM пишем Address="http://перейди-на.сайт"; обращаемся к полю VM, а не к приватному члену, иначе не вызовется PropertyChanged, с SomeText, так же.
Если у нас есть TextBox, то привязка таким образом позволяет получать введенное в него значение.

для привязки методов, и событий, используются Command и триггеры в XAML.

У вас тут немного спутано понятие ViewModel и Model. В VM прописываются, свойства, к которым будет привязка элементов View, а Model, это данные с которыми мы работаем, например модель БД, классы в которые сериализуется XML.

Скачайте MVVMLight, SimpleMVVM, это простые фреймворки, с хорошими примерами и легковесные.

Comments

[Михаил]

Я так и не понял. Как мне из кода обратиться к Address конкретного контрола, который, допустим, тоже был создан из кода.

[Роман]

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

Answer 2

[Борис Животное]

Если актуалити, то могу показать пример с библиотекой MvvmLight.

Comments

[Михаил]

актуально

[Борис Животное]

Михаил: что хочешь увидеть? Желательно что-то не сильно большое, чтобы это можно было быстро сделать. Так-то могу многое просто скопировать частично в новый проект и довольно быстро сделать новый, но всё же, что именно тебе непонятно и что интересует?

Лично как думаю я, тебе нужно знать, что есть локатор вью моделей (ViewModelLocator), в нём содержатся нужные вью модели. Можно настроить свойства этого класса так, чтобы при обращении они/оно возвращали всегда один и тот же экземпляр вью модели или каждое обращение новый. Либо можно создать лишь реально долгоживущую вью модель в локаторе, а остальные создавать внутри кода других вью моделей уже по мере создания каких-то объектов, которые требуют вью модель. Ну или вью модель может быть изначально в свойстве DataContext какой-то вью. Возможно сейчас ты ничего не понял, но когда попробуешь что-то писать, то вернись к этому тексту, постепенно придёт понимание о чём я говорю.

Как устроен MVVM.
Model - классы модели, то есть бизнес логика и какие-то классы, к примеру DTO (data Transfer Object), с помощью которых можно обмениваться данными через WCF. Сериализовали объект на сервере, передали данные в виде XML, десериализовали на клиенте, вот это DTO.

ViewModel - логика самого приложения и, например, обёртки над DTO классами, которые умеют уведомлять UI о изменении какого-то свойства в DTO классе. В простом случае это просто копия DTO класса, но внутри этой "копии" находится экземпляр класса DTO, а обёртка оборачивает его свойства своими и дополнительно вызывает реализацию INotifyPropertyChanged. Без примеров кода не совсем ясно, но в будущем должен понять, что я тут имею ввиду.

View - окна, элементы управления, в общем, вся UI часть.

Как всё взаимодействует. View знает о ViewModel, ViewModel знает о Model, но не наоборот.
View обновляет свои данные посредством биндингов и вызывая методы вью модели внутри CodeBehind вьюшки. Но нельзя передавать во ViewModel на что-то из View, ведь ViewModel ничего не знает о View.

Зачем всё вообще это нужно? Во-первых написав нормально рабочую ViewModel можно легко заменить View не трогая ViewModel, в хорошем случае. Либо для одной ViewModel можно написать много разных View и в зависимости от своих каких-то условий подставлять нужный VIew. Так же такое разделение позволяет легко тестировать ViewModel в юнит тестах, так как она вообще никак не связана с View. Короче, поверь, одни плюсы. Я уже не раз убедился, что на работе все новые проекты используют MVVM.