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

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

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

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

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

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

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

Элементы управления "пробел" и "выровняйте"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Чтобы изменить размер элемента управления в шагах линии привязки, нажмите клавиши CTRL SHIFT стрелка вниз .

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

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

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

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

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

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

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

Нажмите клавишу ALT и при перемещении элемента управления вокруг формы.

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

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

Выберите узел Общие . В разделе режим макета измените выбор с линий привязки на SnapToGrid.

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

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

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

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

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

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