<Grid Grid.Row="1" Name="DetailsGrid"
<b> DataContext="{Binding ElementName=cboCars, Path=SelectedItem}"></b>
Текстовые поля в элементе
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
:
