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

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".

Установка размеров столбцов и строк в панели Grid

Задавать размеры столбцов и строк в панели Grid можно одним из трех способов:

• установка абсолютных размеров (например, 100);

• установка автоматических размеров;

• установка относительных размеров (например, 3*).

Установка абсолютных размеров — именно то, что и можно было ожидать; для размера колонки (или строки) указывается специфическое число единиц, независимых от устройства. При установке автоматических размеров размер каждой колонки или строки определяется на основе элементов управления, содержащихся в колонке или строке. Установка относительных размеров практически эквивалентна заданию размеров в процентах внутри стиля CSS. Общая сумма чисел в колонках или строках с относительными размерами распределяется на общий объем доступного пространства.

В следующем примере первая строка получает 25% пространства, а вторая — 75% пространства:

<Grid.ColumnDefinitions>

  <ColumnDefinition Width="1*" />

  <ColumnDefinition Width="3*" />

</Grid.ColumnDefinitions>

Панели Grid с типами GridSplitter

Панели Grid также способны поддерживать разделители. Как вам возможно известно, разделители позволяют конечному пользователю изменять размеры колонок и строк сетки. При этом содержимое каждой ячейки с изменяемым размером реорганизует себя на основе находящихся в нем элементов. Добавлять разделители к Grid довольно просто:необходимо определить элемент управления GridSplitter и с применением синтаксиса присоединяемых свойств указать строку или колонку, на которую он воздействует.

Имейте в виду, что для того, чтобы разделитель был виден на экране, потребуется присвоить значение его свойству Width или Height (в зависимости от вертикального или горизонтального разделения). Ниже показана простая панель Grid с разделителем на первой колонке (Grid.Column="0") из файла GridWithSplitter.xaml:

<Grid Background ="LightSteelBlue">

  <!-- Определить колонки -->

  <Grid.ColumnDefinitions>

    <ColumnDefinition Width ="Auto"/>

    <ColumnDefinition/>

  </Grid.ColumnDefinitions>

 <!— Добавить метку в ячейку 0 -->

  <Label x:Name="lblLeft" Background ="GreenYellow"

         Grid.Column="0" Content ="Left!"/>

 <!-- Определить разделитель —>

  <GridSplitter Grid.Column ="0" Width ="5"/>

  <!-- Добавить метку в ячейку 1 -- >

  <Label x:Name="lblRight" Grid.Column ="1" Content ="Right!"/>

</Grid>

Прежде всего, обратите внимание, что колонка, которая будет поддерживать разделитель, имеет свойство Width, установленное в Auto. Вдобавок элемент GridSplitter использует синтаксис присоединяемых свойств для указания, с какой колонкой он работает. В выводе (рис. 25.7) можно заметить 5-пиксельный разделитель, который позволяет изменять размер каждого элемента Label. Из-за того, что для элементов Label не было задано свойство Height или Width, они заполняют всю ячейку.

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

Панель DockPanel обычно применяется в качестве контейнера, который содержит любое количество дополнительных панелей для группирования связанного содержимого. Панели DockPanel используют синтаксис присоединяемых свойств (как было показано в типах Canvas и Grid) для управления местом, куда будет пристыковываться каждый элемент внутри DockPanel.

В файле SimpleDockPanel.xaml определена следующая простая панель DockPanel, которая дает результат, показанный на рис. 25.8:

<DockPanel LastChildFill ="True" Background="AliceBlue">

  <! -- Стыковать элементы к панели -- >

  <Label DockPanel.Dock ="Top" Name="lblInstruction" FontSize="15"

      Content="Enter Car Information"/>

  <Label DockPanel.Dock ="Left" Name="lblMake" Content="Make"/>

  <Label DockPanel.Dock ="Right" Name="lblColor" Content="Color"/>

  <Label DockPanel.Dock ="Bottom" Name="lblPetName" Content="Pet Name"/>

  <Button Name="btnOK" Content="OK"/>

</DockPanel>

На заметку! Если добавить множество элементов к одной стороне DockPanel, то они выстроятся вдоль указанной грани в порядке их объявления.

Преимущество применения типов DockPanel заключается в том, что при изменении пользователем размера окна каждый элемент остается прикрепленным к указанной (посредством DockPanel.Dock) стороне панели. Также обратите внимание, что внутри открывающего дескриптора DockPanel в этом примере атрибут LastChildFill установлен в true. Поскольку элемент