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

Практическое руководство. Упорядочение элементов управления в формах 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. Измените значение свойства Button элемента управления Margin, развернув запись Margin в окне Свойства и установив для свойства All значение 0. Дополнительные сведения см. в разделе Пошаговое руководство. Создание структуры элементов управления Windows Forms с помощью свойств Padding, Margins и AutoSize.

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

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

  5. Измените значение свойства GroupBox элемента управления Padding, развернув запись 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. Измените значение свойства Label элемента управления AutoSize на 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. Выберите узел Общие. В разделе Режим макета измените выбранный параметр с SnapLines на SnapToGrid.

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

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

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

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

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

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

См. также