Пример. Упорядочение элементов управления в формах Windows Forms с помощью линий привязки
Обновлен: Ноябрь 2007
Точное расположение элементов управления на форме является важным для многих приложений. Конструктор Windows Forms предоставляет широкий набор параметров макета, позволяющих выполнить эту задачу. Одним из наиболее важных методов является возможность SnapLine.
Линии привязки точно показывают, как выровнять элементы управления по отношению к другим элементам управления. Они также показывают рекомендуемое расстояние между элементами управления в соответствии с рекомендациями по пользовательскому интерфейсу Windows. Подробнее см. на странице Проектирование и разработка пользовательского интерфейса.
Линии привязки облегчают процесс выравнивания элементов управления и позволяют добиться идеального профессионального внешнего вида и поведения интерфейса.
В этом пошаговом руководстве, в частности, рассматриваются следующие задачи:
Создание проекта Windows Forms
Задание расстояния между элементами управления и их выравнивание с использованием линий привязки
Выравнивание по полям формы и контейнера
Выравнивание по сгруппированным элементам управления
Использование линий привязки для размещения элемента управления, обрисовывая его контур
Использование линий привязки при перетаскивании элемента управления из панели элементов
Изменение размера элементов управление с использованием линий привязки
Выравнивание метки по тексту элемента управления
Использование линий привязки при работе с клавиатурой
Панели линий привязки и макета
Отключение линий привязки
Работа с этим примером позволяет составить представление о той роли, которую играют линии привязки при создании макета.
.gif "Примечание") Примечание. |
|---|
Отображаемые диалоговые окна и команды меню могут отличаться от описанных в справке в зависимости от текущих параметров или выпуска среды. Для изменения настроек выберите Параметры импорта и экспорта в меню Сервис. Дополнительные сведения см. в разделе Параметры Visual Studio. |
Создание проекта
Для начала следует создать проект и подготовить форму.
Чтобы создать проект
Создайте проект приложения на базе Windows и назовите его "SnaplineExample". Дополнительные сведения см. в разделе Практическое руководство. Создание проекта приложения Windows.
Откройте форму в конструкторе форм.
Задание расстояния между элементами управления и их выравнивание с использованием линий привязки
Линии привязки позволяют точно и легко выровнять элементы управления в форме. Они отображаются при помещении выбранного элемента управления или элементов управления рядом с положением, где они будут выравниваться по другому элементу управления или набору элементов управления. Выбранные элементы управления "привязываются" к предлагаемому положению при перемещении их мимо других элементов управления.
Чтобы расположить элементы управления, используя линии привязки
Перетащите элемент управления Button с панели элементов на форму.
Переместите элемент управления Button в правый нижний угол формы. Обратите внимание на линии привязки, отображающиеся при приближении элемента управления Button к нижней и правой границе формы. Эти линии привязки показывают рекомендованное расстояние между границами элемента управления и формы.
Переместите элемент управления Button вдоль границ формы и обратите внимание, в каких местах появляются линии привязки. По завершении этой процедуры переместите элемент управления Button ближе к центру формы.
Перетащите еще один элемент управления Button с панели элементов на форму.
Перемещайте второй элемент управления Button, чтобы он оказался почти на том же уровне, что и первый. Обратите внимание на линии привязки, появляющиеся вдоль базовой линии текста обеих кнопок. Обратите внимание, что перемещаемый элемент управления привязывается к положению, которое находится точно на том же уровне, что и другой элемент управления.
Перемещайте второй элемент управления Button, чтобы он оказался непосредственно над первым. Обратите внимание на линии привязки, появляющиеся вдоль левого и правого краев обеих кнопок. Обратите внимание, что перемещаемый элемент управления привязывается к положению, точно выровненному по отношению к другому элементу управления.
Выберите один из элементов управления Button и приблизьте его к другому почти до касания. Обратите внимание на линию привязки, которая появляется между ними. Это рекомендуемое расстояние между границами элементов управления. Также обратите внимание, что перемещаемый элемент управления привязывается к этому положению.
Перетащите два элемента управления Panel с панели элементов на форму.
Перемещайте один из элементов управления Panel, чтобы он оказался почти на том же уровне, что и первый. Обратите внимание на линии привязки, появляющиеся вдоль верхнего и нижнего краев обоих элементов управления. Обратите внимание, что перемещаемый элемент управления привязывается к положению, расположенному точно на том же уровне, что и другой элемент управления.
Выравнивание по полям формы и контейнера
Линии привязки позволяют единообразно выровнять элементы управления вдоль полей формы и контейнера.
Чтобы выровнять элементы управления по полям формы и контейнера
- Выберите один из элементов управления Button и перемещайте его ближе к правой границе формы до появления линии привязки. Расстояние от линии привязки до правой границы - это сумма значений свойства Margin элемента управления и свойства Padding формы.
| Примечание. |
|---|
Если в качестве значения свойства Padding формы указано 0,0,0,0, конструктор Windows Forms Designer присваивает форме скрытое значение Padding, равное 9,9,9,9. Чтобы переопределить это поведение присвойте значение, отличное от 0,0,0,0. |
Измените значение свойства Margin элемента управления Button, развернув запись Margin в окне Свойства и указав для свойства All значение 0. Подробнее см. в разделе Пошаговое руководство. Создание структуры элементов управления Windows Forms с помощью свойств "Padding", "Margins" и "AutoSize".
Перемещайте элемент управления Button ближе к правой границе формы до появления линии привязки. Это расстояние теперь определяется значением свойства Padding формы.
Перетащите элемент управления GroupBox с панели элементов на форму.
Измените значение свойства Padding элемента управления GroupBox, развернув пункт Padding в окне Свойства и установив значение свойства All равным 10.
Перетащите элемент управления Button с панели элементов на элемент управления GroupBox.
Перемещайте элемент управления Button ближе к правой границе элемента управления GroupBox до появления линии привязки. Переместите элемент управления Button внутрь элемента управления GroupBox и обратите внимание, в каких местах появляются линии привязки.
Выравнивание по сгруппированным элементам управления
Можно использовать линии привязки для выравнивания сгруппированных элементов управления, а также элементов управления внутри элемента управления GroupBox.
Чтобы выровнять по сгруппированным элементам управления
Выберите два элемента управления в форме. Перемещайте выбранные элементы управления и обратите внимание на линии привязки, появляющиеся между выбранными элементами и остальными элементами управления.
Перетащите элемент управления GroupBox с панели элементов на форму.
Перетащите элемент управления Button с панели элементов на элемент управления GroupBox.
Выберите один из элементов управления Button и перемещайте его вокруг элемента управления GroupBox. Обратите внимание на линии привязки, появляющиеся на краях элемента управления GroupBox. Также обратите внимание на линии привязки, появляющиеся на краях элемента управления Button, находящегося внутри элемента управления GroupBox. Дочерние элементы управления, содержащиеся в контейнерном элементе управления, также поддерживают линии привязки.
Использование линий привязки для размещения элемента управления, обрисовывая его контур
Линии привязки позволяют выровнять элементы управления при их первом размещении в форме.
Чтобы использовать линии привязки для размещения элемента управления, обрисовывая его контур
На панели элементов щелкните значок элемента управления Button. Не перетаскивайте его в форму.
Наведите указатель мыши на поверхность разработки формы. Обратите внимание, что указатель превращается в перекрестие, к которому прикреплен значок элемента управления Button. Также обратите внимание на линии привязки, предлагающие положения выравнивания для элемента управления Button.
Нажмите и удерживайте кнопку мыши.
Перемещайте указатель мыши по форме. Обратите внимание, что при этом чертится контур, указывающий положение и размер элемента управления.
Перемещайте указатель до его выравнивания с другим элементом управления в форме. Обратите внимание, что появляется линия привязки, указывающая выравнивание.
Отпустите кнопку мыши. Создается элемент управления, место расположения и размер которого выбираются в соответствии с нарисованным контуром.
Использование линий привязки при перетаскивании элемента управления из панели элементов
Линии привязки позволяют выровнять элементы управления при перетаскивании их в панели элементов на форму.
Чтобы использовать линии привязки при перетаскивании элемента управления из панели элементов
Перетащите элемент управления Button из панели элементов на свою форму, но не отпускайте кнопку мыши.
Наведите указатель мыши на поверхность разработки формы. Обратите внимание, что указатель мыши меняется и указывает на положение, где создается новый элемент управления Button.
Перемещайте указатель мыши по форме. Обратите внимание на линии привязки, предлагающие положения выравнивания для элемента управления Button. Найдите положение, где элемент управления выровнен относительно других элементов.
Отпустите кнопку мыши. Создается элемент управления в месте, указанном линиями привязки.
Изменение размера элементов управление с использованием линий привязки
Линии привязки позволяют выравнивать элементы управления при изменении их размера.
Чтобы изменить размер элемента управления, используя линии привязки
Перетащите элемент управления Button с панели элементов на форму.
Измените размер элемента управления Button, перетаскивая один из маркеров изменения размера, расположенных по углам. Дополнительные сведения см. в разделе Практическое руководство. Изменение размера элементов управления в формах Windows Forms.
Перетаскивайте маркер изменения размера, пока одна из границ элемента управления Button не выравнивается с другим элементом управления. Обратите внимание на появление линии привязки. Также обратите внимание, что маркер изменения размера привязывается к положению, указанному линией привязки.
Измените размер элемента управления Button в другом направлении и выровняйте маркер изменения размера с другим элементом управления. Обратите внимание, что линии привязки появляются в разных направлениях, указывая на положение выравнивания.
Выравнивание метки по тексту элемента управления
В некоторых элементах управления используются линии привязки, позволяющие выровнять другие элементы управления по отношению к отображаемому тексту.
Чтобы выровнять метку по тексту элемента управления
Перетащите элемент управления TextBox из TextBox в свою форму. При отпускании элемента управления TextBox на форму щелкните глиф смарт-тега и выберите параметр Задать текст для textBox1. Дополнительные сведения см. в разделе Пошаговое руководство. Выполнение типичных задач с помощью смарт-тегов в элементах управления Windows Forms.
Измените значение свойства AutoSize элемента управления Label на true. Обратите внимание, что границы элемента управления меняются для соответствия отображаемому тексту.
Переместите элемент управления Labelв левую часть элемента управления TextBox, чтобы он выравнивался по нижнему краю элемента управления TextBox. Обратите внимание на линию выравнивания, появляющуюся вдоль нижних краев двух элементов управления.
Переместите элемент управления Labelнемного вверх до выравнивания текста Labelи текста TextBox. Обратите внимание на появление другой по стилю линии привязки, показывающей, когда текстовые поля обоих элементов управления выравниваются.
Использование линий привязки при работе с клавиатурой
Линии привязки позволяют выравнивать элементы управления при их расположении с использованием стрелок со стрелками на клавиатуре.
Чтобы использовать линии привязки при работе с клавиатурой
Перетащите элемент управления Button с панели элементов на форму. Поместите его в левый верхний угол формы.
Нажмите CTRL+стрелка вниз. Обратите внимание, что элемент управления перемещается вниз по форме до первого доступного положения выравнивания по горизонтали.
Нажимайте CTRL+стрелка вниз, пока элемент управления не достигнет нижнего края формы. Обратите внимание на положения, занимаемые им при перемещении вниз по форме.
Нажмите CTRL+стрелка вправо. Обратите внимание, что элемент управления перемещается через форму до первого доступного положения выравнивания по вертикали.
Нажимайте CTRL+стрелка вправо, пока элемент управления не достигнет границы формы. Обратите внимание на положения, занимаемые им при перемещении через форму.
Перемещайте элемент управления по форме, используя разные сочетания клавиш со стрелками. Обратите внимание на положения, занимаемые элементом управления, и соответствующие им линии привязки.
Нажимайте SHIFT и любую клавишу со стрелкой, чтобы изменить размер элемента управления Button на величину, равную одному пикселю.
Нажимайте CTRL+SHIFT и любую клавишу со стрелкой для изменения размера элемента управления Button на величину линий привязки.
Панели линий привязки и макета
Линии привязки отключаются внутри панели макета.
Чтобы выборочно отключить линии привязки
Перетащите элемент управления TableLayoutPanel из панели элементов в форму.
Дважды щелкните значок элемента управления Button на панели элементов. Обратите внимание на появление нового кнопочного элемента управления в первой ячейке элемента управления TableLayoutPanel.
Дважды щелкните значок элемента управления Button на панели элементов еще два раза. В результате в элементе управления TableLayoutPanel остается одна пустая ячейка.
Перетащите элемент управления Button из панели элементов в пустую ячейку элемента управления TableLayoutPanel. Обратите внимание, что линии привязки не появляются.
Вытащите элемент управления Button из элемента управления TableLayoutPanel и перемещайте его вокруг элемента управления TableLayoutPanel. Обратите внимание, что линии привязки опять появились.
Отключение линий привязки
По умолчанию линии привязки включены. Можно отключить линии привязки выборочно или во всей среде разработки.
Чтобы выборочно отключить линии привязки
Нажмите клавишу ALT и при перемещении элемента управления по форме:
обратите внимание, что линии привязки не появляются, а элемент управления не привязывается ни к одному из возможных положений выравнивания.
Чтобы отключить линии привязки в среде разработки
Из меню Сервис откройте диалоговое окно Параметры. Откройте диалоговое окно конструктора Windows Forms. Дополнительные сведения см. в разделе Без ограничений, конструктор Windows Forms, диалоговое окно параметров.
Выберите узел Общие. В разделе Режим макета измените выбор с Линии привязки на Привязка к сетке.
Щелкните "ОК", чтобы применить этот параметр.
Выберите элемент управления на своей форме и перемещайте его к другим элементам управления. Обратите внимание, что линии привязки не появляются.
Следующие действия
Линии привязки обеспечивают простой способ выравнивания элементов управления на форме. Можно попробовать также выполнить следующие действия.
Попытайтесь вложить элемент управления GroupBox в другой элемент управления GroupBox. Поместите элемент управления Button внутри дочернего элемента управления GroupBox, а другой элемент управления внутри родительского элемента управления GroupBox. Перемещайте элементы управления Button и изучите, как линии привязки пересекают границы контейнера.
Создайте столбец элементов управления TextBox и соответствующий столбец элементов управления Label. Присвойте свойству AutoSize элементов управления Labelзначение true. Используйте линии привязки для перемещения элементов управления Labelтаким образом, чтобы отображаемый текст выравнивался по тексту в элементах управления TextBox.
Сведения о создании пользовательского интерфейса Windows см. в книге Работа пользователей в ОС Microsoft Windows, официальные рекомендации для разработчиков и проектировщиков пользовательского интерфейса Redmond, WA: Microsoft Press, 1999. (USBN: 0-7356-0566-1) на веб-узле MSDN по адресу ().
См. также
Задачи
Пример. Упорядочение элементов управления в формах Windows Forms с помощью элемента FlowLayoutPanel