Положение и макет элементов управления

Размещение элементов управления в Windows Forms определяется не только элементом управления, но и родительским элементом элемента управления. В этой статье описываются различные параметры, предоставляемые элементами управления, и различные типы родительских контейнеров, влияющих на макет.

Фиксированное положение и размер

Позиция элемента управления находится на родительском объекте и описана значением свойства Location относительно верхнего левого угла родительской поверхности. Координата верхнего левого угла элемента управления в родительском элементе (x0,y0). Размер элемента управления определяется свойством Size и представляет ширину и высоту элемента управления.

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

Свойства MaximumSize и MinimumSize помогают задать минимальное и максимальное пространство, которое может использовать контрол.

Поля и заполнение

Существует два свойства элемента управления, которые помогают точное размещение элементов управления: Margin и Padding.

Свойство Margin определяет пространство вокруг элемента управления, которое сохраняет другие элементы управления на определённом расстоянии от границ элемента управления.

Свойство Padding определяет пространство внутри элемента управления, которое сохраняет содержимое элемента управления (например, значение его свойства Text) на указанном расстоянии от границ элемента управления.

На следующем рисунке показаны свойства Margin и Padding элемента управления.

Конструктор Visual Studio учитывает эти свойства при расположении и изменении размера элементов управления. Направляющие линии отображаются в виде ориентиров, чтобы помочь вам не пересекать указанное поле элемента управления. Например, Visual Studio отображает линию привязки при перетаскивании элемента управления рядом с другим элементом управления.

Автоматическое размещение и размер

Элементы управления могут быть автоматически размещены в родительском элементе. Некоторые родительские контейнеры форсируют размещение, в то время как другие устанавливают настройки, которые направляют размещение. В элементе управления есть два свойства, которые помогают автоматически определять расположение и размер внутри родительского объекта: Dock и Anchor.

Порядок размещения элементов может повлиять на автоматическое их расположение. Порядок, в котором элемент управления отображается, определяется индексом этого элемента в коллекции родительского элемента Controls. Этот индекс называется Z-order. Каждый элемент управления рисуется в порядке, обратном тому, в котором они появляются в коллекции. Это означает, что коллекция представляет собой структуру данных, работающую по принципу "первый поступил — последний вышел" и "последний поступил — первый вышел".

Свойства MinimumSize и MaximumSize помогают задать минимально и максимально допустимое пространство, которое может использовать элемент управления.

Док

Свойство Dock задает, какая граница элемента управления выравнивается с соответствующей стороной родительского элемента, а также способы изменения размера элемента управления внутри родительского элемента.

При закреплении элемента управления контейнер определяет место, которое он должен занять, и автоматически изменяет размер и позиционирует элемент управления. Ширина и высота элемента управления учитываются в соответствии со стилем закрепления. Например, если элемент управления закреплен у верхней части, Height элемента управления учитывается, а Width автоматически корректируется. Если элемент управления закреплен слева, Width элемента управления сохраняется, а Height автоматически корректируется.

Элемент Location управления не может быть задан вручную как закрепление элемента управления автоматически задает положение.

Элемент Z-order управления влияет на стыковку. При закреплении элементов управления они используют пространство, имеющееся в их распоряжении. Например, если элемент управления сначала нарисован и закреплен в верхней части, он занимает всю ширину контейнера. Если следующий элемент управления закреплен слева, он имеет меньше вертикального пространства, доступного для него.

Если элемент управления Z-order повернут наоборот, то элемент управления, закрепленный слева, теперь имеет больше начального места. Элемент управления использует всю высоту контейнера. Элемент управления, прикрепленный к верхней части, имеет менее горизонтальное пространство, доступное для него.

По мере роста и сжатия контейнера элементы управления, закрепленные в контейнере, перемещаются и изменяются для поддержания их применимых позиций и размеров.

Если несколько элементов управления пристыкованы к одной стороне контейнера, они выстраиваются в соответствии с их Z-order.

Привязка

Привязка элемента управления позволяет связать элемент управления с одной или несколькими сторонами родительского контейнера. По мере изменения размера контейнера привязанные дочерние элементы управления сохраняют расстояние до привязанной стороны.

Элемент управления можно привязать к одной или нескольким сторонам без ограничений. Привязка задается свойством Anchor .

Автоматическое изменение размера

Свойство AutoSize позволяет элементу управления изменять его размер( при необходимости), чтобы он соответствовал размеру, указанному свойством PreferredSize . Измените поведение размера для определенных элементов управления, задав AutoSizeMode свойство.

Только некоторые элементы управления поддерживают AutoSize свойство. Кроме того, некоторые элементы управления, поддерживающие AutoSize свойство, также поддерживают AutoSizeMode свойство.

Свойство AutoSizeMode

Свойство AutoSizeMode обеспечивает более точное управление поведением по умолчанию AutoSize . Свойство AutoSizeMode определяет, как элемент управления изменяет свой размер в соответствии с содержимым. Например, содержимое может быть текстом Button элемента управления или дочерними элементами управления для контейнера.

В следующем списке показаны AutoSizeMode значения и их поведение.

• AutoSizeMode.GrowAndShrink

  Элемент управления растет или сжимается, чтобы охватывать его содержимое.

  Значения MinimumSize и MaximumSize учитываются, но значение свойства Size игнорируется.

  Это то же поведение, что и элементы управления со свойством AutoSize и без AutoSizeMode свойства.

• AutoSizeMode.GrowOnly

  Элемент управления увеличивается до необходимого размера, чтобы вместить своё содержимое, но не уменьшается ниже значения, указанного свойством Size.

  Это значение по умолчанию для AutoSizeMode.

Элементы управления, поддерживающие свойство AutoSize

В следующей таблице описывается уровень поддержки автоматического изменения размера для каждого элемента управления:

AutoSize в среде проектирования

В следующей таблице описывается поведение изменения размера элемента управления во время разработки на основе значения его AutoSize и AutoSizeMode свойств.

Переопределите SelectionRules свойство, чтобы определить, находится ли заданный элемент управления в состоянии, изменяемом пользователем. В следующей таблице "не удается изменить размер" означает только Moveable, а "можно изменить размер" означает AllSizeable и Moveable.

Контейнер: форма

Form — это основной объект Windows Forms. Приложение Windows Forms обычно имеет форму, отображаемую в любое время. Формы содержат элементы управления и учитывают свойства Location и Size элемента управления для ручного размещения. Формы также отвечают на свойство Dock для автоматического размещения.

В большинстве случаев форма имеет ручки на краях, которые позволяют пользователю изменять её размер. Свойство Anchor элемента управления позволяет элементу управления расти и сжиматься по мере изменения размера формы.

Контейнер: панель

Элемент управления Panel схож с формой тем, что он просто группирует другие элементы управления вместе. Он поддерживает те же стили ручного и автоматического размещения, что и форма. Дополнительные сведения см. в разделе "Контейнер: форма ".

Панель органично вписывается в родительский элемент и отсекает любую часть управляющего элемента, которая выходит за границы панели. Если элемент управления выходит за пределы панели и имеет значение true, полосы прокрутки отображаются, AutoScroll а пользователь может прокручивать панель.

В отличие от элемента управления "Поле группы ", панель не имеет заголовка и границы.

На приведенном выше изображении есть панель с установленным свойством BorderStyle, чтобы продемонстрировать границы панели.

Контейнер: поле группы

Элемент GroupBox управления предоставляет идентифицируемую группирование для других элементов управления. Как правило, для подраздела формы по функциям используется поле группы. Например, у вас может быть форма, представляющая личную информацию, и поля, связанные с адресом, будут сгруппированы вместе. Во время разработки можно легко перемещать групповую рамку вместе с элементами управления, которые она содержит.

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

В отличие от элемента управления панелью, групповое окно не имеет возможности прокрутки содержимого и отображения полос прокрутки.

Контейнер: макет потока

Элемент управления FlowLayoutPanel упорядочивает его содержимое в горизонтальном или вертикальном направлении потока. Содержимое элемента управления можно упаковать из одной строки к следующей или из одного столбца к следующему. Вместо этого, вы можете обрезать содержимое, а не оборачивать его.

Направление потока можно указать, задав значение свойства FlowDirection. Элемент управления FlowLayoutPanel правильно задает обратное направление потока в макетах с направлением справа налево (RTL). Можно также указать, будет ли содержимое элемента управления FlowLayoutPanel оборачиваться или обрезаться, задав значение свойства WrapContents.

Элемент управления FlowLayoutPanel автоматически подстраивается под свое содержимое, если установить свойство AutoSize в значение true. Он также предоставляет дочерним элементам управления свойство FlowBreak. Задание значения свойства FlowBreak для true заставляет управление FlowLayoutPanel остановить размещение элементов в текущем направлении потока и перейти на следующую строку или столбец.

Изображение выше содержит два FlowLayoutPanel элемента управления с набором BorderStyle свойств, чтобы продемонстрировать границы элемента управления.

Контейнер: макет таблицы

Элемент управления TableLayoutPanel организует своё содержимое в виде сетки. Так как макет выполняется как во время разработки, так и во время выполнения, он может динамически изменяться при изменении среды приложения. Это дает элементам управления на панели возможность изменять размер пропорционально, чтобы они могли реагировать на изменения, такие как изменение размера родительского элемента управления или изменение длины текста из-за локализации.

Любой элемент управления Windows Forms может быть дочерним элементом элемента управления TableLayoutPanel, включая другие экземпляры TableLayoutPanel. Это позволяет создавать сложные макеты, динамически меняющиеся во время выполнения.

Также можно управлять направлением расширения элемента управления TableLayoutPanel (горизонтальное или вертикальное) после его заполнения дочерними элементами управления. По умолчанию элемент управления TableLayoutPanel развертывается вниз путем добавления строк.

Вы можете управлять размером и стилем строк и столбцов с помощью RowStyles свойств и ColumnStyles свойств. Свойства строк и столбцов можно задавать по отдельности.

Элемент управления TableLayoutPanel добавляет следующие свойства в свои дочерние элементы управления: Cell, Column, Row, ColumnSpan и RowSpan.

На приведенном выше изображении есть таблица со свойством CellBorderStyle, установленным для демонстрации границ каждой ячейки.

Контейнер: Деление контейнера

Элемент управления Windows Forms SplitContainer можно рассматривать как составной элемент управления: две панели, разделенные перемещаемой полосой. Когда указатель мыши находится на панели, указатель изменяет фигуру, чтобы показать, что полоса перемещается.

С помощью элемента управления SplitContainer можно создавать сложные пользовательские интерфейсы; часто выбор на одной панели определяет, какие объекты отображаются на другой панели. Это соглашение действует для отображения и просмотра сведений. Наличие двух панелей позволяет объединять информацию в областях, а полоса или «разделитель» упрощают пользователям изменение размеров этих панелей.

На изображении выше есть разделенный контейнер для создания левой и правой панели. В правой области находится второй разделённый контейнер, в котором Orientation установлен на Vertical. Свойство BorderStyle устанавливается для демонстрации границ каждой панели.

Контейнер: элемент управления вкладками

Отображает TabControl несколько вкладок, например разделители в записной книжке или ярлыки в наборе папок в картотеке. Вкладки могут содержать рисунки и другие элементы управления. Используйте элемент управления tab, чтобы создать диалоговое окно с несколькими страницами, которое отображается во многих местах в операционной системе Windows, таких как панель управления и свойства отображения. Кроме того, TabControl можно использовать для создания страниц свойств, которые используются для задания группы связанных свойств.

Наиболее важным свойством TabControl является TabPages, которая содержит отдельные вкладки. Каждая отдельная вкладка — это объект TabPage.