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

      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 _cars = new List;

  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: