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

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

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

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

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

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

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

Задачи, показанные в этом пошаговом руководстве, включают:

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

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

  • Настройка свойств строк и столбцов

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

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

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

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

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

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

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

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

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

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

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

Расположение элементов управления в строках и столбцах

Элемент управления 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 коллекцию, нажав кнопку с многоточием (Кнопка с многоточием (...) в окно свойств Visual Studio.) рядом с записью "Столбцы".

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  2. Дважды щелкните значок элемента управления 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 из занятой ячейки и опустите его на другую занятую ячейку. Обратите внимание, что эти два элемента управления перемещаются из одной ячейки в другую.

Дальнейшие шаги

Используя сочетание панелей макета и элементов управления, можно создавать сложные макеты. Ниже приведены рекомендации для получения дополнительных возможностей для изучения:

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

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

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

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

См. также

  • Last updated on