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

Пошаговое руководство: Размещение элементов управления в Windows Forms с помощью линий привязки

  • Статья

Точное размещение элементов управления в форме является высоким приоритетом для многих приложений. Конструктор Windows Forms предоставляет множество средств макета для этого. Одной из наиболее важных функций является SnapLine.

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

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

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

  1. В Visual Studio создайте проект приложения на основе Windows с именем SnaplineExample.

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

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

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

Упорядочивание элементов управления с помощью вспомогательных линий

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

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

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

  4. Перетащите другой элемент управления Button из панели инструментов на форму.

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

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

  7. Выберите один из элементов управления Button и переместите его близко друг к другу, пока они почти не касаются. Обратите внимание на линию привязки, которая отображается между ними. Это расстояние — рекомендуемое расстояние между границами элементов управления. Также обратите внимание, что элемент управления привязывается к этой позиции при перемещении.

  8. Перетащите два элемента управления Panel из панели инструментов на форму.

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

Выровнять по полям формы и контейнера

Линии привязки помогают вам выравнивать элементы управления по краям и полям контейнеров согласованно.

  1. Выберите один из элементов управления Button и переместите его близко к правой границе формы, пока не появится линия привязки. Расстояние линии привязки от правой границы равно сумме значения свойства Margin элемента управления и значения свойства Padding формы.

    Заметка

    Если для свойства Padding формы задано значение 0,0,0,0, конструктор Windows Forms придаёт форме значение тени Padding как 9,9,9,9. Чтобы переопределить это поведение, назначьте значение, отличное от 0,0 0,0.

  2. Измените значение свойства Margin элемента управления Button, развернув запись Margin в окне свойств и присвойте свойству All значение 0. Дополнительные сведения см. в пошаговом руководстве по созданию элементов управления Windows Forms с заполнением, полями и свойством autoSize.

  3. Переместите элемент управления Button близко к правой границе формы, пока не появится линия привязки. Это расстояние теперь присваивается значением свойства Padding формы.

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

  5. Измените значение свойства Padding элемента управления GroupBox, развернув запись Padding в окне свойств и присвоив свойству All значение 10.

  6. Перетащите элемент управления Button из панели элементов в элемент управления GroupBox.

  7. Переместите элемент управления Button близко к правой границе элемента управления GroupBox, пока не появится линия привязки. Переместите элемент управления Button внутрь элемента управления GroupBox и отметьте, где отображаются линии привязки.

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

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

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

  2. Перетащите элемент управления GroupBox из панели инструментов на вашу форму.

  3. Перетащите элемент управления Button из панели инструментов в элемент управления GroupBox.

  4. Выберите один из элементов управления Button и переместите его вокруг элемента управления GroupBox. Обратите внимание на линии привязки, отображаемые на краях элемента управления GroupBox. Кроме того, обратите внимание на линии оснастки, которые появляются на краях элемента управления Button, который содержится в элементе управления GroupBox. Элементы управления, которые являются дочерними элементами элемента управления контейнера, также поддерживают линии привязки.

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

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

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

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

  4. Перетащите указатель мыши по форме. Обратите внимание, что контур рисуется, указывая положение и размер элемента управления.

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

  6. Отпустите кнопку мыши. Элемент управления создается в позиции и размере, указанных контуром.

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

  1. Перетащите элемент управления Button из панели элементов в форму, но не отпускайте кнопку мыши.

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

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

  4. Отпустите кнопку мыши. Элемент управления создается в позиции, указанной направляющими линиями.

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

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

  2. Измените размер элемента управления Button, схватив одну из угловых ручек и перетащив её. Дополнительные сведения см. в разделе Практическое руководство. Изменение размера элементов управления в Windows Forms.

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

  4. Измените размер элемента управления Button в различных направлениях и выровняйте ручку изменения размера с различными элементами управления. Обратите внимание, как линии привязки отображаются в различных ориентациях, чтобы указать выравнивание.

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

  1. Перетащите элемент управления TextBox из панели инструментов в вашу форму. При добавлении элемента управления TextBox на форму щелкните на значке смарт-тега и выберите опцию Установить текст в textBox1. Дополнительные сведения см. в пошаговом руководстве: выполнение распространенных задач с помощью действий конструктора.

  2. Перетащите элемент управления Label из панели инструментов на вашу форму.

  3. Измените значение свойства AutoSize элемента управления Label на true. Обратите внимание, что границы элемента управления корректируются в соответствии с отображаемым текстом.

  4. Переместите элемент управления Label слева от элемента управления TextBox, поэтому он выравнивается с нижним краем элемента управления TextBox. Заметьте привязочную линию, которая отображается вдоль нижних краев двух элементов управления.

  5. Переместите элемент управления Label немного вверх, пока текст Label и текст TextBox не будут выровнены. Обратите внимание на линию привязки с другим стилем, указывающую, когда выровнены текстовые поля обоих элементов управления.

Использование линий привязки с навигацией по клавиатуре

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

  2. Нажмите клавишу CTRL+СТРЕЛКА ВНИЗ. Обратите внимание, что элемент управления перемещается вниз по форме в первую доступную позицию горизонтального выравнивания.

  3. Нажмите , затем удерживайте клавиши CTRL+и стрелку вниз, пока элемент управления не достигнет нижней части формы. Обратите внимание на позиции, которые элемент занимает по мере перемещения вниз по форме.

  4. Нажмите CTRL+стрелку вправо. Обратите внимание, что элемент управления перемещается по форме в первую доступную позицию вертикального выравнивания.

  5. Нажимайте Ctrl+стрелку вправо до тех пор, пока элемент управления не достигнет края формы. Обратите внимание на позиции, которые он занимает по мере перемещения по форме.

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

  7. Нажмите клавиши со стрелками SHIFT+, чтобы изменить размер элемента управления Button путем увеличения одного пикселя.

  8. Нажмите клавиши со стрелками CTRL+SHIFT+, чтобы изменить размер элемента управления Button в добавочных строках.

Выборочно отключать направляющие

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

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

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

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

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

Отключить линии привязки

Нажмите клавишу Alt, удерживая её, и перемещайте элемент управления по форме.

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

Отключение линий привязки в среде разработки

  1. В меню "Средства" откройте диалоговое окно "Параметры". Выберите Конструктор Windows Forms.

  2. Выберите узел общего . В разделе Layout Mode измените выбор с SnapLines на SnapToGrid.

  3. Нажмите кнопку ОК, чтобы применить этот параметр.

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

Дальнейшие действия

Магнитные направляющие предлагают интуитивно понятные средства выравнивания элементов управления на вашей форме. Ниже приведены рекомендации для получения дополнительных возможностей для изучения:

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

  • Создайте столбец элементов управления TextBox и соответствующий столбец элементов управления Label. Установите значение свойства AutoSize у элементов управления Label на true. Используйте направляющие линии для перемещения элементов управления Label, чтобы их текст был выровнен с текстом в элементах управления TextBox.

См. также