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

Статья
11/05/2008

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Чтобы расположить элементы управления по строкам и столбцам, используя TableLayoutPanel

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

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

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

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

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

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

Можно задать отдельные свойства строк и столбцов, используя коллекции RowStyles и ColumnStyles.

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

Выберите элемент управления TableLayoutPanel в Конструкторе Windows Forms.
В окне Свойства откройте коллекцию ColumnStyles, нажав кнопку ellipsis () рядом с записью Столбцы.
Выберите первый столбец и измените значение его свойства SizeType на AutoSize. Нажмите кнопку ОК, чтобы принять изменения. Обратите внимание, что ширина первого столбца меняется для соответствия элементу управления Button. Также обратите внимание, что ширину столбца менять нельзя.
В окне Свойства откройте коллекцию ColumnStyles и выберите первый столбец. Измените значение его свойства SizeType на Percent. Нажмите кнопку ОК, чтобы принять изменения. Увеличьте ширину элемента управления TableLayoutPanel и обратите внимание на увеличение ширины первого столбца. Уменьшите ширину элемента управления TableLayoutPanel и обратите внимание, что размер кнопок в первом столбце изменяется с учетом размера ячейки. Также обратите внимание, что можно менять ширину столбца.
В окне Свойства откройте коллекцию ColumnStyles и выберите все перечисленные столбцы. Присвойте свойству SizeType всех элементов управления значение Percent. Нажмите кнопку ОК, чтобы принять изменения. Повторите процедуру, используя коллекцию RowStyles.
Потяните за один из угловых маркеров изменения размера и измените ширину и высоту элемента управления TableLayoutPanel. Обратите внимание на изменение размеров строк и столбцов при изменении размера элемента управления TableLayoutPanel. Также обратите внимание, что можно менять размер строк и столбцов при помощи вертикальных и горизонтальных маркеров изменения размера.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Чтобы вставить элемент управления, обрисовывая его контур

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

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

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

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

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

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

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

Чтобы поменять местами элементы управления

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

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

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

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

См. также

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