Язык программирования C#9 и платформа .NET5

Щелкните правой кнопкой мыши на имени проекта в окне Solution Explorer, выберите в контекстном меню пункт Add?New Folder (Добавить?Новая папка) и назначьте новой папке имя Models. Создайте в новой папке файл класса Car.cs. Первоначально код класса выглядит так:

 public class Car
 {
  public int Id { get; set; }
  public string Make { get; set; }
  public string Color { get; set; }
  public string PetName { get; set; }
 }

Добавление привязок и данных

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

Установите свойство DataContext в свойство SelectedItem элемента ComboBox. Модифицируйте определение элемента Grid, содержащего элементы управления с информацией об автомобиле, следующим образом:

 <Grid Grid.Row="1" Name="DetailsGrid"
   DataContext="{Binding ElementName=cboCars, Path=SelectedItem}">

Текстовые поля в элементе DetailsGrid будут отображать индивидуальные характеристики выбранного автомобиля. Добавьте подходящие атрибуты Text и привязки к элементам управления TextBox:

 <TextBox Grid.Column="1" Grid.Row="0" Text="{Binding Path=Id}" />
 <TextBox Grid.Column="1" Grid.Row="1" Text="{Binding Path=Make}" />
 <TextBox Grid.Column="1" Grid.Row="2" Text="{Binding Path=Color}" />
 <TextBox Grid.Column="1" Grid.Row="3" Text="{Binding Path=PetName}" />

Наконец, поместите нужные данные в элемент управления ComboBox. В файле MainWindow.xaml.cs создайте новый список записей Car и присвойте его свойству ItemsSource элемента ComboBox. Кроме того, добавьте оператор using для пространства имен WpfNotifications.Models.

 using WpfNotifications.Models;
 // Для краткости код не показан.
 public partial class MainWindow : Window
 {
  readonly IList<Car> _cars = new List<Car>;
  public MainWindow
  {
  InitializeComponent;
  _cars.Add(new Car {Id = 1, Color = "Blue", Make = "Chevy",
  PetName = "Kit"});
  _cars.Add(new Car {Id = 2, Color = "Red", Make = "Ford",
  PetName = "Red Rider"});
  cboCars.ItemsSource = _cars;
  }
 }

Запустите приложение. Вы увидите, что в поле со списком Vehicle для выбора доступны два варианта автомобилей. Выбор одного из них приводит к автоматическому заполнению текстовых полей сведениями об автомобиле. Измените цвет одного из автомобилей, выберите другой автомобиль и затем возвратитесь к автомобилю, запись о котором редактировалась. Вы обнаружите, что новый цвет по-прежнему связан с автомобилем. Здесь нет ничего примечательного, просто демонстрируется мощь привязки данных XAML.

Изменение данных об автомобиле в коде

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

 Button x:Name="btnChangeColor" Content="Change Color" Margin="5,0,5,0"
  Padding="4, 2" Click="BtnChangeColor_OnClick"/>

Внутри обработчика события BtnChangeColor_OnClick с помощью свойства SelectedItem элемента управления ComboBox отыщите выбранную запись в списке автомобилей и измените ее цвет на Pink:

 private void BtnChangeColor_OnClick(object sender, RoutedEventArgs e)
 {
  _cars.First(x => x.Id == ((Car)cboCars.SelectedItem)?.Id).Color = "Pink";
 }

Запустите приложение, выберите автомобиль и щелкните на кнопке Change Color (Изменить цвет). Никаких видимых изменений не произойдет. Выберите другой автомобиль и затем снова первоначальный. Теперь вы заметите обновленное значение. Для пользователя такое поведение не особенно подходит.

Добавьте обработчик события Click для кнопки btnAddCar:

 <Button x:Name="btnAddCar" Content="Add Car" Margin="5,0,5,0" Padding="4, 2"
  Click="BtnAddCar_OnClick" />

В обработчике события BtnAddCar_OnClick добавьте новую запись в список Car:

 private void BtnAddCar_Click(object sender, RoutedEventArgs e)
 {
  var maxCount = _cars?.Max(x => x.Id) ?? 0;
  _cars?.Add(new Car { Id=++maxCount,Color="Yellow",Make="VW",PetName="Birdie"});
 }

Запустите приложение, щелкните на кнопке Add Car (Добавить автомобиль) и просмотрите содержимое элемента управления ComboBox. Хотя известно, что в списке имеется три автомобиля, в элементе ComboBox отображаются только два! Чтобы устранить обе проблемы, вы превратите класс Car в наблюдаемую модель и будете использовать наблюдаемую коллекцию для хранения всех экземпляров Car.

Наблюдаемые модели

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