SharedSizeGroup="CarLabels"/>
HorizontalAlignment="Right" Orientation="Horizontal" Margin="0,5,0,5">
Padding="4, 2"/>
Окно должно напоминать показанное на рис. 28.1.
Свойство IsSharedSizeScope элемента управления Grid заставляет дочерние сетки разделять размеры. Элемент ColumnDefinitions, помеченный как SharedSizeGroup, автоматически получит ту же самую ширину без каких-либо потребностей в программировании. В рассматриваемом примере, если размер метки Pet Name (Дружественное имя) изменяется из-за более длинного значения, тогда соответствующим образом корректируется и размер колонки Vehicle (Автомобиль), который находится в другом элементе управления Grid, сохраняя аккуратный внешний вид окна.
Щелкните правой кнопкой мыши на имени проекта в окне 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, содержащего элементы управления с информацией об автомобиле, следующим образом:
DataContext="{Binding ElementName=cboCars, Path=SelectedItem}">
Текстовые поля в элементе DetailsGrid будут отображать индивидуальные характеристики выбранного автомобиля. Добавьте подходящие атрибуты Text и привязки к элементам управления TextBox:
Наконец, поместите нужные данные в элемент управления ComboBox. В файле MainWindow.xaml.cs создайте новый список записей Car и присвойте его свойству ItemsSource элемента ComboBox. Кроме того, добавьте оператор using для пространства имен WpfNotifications.Models.
using WpfNotifications.Models;
// Для краткости код не показан.
public partial class MainWindow : Window
{
readonly IList
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:
