Язык программирования 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;

(window.adrunTag = window.adrunTag || []).push({v: 1, el: 'adrun-4-390', c: 4, b: 390})

      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 и с применением синтаксиса присоединяемых свойств указать строку или колонку, на которую он воздействует.