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

  • Статья

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

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

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

Элемент управления 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. Обратите внимание, что он перемещается так, чтобы его правая граница находилась рядом с правой границей ячейки. Расстояние между границами — это сумма свойства Margin элемента управления Button и свойства Padding панели.

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

  4. Повторите шаги 2 и 3 с использованием стилей Top и Bottom.

Задание свойств строк и столбцов

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

Задание свойств строк и столбцов

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

  2. В окнах свойств откройте ColumnStyles коллекцию, нажав кнопку с многоточием (The Ellipsis button (...) in the Properties window of 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 в родительской форме. Измените размер этой формы и обратите внимание, как это отражается на макете.

См. также