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

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

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

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

В данном пошаговом руководстве представлены следующие задачи.

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

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

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

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

  • С помощью линий привязки для размещения элемента управления, его размер структуры

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

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

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

  • С помощью линий привязки с помощью клавиатуры

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

  • Отключение линий привязки

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

Note

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

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

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

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

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

  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 значения свойств.
Note

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

  1. Измените значение свойства Button элемента управления Margin , развернув Margin запись в свойства и установив All значение 0. Дополнительные сведения см. в разделе Пошаговое руководство: Размещение Windows Forms элементы управления с помощью свойств Padding, Margins и свойство AutoSize.

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

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

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

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

  6. Переместить 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 параметр. Дополнительные сведения см. в разделе Пошаговое руководство: Выполнение типичных задач, с помощью смарт-тегов в Windows Forms элементы управления.

  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 в панели элементов. Обратите внимание, что отображается новый элемент управления button в TableLayoutPanel первой ячейке элемента управления.

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

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

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

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

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

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

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

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

Чтобы отключить линии привязки в среде разработки

  1. Из средства откройте в меню параметры диалоговое окно. Откройте диалоговое окно конструктора Windows Forms. Дополнительные сведения см. в разделе Общие, конструктор Windows Forms, диалоговое окно параметров.

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

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

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

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

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

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

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

Сведения о разработке пользовательского интерфейса Windows, см. в разделе книги взаимодействие с пользователем Microsoft Windows, официальные рекомендации для разработчиков пользовательских интерфейсов и конструкторы Редмонд, штат Вашингтон: Microsoft Press, 1999. (USBN: 0-7356-0566-1).

См. также