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