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

Установка размеров столбцов и строк в панели 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. Поскольку элемент Button на самом деле является "последним дочерним" элементом в контейнере, он будет растянут, чтобы занять все оставшееся пространство.

Включение прокрутки в типах панелей

Полезно упомянуть, что в рамках инфраструктуры WPF поставляется класс ScrollViewer, который обеспечивает автоматическое поведение прокрутки данных внутри объектов панелей. Вот как он определяется в файле SimpleScrollViewer.xaml:

 <ScrollViewer>
  <StackPanel>
  <Button Content ="First" Background = "Green" Height ="50"/>
  <Button Content ="Second" Background = "Red" Height ="50"/>
  <Button Content ="Third" Background = "Pink" Height ="50"/>
  <Button Content ="Fourth" Background = "Yellow" Height ="50"/>
  <Button Content ="Fifth" Background = "Blue" Height ="50"/>
  </StackPanel>
 </ScrollViewer>

Результат визуализации приведенного определения XAML представлен на рис. 25.9 (обратите внимание на то, что справа в окне отображается линейка прокрутки, т.к. размера окна не хватает, чтобы показать все пять кнопок).