Создайте открытое свойство типа IList по имени Cars:

public IList Cars { get; } =

  new ObservableCollection;

Создайте стандартный конструктор и перенесите в него весь код создания объектов Car из файла MainWindow.xaml.cs, обновив имя списковой переменной. Можете также удалить переменную _cars из MainWindow.xaml.cs. Ниже показан конструктор модели представления:

public MainWindowViewModel

{

  Cars.Add(

    new Car { Id = 1, Color = "Blue", Make = "Chevy",

              PetName = "Kit", IsChanged = false });

  Cars.Add(

    new Car { Id = 2, Color = "Red", Make = "Ford",

              PetName = "Red Rider", IsChanged = false });

}

Далее переместите весь код, относящийся к командам, из файла отделенного кода окна в модель представления, заменив ссылку на переменную _cars ссылкой на Cars. Вот измененный код:

// Для краткости остальной код не показан

private void DeleteCar(Car car)

{

  Cars.Remove(car);

}

Обновление кода и разметки MainWindow

Из файла MainWindow.xaml.cs кода была удалена большая часть кода. Удалите строку, которая устанавливает ItemsSource для поля со списком, оставив только вызов InitializeComponent. Код должен выглядеть примерно так:

public MainWindow

{

    InitializeComponent;

}

Добавьте в начало файла следующий оператор using:

using WpfViewModel.ViewModels;

Создайте строго типизированное свойство для хранения экземпляра модели представления:

public MainWindowViewModel ViewModel { get; set; }

  = new MainWindowViewModel;

Добавьте свойство DataContext к объявлению окна в разметке XAML:

DataContext="{Binding ViewModel, RelativeSource={RelativeSource Self}}"

Обновление разметки элементов управления

Теперь, когда свойство DataContext для Window установлено в модель представления, потребуется обновить привязки элементов управления в разметке XAML. Начиная с поля со списком, модифицируйте разметку за счет добавления свойства ItemsSource:

ItemsSource="{Binding Cars}" />

Прием работает, т.к. контекстом данных для Window является MainWindowViewModel, a Cars — открытое свойство модели представления. Вспомните, что конструкции привязки обходят дерево элементов до тех пор, пока не найдут контекст данных. Далее понадобится обновить привязки для элементов управления Button. Задача проста; поскольку привязки уже установлены на уровне окна, нужно лишь модифицировать конструкции привязки, чтобы они начинались со свойства DataContext:

  Margin="5,0,5,0" Padding="4, 2"

  Command="{Binding Path=DataContext.AddCarCmd,

  RelativeSource={RelativeSource Mode=FindAncestor,

                  AncestorType={x:Type Window}}}"

  CommandParameter="{Binding ElementName=cboCars, Path=ItemsSource}"/>

  Margin="5,0,5,0" Padding="4, 2"

  Command="{Binding Path=DataContext.DeleteCarCmd,

  RelativeSource={RelativeSource Mode=FindAncestor,

  AncestorType={x:Type Window}}}"

  CommandParameter="{Binding ElementName=cboCars, Path=SelectedItem}" />

  Margin="5,0,5,0" Padding="4, 2"

  Command="{Binding Path=DataContext.ChangeColorCmd,

  RelativeSource={RelativeSource Mode=FindAncestor,

  AncestorType={x:Type Window}}}"

  CommandParameter="{Binding ElementName=cboCars, Path=SelectedItem}"/>

Итоговые сведения о моделях представлений