Язык программирования C#9 и платформа .NET5 - Троелсен Эндрю

<Grid IsSharedSizeScope="True" Margin="5,0,5,5">

  <Grid.RowDefinitions>

    <RowDefinition Height="Auto"/>

    <RowDefinition Height="Auto"/>

  </Grid.RowDefinitions>

  <Grid Grid.Row="0">

    <Grid.ColumnDefinitions>

      <ColumnDefinition Width="Auto"

        SharedSizeGroup="CarLabels"/>

      <ColumnDefinition Width="*"/>

    </Grid.ColumnDefinitions>

    <Label Grid.Column="0" Content="Vehicle"/>

    <ComboBox Name="cboCars"  Grid.Column="1"

      DisplayMemberPath="PetName" />

</Grid>

<Grid Grid.Row="1" Name="DetailsGrid">

  <Grid.ColumnDefinitions>

    <ColumnDefinition Width="Auto"

      SharedSizeGroup="CarLabels"/>

    <ColumnDefinition Width="*"/>

  </Grid.ColumnDefinitions>

  <Grid.RowDefinitions>

    <RowDefinition Height="Auto"/>

    <RowDefinition Height="Auto"/>

    <RowDefinition Height="Auto"/>

    <RowDefinition Height="Auto"/>

    <RowDefinition Height="Auto"/>

  </Grid.RowDefinitions>

   <Label Grid.Column="0" Grid.Row="0" Content="Id"/>

  <TextBox Grid.Column="1" Grid.Row="0" />

  <Label Grid.Column="0" Grid.Row="1" Content="Make"/>

  <TextBox Grid.Column="1" Grid.Row="1" />

  <Label Grid.Column="0" Grid.Row="2" Content="Color"/>

  <TextBox Grid.Column="1" Grid.Row="2" />

  <Label Grid.Column="0" Grid.Row="3" Content="Pet Name"/>

  <TextBox Grid.Column="1" Grid.Row="3" />

  <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="4"

       HorizontalAlignment="Right" Orientation="Horizontal" Margin="0,5,0,5">

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

    <Button x:Name="btnChangeColor" Content="Change Color" Margin="5,0,5,0"

       Padding="4, 2"/>

  </StackPanel>

  </Grid>

</Grid>

Окно должно напоминать показанное на рис. 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, содержащего элементы управления с информацией об автомобиле, следующим образом: