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

Позиционирование содержимого внутри панелей StackPanel

Подобно WrapPanel элемент управления StackPanel организует содержимое внутри одиночной строки, которая может быть ориентирована горизонтально или вертикально (по умолчанию) в зависимости от значения, присвоенного свойству Orientation. Однако отличие между ними заключается в том, что StackPanel не пытается переносить содержимое при изменении размера окна пользователем. Взамен элементы в StackPanel просто растягиваются (согласно выбранной ориентации), приспосабливаясь к размеру самой панели StackPanel. Например, в файле SimpleStackPanel.xaml содержится разметка, которая в результате дает вывод, показанный на рис. 25.4:

 <Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Fun with Panels!" Height="200" Width="400">
  <StackPanel Background="LightSteelBlue" Orientation ="Vertical">
  <Label Name="lblInstruction"
  FontSize="15" Content="Enter Car Information"/>
  <Label Name="lblMake" Content="Make"/>
  <TextBox Name="txtMake"/>
  <Label Name="lblColor" Content="Color"/>
  <TextBox Name="txtColor"/>
  <Label Name="lblPetName" Content="Pet Name"/>
  <TextBox Name="txtPetName"/>
  <Button Name="btnOK" Width ="80" Content="OK"/>
  </StackPanel>
 </Page>

Если присвоить свойству Orientation значение Horizontal, тогда визуализированный вывод станет таким, как на рис. 25.5:

 <StackPanel Background="LightSteelBlue" Orientation="Horizontal">

Подобно WrapPanel панель StackPanel тоже редко применяется для организации содержимого прямо внутри окна. Панель StackPanel должна использоваться как вложенная панель в какой-нибудь главной панели.

Позиционирование содержимого внутри панелей Grid

Из всех панелей, предоставляемых API-интерфейсами WPF, панель Grid является, несомненно, самой гибкой. Аналогично таблице HTML панель Grid может состоять из набора ячеек, каждая из которых имеет свое содержимое. При определении Grid выполняются перечисленные ниже шаги.

1. Определение и конфигурирование каждой колонки.

2. Определение и конфигурирование каждой строки.

3. Назначение содержимого каждой ячейке сетки с применением синтаксиса присоединяемых свойств.

На заметку! Если не определить какие-либо строки и колонки, то по умолчанию элемент Grid будет состоять из единственной ячейки, которая заполняет всю поверхность окна. Кроме того, если не установить ячейку (колонку и строку) для подэлемента внутри Grid, тогда он автоматически разместится в колонке 0 и строке 0.

Первые два шага (определение колонок и строк) выполняются с использованием элементов Grid.ColumnDefinitions и Grid.RowDefinitions, которые содержат коллекции элементов ColumnDefinition и RowDefinition соответственно. Каждая ячейка внутри сетки на самом деле является подлинным объектом .NET, так что можно желаемым образом настраивать внешний вид и поведение каждого элемента.

Ниже представлено простое определение Grid (из файла SimpleGrid.xaml), которое организует содержимое пользовательского интерфейса, как показано на рис. 25.6:

 <Grid ShowGridLines ="True" Background ="LightSteelBlue">
   <!-- Определить строки и колонки —>
  <Grid.ColumnDefinitions>
  <ColumnDefinition/>
  <ColumnDefinition/>
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
  <RowDefinition/>
  <RowDefinition/>
  </Grid.RowDefinitions>
   <! — Добавить элементы в ячейки сетки —>
  <Label x:Name="lblInstruction" Grid.Column ="0" Grid.Row ="0"
  FontSize="15" Content="Enter Car Information"/>
  <Button x:Name="btnOK" Height ="30" Grid.Column ="0"
  Grid.Row ="0" Content="OK"/>
  <Label x:Name="lblMake" Grid.Column ="1"
  Grid.Row ="0" Content="Make"/>
  <TextBox x:Name="txtMake" Grid.Column ="1"
  Grid.Row ="0" Width="193" Height="25"/>
  <Label x:Name="lblColor" Grid.Column ="0"
  Grid.Row ="1" Content="Color"/>
  <TextBox x:Name="txtColor" Width="193" Height="25"
  Grid.Column ="0" Grid.Row ="1" />
   <!-- Добавить цвет к ячейке с именем, просто чтобы сделать

картину интереснее -- >

  <Rectangle Fill ="LightGreen" Grid.Column ="1" Grid.Row ="1" />
  <Label x:Name="lblPetName" Grid.Column ="1" Grid.Row ="1" Content="Pet Name"/>
  <TextBox x:Name="txtPetName" Grid.Column ="1" Grid.Row ="1"
  Width="193" Height="25"/>
 </Grid>

Обратите внимание, что каждый элемент (включая элемент Rectangle светло-зеленого цвета) прикрепляется к ячейке сетки с применением присоединяемых свойств Grid.Row и Grid.Column. По умолчанию порядок ячеек начинается с левой верхней ячейки, которая указывается с использованием Grid.Column="0" и Grid.Row="0". Учитывая, что сетка состоит всего из четырех ячеек, правая нижняя ячейка может быть идентифицирована как Grid.Column="1" и Grid.Row="1".