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

Пошаговое руководство: Размещение элементов управления с отступами, полями и свойством AutoSize

  • Статья

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

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

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

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

Внутренние и внешние отступы для элементов управления Windows Forms

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

Необходимые условия

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

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

  1. В Visual Studio создайте проект приложения Windows с именем .

  2. Выберите форму в конструкторе Windows Forms.

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

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

Разместите элементы управления на вашей форме с помощью свойства Margin

  1. Перетащите два элемента управления Button из панели элементов в форму.

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

    Обратите внимание на линию привязки, которая отображается между ними. Это расстояние — это сумма значений Margin двух элементов управления. Элемент управления, который вы перемещаете, автоматически выравнивается на это расстояние. Для подробностей см. в пошаговом руководстве: Упорядочивание элементов управления в Windows Forms с помощью направляющих линий.

  3. Измените свойство Margin одного из элементов управления, развернув вложение Margin в окне , свойств и установив свойству All значение 20.

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

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

  5. Измените свойство Margin выбранного элемента управления, развернув запись Margin в окне свойств и присвойте свойству Top значение 5.

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

  7. Вы можете задать каждый из аспектов свойства Margin, Left, Top, Right, Bottom, для разных значений или задать их одинаковое значение со свойством All.

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

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

Расположите элементы управления на форме с использованием отступов

  1. Перетащите элемент управления Button из панели элементов на форму.

  2. Измените значение свойства AutoSize элемента управления Button на true.

  3. Измените свойство Padding, разверните запись Padding в в окне свойств и присвойте свойству All значение 5.

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

  4. Перетащите элемент управления GroupBox из панели инструментов на форму. Перетащите элемент управления Button из панели элементов в элемент управления GroupBox. Поместите элемент управления Button таким образом, чтобы он был смыт с правым нижним углом элемента управления GroupBox.

    Обратите внимание на линии оснастки, которые появляются, когда элемент управления Button приближается к нижней и правой границам элемента управления GroupBox. Эти линии привязки соответствуют свойству Margin для Button.

  5. Измените свойство Padding элемента управления GroupBox, разверните запись Padding в окне свойств свойства и присвойв свойству All значение 20.

  6. Выберите элемент управления Button в элементе управления GroupBox и переместите его ближе к центру GroupBox.

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

Регулировка размера выполняется автоматически.

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

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

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

  1. Перетащите элемент управления Button с панели инструментов на вашу форму.

  2. Измените значение свойства AutoSize элемента управления Button на true.

  3. Измените свойство Text у элемента управления Button на . Эта кнопка имеет длинную строку для свойства Text.

    При фиксации изменения элемент управления Button изменяет размер в соответствии с новым текстом.

  4. Перетащите еще один элемент управления Button из панели инструментов на вашу форму.

  5. Измените свойство Text элемента управления Button на "Эта кнопка имеет длинную строку для свойства Text."

    При выполнении изменения элемент управления Button не изменяет свой размер, и текст обрезается его правым краем.

  6. Измените свойство Padding, разверните запись Paddingв окне свойств и присвойв свойству All значение 5.

    Текст внутри элемента управления обрезается со всех четырёх сторон.

  7. Измените свойство AutoSize элемента управления Button на true.

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

  8. Перетащите элемент управления Button из панели элементов в вашу форму. Поместите его в правый нижний угол формы.

  9. Измените значение свойства AutoSize элемента управления Button на true.

  10. Задайте для свойства Anchor элемента управления Button значение Right, Bottom.

  11. Измените свойство Text элемента управления Button на "Эта кнопка имеет длинную строку для свойства Text."

Когда вы фиксируете изменение, элемент управления Button изменяет свой размер, смещаясь влево. Как правило, автоматическое изменение размера увеличивает размер элемента управления в направлении, противоположном параметру свойства Anchor.

Свойства AutoSize и AutoSizeMode

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

Используйте свойство AutoSizeMode

  1. Перетащите элемент управления Panel из панели инструментов на форму.

  2. Задайте значение свойства AutoSize элемента управления Panel равным true .

  3. Перетащите элемент управления Button из панели инструментов в элемент управления Panel.

  4. Поместите элемент управления Button в правый нижний угол элемента управления Panel.

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

    Заметка

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

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

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

  7. Перетащите элемент управления Button к левому верхнему углу элемента управления Panel.

    Элемент управления Panel изменяет размер в соответствии с новой позицией элемента управления Button.

Дальнейшие действия

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

См. также