Пошаговое руководство. Создание структуры элементов управления Windows Forms с помощью свойств "Padding", "Margins" и "AutoSize"

Статья
11/05/2008

Обновлен: Ноябрь 2007

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

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

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

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

Поля и заполнение для элементов управления Windows Forms

Свойство AutoSize включает автоматическое изменение размера элемента в соответствии с его содержимым. Размер не будет установлен меньше исходного значения свойства Size, а также будет учтено значение свойства Padding.

В этом пошаговом руководстве рассматриваются следующие задачи:

создание проекта типа Windows Forms;
установка полей элементов управления;
установка заполнения элементов управления;
автоматическое определение размеров элементов управления.

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

Примечание.
Отображаемые диалоговые окна и команды меню могут отличаться от описанных в справке в зависимости от текущих параметров или выпуска среды. Для изменения параметров выберите Параметры импорта и экспорта в меню Сервис. Дополнительные сведения см. в разделе Параметры Visual Studio.

Отображаемые диалоговые окна и команды меню могут отличаться от описанных в справке в зависимости от текущих параметров или выпуска среды. Для изменения параметров выберите Параметры импорта и экспорта в меню Сервис. Дополнительные сведения см. в разделе Параметры Visual Studio.

Обязательные компоненты

Для выполнения этого пошагового руководства потребуется:

разрешения, необходимые для создания и выполнения проектов приложений Windows Forms на компьютере, на котором установлена Visual Studio.

Создание проекта

Для начала следует создать проект и подготовить форму.

Чтобы создать проект

Создайте проект Приложение Windows с именем LayoutExample. Дополнительные сведения см. в разделе Практическое руководство. Создание проекта приложения Windows.
В конструкторе Windows Forms выберите форму.

Установка полей элементов управления

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

Чтобы расположить элементы управления на форме с помощью свойства "Margin"

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

Обратите внимание на линию привязки, которая появится между ними. Это расстояние определяется суммой значений свойства Margin двух элементов управления. Перемещаемый элемент управления будет привязан к этому расстоянию. Дополнительные сведения см. в разделе Пример. Упорядочение элементов управления в формах Windows Forms с помощью линий привязки.
Измените свойство Margin одного из элементов управления, развернув пункт Margin в окне Свойства, и установив значение свойства All равным 20.
Выберите один из элементов управления Button и приблизьте его к другому.

Линия привязки, определяющая сумму значений полей, длиннее. И элемент управления привязывается на большем расстоянии от другого элемента управления.
Измените свойство Margin выбранного элемента управления, развернув пункт Margin в окне Свойства, и установив значение свойства Top равным 5.
Переместите выбранный элемент управления под другой элемент управления и обратите внимание на то, что линия привязки будет короче. Переместите выбранный элемент управления слева от другого элемента управления и обратите внимание на то, что линия привязки будет такой же, как на этапе 4.
Можно установить разные значения для каждого из параметров свойства Margin — Left, Top, Right, Bottom — или можно установить единое значение для всех этих параметров с помощью свойства All.

Установка заполнения элементов управления

Для создания точного макета в соответствии с требованиями приложения элементы управления часто содержат дочерние элементы управления. При необходимости определить расстояние между границами дочернего и родительского элемента управления используйте свойство Padding родительского элемента управления в сочетании со свойством Margin дочернего элемента управления. Свойство Padding также используется для управления расстоянием между содержимым элемента управления (например свойством Text элемента управления Button) и его границами.

Чтобы расположить элементы управления на форме с помощью свойства "Padding"

Перетащите элемент управления Button из панели элементов в форму.
Измените значение свойства AutoSize элемента управления Button на true.
Измените свойство Padding, развернув пункт Padding в окне Свойства, и установив значение свойства All равным 5.

Элемент управления расширится, чтобы обеспечить необходимое пространство для новых внутренних полей.
Перетащите элемент управления GroupBox из панели элементов в форму. Перетащите элемент управления Button из панели элементов в элемент управления GroupBox. Расположите элемент управления Button, совместив его с нижним правым углом элемента управления GroupBox.

Обратите внимание на линию привязки, которая появится при приближении элемента управления Button к нижней и правой границе элемента управления GroupBox. Эти линии привязки соответствуют свойству Margin элемента управления Button.
Измените свойство Padding элемента управления GroupBox, развернув пункт Padding в окне Свойства и установив значение свойства All равным 20.
Выберите элемент управления Button внутри элемента управления GroupBox и переместите его к центру GroupBox.

Линии привязки появятся на большем расстоянии от границ элемента управления GroupBox. Это расстояние определяется суммой значений свойства Margin элемента управления Button и свойства Padding элемента управления GroupBox.

Автоматическое определение размеров элементов управления

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

Когда свойству AutoSize присвоено значение true, размер элемента управления изменяется автоматически в соответствии с его содержимым. Дополнительные сведения см. в разделе Свойство AutoSize.

Чтобы расположить элементы управления на форме с помощью свойства AutoSize

Перетащите элемент управления Button из панели элементов в форму.
Измените значение свойства AutoSize элемента управления Button на true.
Измените свойство Text элемента управления Button на "Эта кнопка содержит длинную строку для свойства Text".

После внесения изменений размер элемента управления Button будет изменен автоматически в соответствии с новым текстом.
Перетащите еще один элемент управления Button из панели элементов в форму.
Измените свойство Text элемента управления Button на "Эта кнопка содержит длинную строку для свойства Text".

После применения изменения размер элемента управления Button не будет изменен автоматически, текст будет обрезан правой границе элемента управления.
Измените свойство Padding, развернув пункт Padding в окне Свойства, и установив значение свойства All равным 5.

Текст внутри элемента управления обрезается со всех четырех сторон.
Измените свойство AutoSize элемента управления Button на true.

Размер элемента управления Button изменяется автоматически, чтобы помещалась вся строка. Кроме того, добавлены внутренние границы вокруг текста, за счет чего элемент управления Button увеличился во всех четырех направлениях.
Перетащите элемент управления Button из панели элементов в форму. Расположите его рядом с нижним правым углом формы.
Измените значение свойства AutoSize элемента управления Button на true.
Присвойте свойству Anchor элемента управления Button значение Right, Bottom.
Измените свойство Text элемента управления Button на "Эта кнопка содержит длинную строку для свойства Text".

После применения изменения размер элемента управления Button будет изменен автоматически влево. Вообще, при автоматическом определении размеров увеличение размера элемента управления происходит в направлении, противоположном установке Anchor.

Свойства AutoSize и AutoSizeMode

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

Чтобы использовать свойство AutoSizeMode

Перетащите элемент управления Panel из панели элементов в форму.
Присвойте свойству AutoSize элемента управления Panel значение true.
Перетащите элемент управления Button из панели элементов в элемент управления Panel.
Расположите элемент управления Button рядом с нижним правым углом элемента управления Panel.

Выберите элемент управления Panel и возьмитесь за нижний правый маркер изменения размера. Попробуйте увеличить и уменьшить размер элемента управления Panel.

Примечание.
Размер элемента управления Panel можно изменять свободно, но размер нельзя установить меньше положения нижнего правого угла элемента управления Button. Такое поведение определяется значением свойства AutoSizeMode по умолчанию — GrowOnly.

Размер элемента управления Panel можно изменять свободно, но размер нельзя установить меньше положения нижнего правого угла элемента управления Button. Такое поведение определяется значением свойства AutoSizeMode по умолчанию — GrowOnly.

Присвойте свойству AutoSizeMode элемента управления Panel значение GrowAndShrink.

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

Размер элемента управления Panel изменится в соответствии с новым положением элемента управления Button.

Следующие действия

Для упорядочивания элементов управления приложений Windows Forms есть также много других возможностей форматирования. Ниже приведено несколько комбинаций, которые можно попробовать.

Постройте форму с помощью элемента управленияTableLayoutPanel control. Дополнительные сведения см. в разделе Пошаговое руководство. Упорядочение элементов управления в формах Windows Forms с помощью элемента TableLayoutPanel. Попробуйте изменить значения свойства Padding элемента управления TableLayoutPanel, а также свойства Margin дочерних элементов управления.
Попробуйте выполнить тот же эксперимент с помощью элемента управления FlowLayoutPanel. Дополнительные сведения см. в разделе Пример. Упорядочение элементов управления в формах Windows Forms с помощью элемента FlowLayoutPanel.
Поэкспериментируйте с закреплением дочерних элементов управления в элементе управления Panel. Свойство Padding является более общей реализацией свойства DockPadding. Вы можете убедиться в этом, поместив дочерний элемент управления в элемент управления Panel и присвоив свойству Dock дочернего элемента управления свойство Fill. Присвойте свойству Padding элемента управления Panel различные значения и обратите внимание на производимый изменениями эффект.

См. также

Поделиться через