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

Троелсен Эндрю

Установите свойство

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

:

public interface INotifyPropertyChanged

{

event PropertyChangedEventHandler PropertyChanged;

}

Добавьте в файл

Car.cs

следующие операторы

using

:

using System.ComponentModel;

using System.Runtime.CompilerServices;

Затем обеспечьте реализацию классом

Car

интерфейса

INotifyPropertyChanged

: