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

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

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

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

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

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

  • Упорядочивание элементов управления по горизонтали и по вертикали

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

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

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

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

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

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

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

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

Note

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

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

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

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

  1. Создайте проект приложения на основе Windows с именем «FlowLayoutPanelExample» (файл > New > проекта > Visual C# или Visual Basic > классический рабочий стол > Windows Forms Application).

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

Упорядочивание элементов управления по горизонтали и по вертикали

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

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

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

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

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

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

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

  5. Измените значение свойства FlowLayoutPanel элемента управления WrapContents на false. Обратите внимание, что дочерние элементы управления больше не помещаются в следующую строку. Вместо этого они перемещаются в первую строку и обрезаются.

  6. Измените значение свойства FlowLayoutPanel элемента управления WrapContents на true. Обратите внимание, что дочерние элементы управления снова переносятся в следующую строку.

  7. Уменьшите ширину элемента управления FlowLayoutPanel , пока все элементы управления Button не переместятся в первый столбец.

  8. Увеличьте ширину элемента управления FlowLayoutPanel , пока все элементы управления Button не переместятся в первую строку. Может потребоваться изменить размер формы, чтобы она вмещала большую ширину.

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

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

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

  1. Измените значение свойства FlowLayoutPanel элемента управления FlowDirection на TopDown. Обратите внимание, что дочерние элементы управления перестраиваются в один или несколько столбцов, в зависимости от высоты данного элемента управления.

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

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

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

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

  1. Измените значение свойства FlowLayoutPanel элемента управления FlowDirection на TopDown.

  2. Выберите один из элементов управления Button в середине самого левого столбца.

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

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

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

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

  1. Увеличивайте размер FlowLayoutPanel , пока все элементы управления Button не будут расположены в столбце.

  2. Выберите верхний элемент управления Button . Увеличьте его ширину, чтобы он стал примерно вдвое шире других элементов управления Button .

  3. Выберите второй элемент управления Button . Измените значение его свойства Anchor на Right. Обратите внимание, что он перемещается так, чтобы его правая граница выровнялась с правой границей первого элемента управления Button .

  4. Измените значение его свойства Anchor на Right и Left. Обратите внимание, что он принимает ту же ширину, что и первый элемент управления Button .

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

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

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

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

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

Размещение элементов управления с помощью свойств Padding и Margin

  1. Измените значение свойства FlowLayoutPanel элемента управления Dock на Fill. Если ваша форма достаточно большая, элементы управления Button будут перемещены в первый столбец элемента управления FlowLayoutPanel .

  2. Измените значение свойства FlowLayoutPanel элемента управления Padding , развернув запись Padding в окне Свойства и установив для свойства All значение 20. Дополнительные сведения см. в разделе Пошаговое руководство: Размещение Windows Forms элементы управления с помощью свойств Padding, Margins и свойство AutoSize. Обратите внимание, что дочерние элементы управления перемещаются к центру элемента управления FlowLayoutPanel . Увеличенное значение свойства Padding отодвигает дочерние элементы управления от границ элемента управления FlowLayoutPanel .

  3. Выберите все элементы управления Button в FlowLayoutPanel и задайте в свойстве Margin значение 20. Обратите внимание, что расстояние между элементами управления Button увеличивается, поэтому они раздвигаются. Может потребоваться изменить размер элемента управления FlowLayoutPanel , чтобы увидеть все дочерние элементы управления.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. Перетащите три элемента управления Button с панели элементов в форму. Расположите их рядом друг с другом, но не выравнивайте.

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

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

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

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

  6. Отпустите кнопку мыши. Теперь эти три элемента управления Button вставлены в элемент управления FlowLayoutPanel .

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

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

  • Увеличьте размер элемента управления Button и отметьте, как это отразится на макете.

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

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

  • Задайте для свойства Visible одного из элементов управления значение false и обратите внимание, как в ответ перестраивается FlowLayoutPanel .

См. также