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

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

<Grid Background ="LightSteelBlue">

<b>  &lt;!-- Определить колонки --&gt;</b>

  &lt;Grid.ColumnDefinitions&gt;

    &lt;ColumnDefinition Width =&quot;Auto&quot;/&gt;

    &lt;ColumnDefinition/&gt;

  &lt;/Grid.ColumnDefinitions&gt;

<b> &lt;!— Добавить метку в ячейку 0 --&gt;</b>

  &lt;Label x:Name=&quot;lblLeft&quot; Background =&quot;GreenYellow&quot;

         Grid.Column=&quot;0&quot; Content =&quot;Left!&quot;/&gt;

<b> &lt;!-- Определить разделитель —&gt;</b>

  &lt;GridSplitter Grid.Column =&quot;0&quot; Width =&quot;5&quot;/&gt;

<b>  &lt;!-- Добавить метку в ячейку 1 -- &gt;</b>

  &lt;Label x:Name=&quot;lblRight&quot; Grid.Column =&quot;1&quot; Content =&quot;Right!&quot;/&gt;

&lt;/Grid&gt;

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

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

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

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

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

&lt;DockPanel LastChildFill =&quot;True&quot; Background=&quot;AliceBlue&quot;&gt;

  &lt;! -- Стыковать элементы к панели -- &gt;

  &lt;Label DockPanel.Dock =&quot;Top&quot; Name=&quot;lblInstruction&quot; FontSize=&quot;15&quot;

      Content=&quot;Enter Car Information&quot;/&gt;

  &lt;Label DockPanel.Dock =&quot;Left&quot; Name=&quot;lblMake&quot; Content=&quot;Make&quot;/&gt;

  &lt;Label DockPanel.Dock =&quot;Right&quot; Name=&quot;lblColor&quot; Content=&quot;Color&quot;/&gt;

  &lt;Label DockPanel.Dock =&quot;Bottom&quot; Name=&quot;lblPetName&quot; Content=&quot;Pet Name&quot;/&gt;

  &lt;Button Name=&quot;btnOK&quot; Content=&quot;OK&quot;/&gt;

&lt;/DockPanel&gt;

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

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

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

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

&lt;ScrollViewer&gt;

  &lt;StackPanel&gt;

    &lt;Button Content =&quot;First&quot; Background = &quot;Green&quot; Height =&quot;50&quot;/&gt;

    &lt;Button Content =&quot;Second&quot; Background = &quot;Red&quot; Height =&quot;50&quot;/&gt;

    &lt;Button Content =&quot;Third&quot; Background = &quot;Pink&quot; Height =&quot;50&quot;/&gt;

    &lt;Button Content =&quot;Fourth&quot; Background = &quot;Yellow&quot; Height =&quot;50&quot;/&gt;

    &lt;Button Content =&quot;Fifth&quot; Background = &quot;Blue&quot; Height =&quot;50&quot;/&gt;