Пошаговое руководство. Упорядочение элементов управления в формах Windows Forms с помощью элемента TableLayoutPanel

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

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

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

TableLayoutPanel Упорядочивает свое содержимое в сетке, обеспечивая функциональные возможности, аналогичные HTML <таблицы > элемента. TableLayoutPanel Элемент управления позволяет размещать элементы управления в виде сетки без необходимости точного указания положения каждого отдельного элемента управления. Его ячейки организованы в строки и столбцы, и они могут быть разного размера. Ячейки могут быть объединены между строками и столбцами. Ячейки могут содержать что-либо формы может содержать и ведут себя во многих отношениях как контейнеры.

TableLayoutPanel Элемент управления также предоставляет возможность пропорционального изменения размера во время выполнения, то макет можно без проблем при изменении размера формы. Это делает TableLayoutPanel управления хорошо подходит для форм ввода данных и локализованных приложений. Дополнительные сведения см. в разделе Пошаговое руководство: Создание переменного размера Windows формы для ввода данных и Пошаговое руководство: Создание формы Windows локализуемые.

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

В данном пошаговом руководстве представлены следующие задачи.

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

  • Упорядочение элементов управления в строках и столбцах

  • Параметр строки и свойств столбца

  • Объединение строк и столбцов с элементом управления

  • Автоматическая обработка переполнения

  • Вставка элементов управления двойным щелчком по ним в панели элементов

  • Вставка элемента управления путем рисования его контура

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

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

Note

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

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

Первым шагом является создание проекта и настройка формы.

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

  1. Создайте проект приложения Windows с именем «TableLayoutPanelExample». Дополнительные сведения см. в разделе Как Создайте проект приложения Windows Forms .

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

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

TableLayoutPanel Элемент управления позволяет легко размещать элементы управления по строкам и столбцам.

Размещение элементов управления в строках и столбцах, с помощью элемента управления TableLayoutPanel

  1. Перетащите элемент управления TableLayoutPanel из панели элементов в свою форму. Обратите внимание, что по умолчанию TableLayoutPanel элемент управления имеет четыре ячейки.

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

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

  4. Захватите маркер изменения размера по вертикали между двумя столбцами и переместите его влево. Обратите внимание, что Button элементов управления в первом столбце изменяются уменьшите ширину, а размер Button элементов управления во втором столбце не изменяется.

  5. Захватите маркер изменения размера по вертикали между двумя столбцами и переместите ее вправо. Обратите внимание, что Button элементов управления в первом столбце вернуть их первоначальный размер, тогда как Button перемещении элементов управления во втором столбце справа.

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

Размещение элементов управления внутри ячеек с использованием закрепления и привязки

Функции привязки дочерних элементов управления в TableLayoutPanel отличается от поведения других контейнерных элементов управления. Закрепление дочерних элементов совпадает со значением других контейнерных элементов управления.

Размещение элементов управления в ячейках

  1. Выберите первую Button элемента управления. Измените значение его свойства Dock на Fill. Обратите внимание, что Button управления занимает свою ячейку.

  2. Выберите один из других Button элементов управления. Измените значение его свойства Anchor на Right. Обратите внимание на то, что он перемещается так, чтобы ее правую границу рядом с правой границы ячейки. Расстояние между границами представляет собой сумму Button элемента управления Margin свойство и панели Padding свойство.

  3. Измените значение свойства Button элемента управления Anchor свойства Right и Left. Обратите внимание, что элемент управления имеет размер по ширине ячейки с Margin и Padding значения, взятые в учетную запись.

  4. Повторите шаги 2 и 3 с Top и Bottom стили.

Параметр строки и свойств столбца

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

Чтобы задать свойства строк и столбцов

  1. Выберите TableLayoutPanel контролировать конструктор Windows Forms.

  2. В свойства открытых окон ColumnStyles коллекции, нажав кнопку с многоточием (экрана VisualStudioEllipsesButton) кнопку рядом с полем столбцы запись.

  3. Выберите первый столбец и измените значение его SizeType свойства AutoSize. Нажмите кнопку ОК чтобы принять изменение. Обратите внимание, что ширина первого столбца уменьшается в соответствии с Button элемента управления. Обратите внимание на то, что ширина столбца не является изменяемым размером.

  4. В свойства открытое окно ColumnStyles коллекции и выберите первый столбец. Измените значение его свойства SizeType на Percent. Нажмите кнопку ОК чтобы принять изменение. Изменение размера TableLayoutPanel управления на увеличение ширины и обратите внимание на то, что расширяет ширину первого столбца. Изменение размера TableLayoutPanel управления уменьшите ширину и обратите внимание на то, что кнопки в первом столбце подгоняются под размеры ячейки. Также Обратите внимание, что ширина столбца можно изменять.

  5. В свойства открытое окно ColumnStyles коллекции и выберите все перечисленные столбцы. Установите для параметра каждый SizeType свойства Percent. Нажмите кнопку ОК чтобы принять изменение. Повторите процедуру, используя RowStyles коллекции.

  6. Щелкните один из угловых маркеров изменения размера и изменить ширину и высоту TableLayoutPanel элемента управления. Обратите внимание, что строки и столбцы изменяются как TableLayoutPanel изменения размера элемента управления. Также Обратите внимание, что строк и столбцов можно изменять с горизонтальной и вертикальной маркеры изменения размера.

Объединение строк и столбцов с элементом управления

TableLayoutPanel Управления добавляет несколько новых свойств для элементов управления во время разработки. Два из этих свойств — RowSpan и ColumnSpan. Эти свойства можно использовать, чтобы сделать элемент управления диапазона больше, чем одну строку или столбец.

Чтобы объединение строк и столбцов с элементом управления

  1. Выберите Button элемента управления в первой строке и первом столбце.

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

  3. Повторите шаг 2 для RowSpan свойство.

Вставка элементов управления двойным щелчком по ним в панели элементов

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

Вставка элементов управления двойным щелчком по ним в панели элементов

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

  2. Дважды щелкните значок элемента управления Button в панели элементов. Обратите внимание, что отображается новый элемент управления button в TableLayoutPanel первой ячейке элемента управления.

  3. Дважды щелкните несколько других элементов управления в панели элементов. Обратите внимание, что новые элементы управления последовательно появляются в TableLayoutPanel пустых ячейках элемента управления. Также Обратите внимание, что TableLayoutPanel управления расширяется, чтобы вместить новые элементы управления, если доступны открытых ячеек.

Автоматическая обработка переполнения

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

Чтобы наблюдать автоматическую обработку переполнений

  1. Если по-прежнему пустые ячейки в TableLayoutPanel управления, по-прежнему вставки нового Button управляет до TableLayoutPanel заполнения элемента управления.

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

  3. Измените значение свойства TableLayoutPanel элемента управления GrowStyle на FixedSize. Дважды щелкните Button значок в элементов вставляемый Button управляет до TableLayoutPanel заполнения элемента управления. Дважды щелкните Button значок в элементов еще раз. Обратите внимание, что появляется сообщение об ошибке из конструктор Windows Forms информируют о том, что дополнительные строки и столбцы не могут создаваться.

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

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

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

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

  2. В панели элементовщелкните значок элемента управления Button . Не перетаскивайте его в форму.

  3. Наведите указатель мыши на элемент управления TableLayoutPanel . Обратите внимание, что указатель превратился в перекрестие с прикрепленным значком элемента управления Button .

  4. Нажмите и удерживайте кнопку мыши.

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

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

TableLayoutPanel Элемент управления может содержать только один дочерний элемент управления в ячейке.

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

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

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

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

Для замены элементов управления

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

Следующие шаги

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

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

  • Вставьте выделение нескольких элементов управления в TableLayoutPanel управления и обратите внимание на то, как вставляются элементы управления.

  • Панели макета могут содержать другие панели макета. Попробуйте вставить элемент управления TableLayoutPanel в существующий элемент управления.

  • Закрепите элемент управления TableLayoutPanel в родительской форме. Измените размер этой формы и обратите внимание, как это отражается на макете.

См. также