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

Статья
11/05/2008

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Элемент управления FlowLayoutPanel может изменять размер или направление дочерних элементов управления при изменении размеров родительской формы.

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

Перетащите элемент управления FlowLayoutPanel с панели элементов на форму.
Перетащите элемент управления Button с панели элементов на элемент управления FlowLayoutPanel. Обратите внимание, что он автоматически перемещается в левый верхний угол элемента управления FlowLayoutPanel.
Перетащите другой элемент управления Button с панели элементов на элемент управления FlowLayoutPanel. Обратите внимание, что элемент управления Button автоматически перемещается в положение рядом с первым элементом управления Button. Если элемент FlowLayoutPanel слишком узок для размещения двух элементов управления в одном ряду, новый элемент управления Button автоматически переносится в следующую строку.
Перетащите еще несколько элементов управления Button из панели элементов в элемент FlowLayoutPanel. Продолжайте размещать элементы управления Button до того момента, пока следующий элемент не переместится в следующую строку.
Измените значение свойства WrapContents элемента управления FlowLayoutPanel на false. Обратите внимание, что дочерние элементы управления больше не переходят в следующую строку. Вместо этого они перемещаются в первую строку и обрезаются.
Измените значение свойства WrapContents элемента управления FlowLayoutPanel на true. Обратите внимание, что дочерние элементы управления опять начинают переходить в следующую строку.
Уменьшайте ширину элемента управления FlowLayoutPanel, пока все элементы управления Button не переместятся в первый столбец.
Увеличивайте ширину элемента управления FlowLayoutPanel, пока все элементы управления Button не переместятся в первую строку. Для увеличения ширины может потребоваться изменить размер формы.

Изменение направления потока

Свойство FlowDirection позволяет изменить направление расположения элементов управления. Можно расположить дочерние элементы управления слева направо, справа налево, сверху вниз и снизу вверх.

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

Измените значение свойства FlowDirection элемента управления FlowLayoutPanel на TopDown. Обратите внимание, что дочерние элементы управления располагаются в один или несколько столбцов в зависимости от высоты элемента управления.
Измените размер FlowLayoutPanel, чтобы его высота стала меньше, чем столбец элементов управления Button. Обратите внимание, что FlowLayoutPanel меняет расположение дочерних элементов управления и перемещает их в следующий столбец. Продолжайте уменьшать высоту и пронаблюдайте, как дочерние элементы управления перемещаются в последующие столбцы. Измените значение свойства FlowDirection элемента управления FlowLayoutPanel на RightToLeft. Обратите внимание, что дочерние элементы управления выстраиваются в обратном порядке. Посмотрите на макет при изменении значения свойства FlowDirection на BottomUp.

Вставка разрыва потока

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

Чтобы вставить разрыв потока

Измените значение свойства FlowDirection элемента управления FlowLayoutPanel на TopDown.
Выберите один из элементов управления Button в середине самого левого столбца.
Задайте для свойства FlowBreak элемента управления Button значение true. Обратите внимание, что столбец разрывается, а элементы управления, следующие за выбранным элементом управления Button, переходят в следующий столбец. Задайте для свойства FlowBreak элемента управления Button значение false для возврата к предыдущему способу расположения элементов.

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

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

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

Увеличивайте размер FlowLayoutPanel, пока все элементы управления Button не выстроятся в столбец.
Выберите верхний элемент управления Button. Увеличьте его ширину, чтобы он стал примерно в два раза шире других элементов управления Button.
Выберите второй элемент управления Button. Измените значение его свойства Anchor на Right. Обратите внимание, что он перемещается таким образом, что его правая граница выравнивается по правой границе первого элемента управления Button.
Измените значение его свойства Anchor на Right и Left. Обратите внимание, что его ширина увеличивается до ширины первого элемента управления Button.
Выберите третий элемент управления Button. Измените значение его свойства Dock на Fill. Обратите внимание, что его ширина увеличивается до ширины первого элемента управления Button.

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

Можно также расположить элементы управления в элементе управления FlowLayoutPanel, изменив свойства Padding и Margin.

Свойство Padding позволяет контролировать расположение элементов управления внутри ячейки элемента управления FlowLayoutPanel. Оно задает расстояние между дочерними элементами управления и границей элемента управления FlowLayoutPanel.

Свойство Margin позволяет контролировать расстояние между элементами управления.

Чтобы расположить элементы управления, используя свойства "Padding" и "Margin"

Измените значение свойства Dock элемента управления FlowLayoutPanel на Fill. Если форма достаточно велика, элементы управления Button перемещаются в первый столбец элемента управления FlowLayoutPanel.
Измените значение свойства Padding элемента управления FlowLayoutPanel, развернув пункт Padding в окне Свойства и указав для свойства All значение 10. Дополнительные сведения см. в разделе Пошаговое руководство. Создание структуры элементов управления Windows Forms с помощью свойств "Padding", "Margins" и "AutoSize". Обратите внимание, что дочерние элементы управления перемещаются к центру элемента управления FlowLayoutPanel. При увеличении значения свойства Padding дочерние элементы управления отодвигаются от границ элемента управления FlowLayoutPanel.
Выберите все элементы управления Button в FlowLayoutPanel и укажите для свойства Margin значение 20. Обратите внимание на увеличение расстояния между элементами управления Button, поэтому они раздвигаются. Для просмотра всех дочерних элементов управления может потребоваться изменить размер элемента управления FlowLayoutPanel.

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

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

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

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

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

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

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

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

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

Можно вставлять элементы управления в определенное положением в элементе управления FlowLayoutPanel. При перемещении элемента управления в клиентскую область элемента управления FlowLayoutPanel, появляется полоса вставки, указывающая место, в которое будет вставлен элемент управления.

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

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

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

Можно назначать существующие в форме элементы управления новому элементу управления FlowLayoutPanel.

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

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

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

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

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

См. также

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