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

1. Определение и конфигурирование каждой колонки.
2. Определение и конфигурирование каждой строки.
3. Назначение содержимого каждой ячейке сетки с применением синтаксиса присоединяемых свойств.
На заметку! Если не определить какие-либо строки и колонки, то по умолчанию элемент 
Grid
 будет состоять из единственной ячейки, которая заполняет всю поверхность окна. Кроме того, если не установить ячейку (колонку и строку) для подэлемента внутри 
Grid
, тогда он автоматически разместится в колонке 0 и строке 0.
Первые два шага (определение колонок и строк) выполняются с использованием элементов 
Grid.ColumnDefinitions
 и 
Grid.RowDefinitions
, которые содержат коллекции элементов 
ColumnDefinition
 и 
RowDefinition
 соответственно. Каждая ячейка внутри сетки на самом деле является подлинным объектом .NET, так что можно желаемым образом настраивать внешний вид и поведение каждого элемента.
Ниже представлено простое определение 
Grid
 (из файла 
SimpleGrid.xaml
), которое организует содержимое пользовательского интерфейса, как показано на рис. 25.6:
<Grid ShowGridLines ="True" Background ="LightSteelBlue">
<b>  &lt;!-- Определить строки и колонки —&gt;</b>
  &lt;Grid.ColumnDefinitions&gt;
    &lt;ColumnDefinition/&gt;
    &lt;ColumnDefinition/&gt;
  &lt;/Grid.ColumnDefinitions&gt;
  &lt;Grid.RowDefinitions&gt;
    &lt;RowDefinition/&gt;
    &lt;RowDefinition/&gt;
  &lt;/Grid.RowDefinitions&gt;
<b>  &lt;! — Добавить элементы в ячейки сетки —&gt;</b>
  &lt;Label x:Name=&quot;lblInstruction&quot; Grid.Column =&quot;0&quot; Grid.Row =&quot;0&quot;
      FontSize=&quot;15&quot; Content=&quot;Enter Car Information&quot;/&gt;
  &lt;Button x:Name=&quot;btnOK&quot; Height =&quot;30&quot; Grid.Column =&quot;0&quot;
      Grid.Row =&quot;0&quot; Content=&quot;OK&quot;/&gt;
  &lt;Label x:Name=&quot;lblMake&quot; Grid.Column =&quot;1&quot;
      Grid.Row =&quot;0&quot; Content=&quot;Make&quot;/&gt;
  &lt;TextBox x:Name=&quot;txtMake&quot; Grid.Column =&quot;1&quot;
      Grid.Row =&quot;0&quot; Width=&quot;193&quot; Height=&quot;25&quot;/&gt;
  &lt;Label x:Name=&quot;lblColor&quot; Grid.Column =&quot;0&quot;
      Grid.Row =&quot;1&quot; Content=&quot;Color&quot;/&gt;
  &lt;TextBox x:Name=&quot;txtColor&quot; Width=&quot;193&quot; Height=&quot;25&quot;
 
      Grid.Column =&quot;0&quot; Grid.Row =&quot;1&quot; /&gt;
<b>  &lt;!-- Добавить цвет к ячейке с именем, просто чтобы сделать</b>
       картину интереснее -- >
  &lt;Rectangle Fill =&quot;LightGreen&quot; Grid.Column =&quot;1&quot; Grid.Row =&quot;1&quot; /&gt;
  &lt;Label x:Name=&quot;lblPetName&quot; Grid.Column =&quot;1&quot; Grid.Row =&quot;1&quot; Content=&quot;Pet Name&quot;/&gt;
  &lt;TextBox x:Name=&quot;txtPetName&quot; Grid.Column =&quot;1&quot; Grid.Row =&quot;1&quot;
      Width=&quot;193&quot; Height=&quot;25&quot;/&gt;
&lt;/Grid&gt;
Обратите внимание, что каждый элемент (включая элемент 
Rectangle
 светло-зеленого цвета) прикрепляется к ячейке сетки с применением присоединяемых свойств 
Grid.Row
 и 
Grid.Column
. По умолчанию порядок ячеек начинается с левой верхней ячейки, которая указывается с использованием 
Grid.Column=&quot;0&quot;
 и 
Grid.Row=&quot;0&quot;
. Учитывая, что сетка состоит всего из четырех ячеек, правая нижняя ячейка может быть идентифицирована как 
Grid.Column=&quot;1&quot;
 и 
Grid.Row=&quot;1&quot;
.
  
Установка размеров столбцов и строк в панели Grid
 
Задавать размеры столбцов и строк в панели 
Grid
 можно одним из трех способов:
• установка абсолютных размеров (например, 
100
);
• установка автоматических размеров;
• установка относительных размеров (например, 
3*
).
Установка абсолютных размеров — именно то, что и можно было ожидать; для размера колонки (или строки) указывается специфическое число единиц, независимых от устройства. При установке автоматических размеров размер каждой колонки или строки определяется на основе элементов управления, содержащихся в колонке или строке. Установка относительных размеров практически эквивалентна заданию размеров в процентах внутри стиля CSS. Общая сумма чисел в колонках или строках с относительными размерами распределяется на общий объем доступного пространства.
В следующем примере первая строка получает 25% пространства, а вторая — 75% пространства:
&lt;Grid.ColumnDefinitions&gt;
  &lt;ColumnDefinition Width=&quot;1*&quot; /&gt;
  &lt;ColumnDefinition Width=&quot;3*&quot; /&gt;
&lt;/Grid.ColumnDefinitions&gt;
  
Панели Grid с типами GridSplitter
 
Панели 
Grid
 также способны поддерживать разделители. Как вам возможно известно, разделители позволяют конечному пользователю изменять размеры колонок и строк сетки. При этом содержимое каждой ячейки с изменяемым размером реорганизует себя на основе находящихся в нем элементов. Добавлять разделители к 
Grid
 довольно просто:необходимо определить элемент управления 
GridSplitter
 и с применением синтаксиса присоединяемых свойств указать строку или колонку, на которую он воздействует.