Пошаговое руководство. Создание в Windows Forms формы для ввода данных переменного размера

Статья
08/11/2011

Форма с правильным изменением размеров может сделать более удобной работу с пользовательским интерфейсом.

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

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

Создание проекта
Создание области макета
Настройка сетки макета
Создание полей имени
Создание полей адреса
Создание полей номера телефона
Создание поля примечаний

По завершении работы форма будет выглядеть примерно так, как показано на рисунке:

Основная форма записи данных TableLayoutPanel

Чтобы скопировать весь текст кода из этого раздела перейдите по ссылке Практическое руководство. Создание в Windows Forms формы для ввода данных, размер которой можно изменять.

Примечание

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

Обязательные компоненты

Для выполнения этого пошагового руководства потребуется следующее.

разрешения, необходимые для создания и выполнения проектов приложений Windows Forms на компьютере, на котором установлена Visual Studio.

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

Для начала следует создать проект приложения. Этот проект используется для создания приложения с формой ввода данных.

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

Создайте проект "Приложение Windows" с именем DemoDataEntryLayout. Дополнительные сведения см. в разделе Практическое руководство. Создание проекта приложения Windows Forms.

Создание области макета

Следующим шагом будет создание области макета с макетом с изменяемыми размерами.

Чтобы создать область макета

Выберите форму в Конструкторе форм.
Перетащите элемент управления TableLayoutPanel из Панели элементов в форму.
В окне Свойства измените значение свойства Dock элемента управления TableLayoutPanel на Fill.
Измените значение свойства ColumnCount на 4, а значение свойства RowCount измените на 6.

Настройка сетки макета

Следующим шагом будет настройка сетки макета. Задайте свойства в коллекциях ColumnStyles и RowStyles для определения порядка изменения размеров столбцов и строк по мере изменения размеров формы.

Чтобы настроить сетку макета

Щелкните глиф смарт-тега для элемента управления TableLayoutPanel () и выберите команду Редактировать строки и столбцы, чтобы открыть диалоговое окно Стили столбцов и строк. Дополнительные сведения см. в разделе Практическое руководство. Изменение столбцов и строк в элементе управления TableLayoutPanel.
Выберите Столбцы из раскрывающегося списка Показать.
Выберите первый столбец и измените значение его свойства SizeType на Percent. Установите для элемента управления NumericUpDown Процент значение 25. В столбце будут содержаться элементы управления Label.
Выберите второй столбец. Измените значение его свойства SizeType на Percent. Установите для элемента управления NumericUpDown Процент значение 50. В столбце будут содержаться элементы управления TextBox для полей ввода данных.
Выберите третий столбец. Измените значение его свойства SizeType на Percent. Установите для элемента управления NumericUpDown Процент значение 25. В столбце будут содержаться элементы управления Label.
Выберите четвертый столбец. Измените значение его свойства SizeType на Percent. Установите для элемента управления NumericUpDown Процент значение 50. В столбце будут содержаться элементы управления TextBox для полей ввода данных.
Выберите Строки из раскрывающегося списка Показать.
Для первых пяти строк присвойте свойству SizeType значение Absolute, а элементу управления NumericUpDown Абсолютное — 28. Для шестой строки присвойте свойству SizeType значение Percent, а для элемента управления NumericUpDown Процент — 80.
Нажмите кнопку ОК, чтобы принять изменения.

Заполнение макета элементами управления

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

Поля имени
Поля адреса
Поля номера телефона
Поле "Примечания"

Создание полей имени

Поля ввода имени необходимо разместить в первой строке элемента управления TableLayoutPanel. Для полей имени используются элементы управления Label и TextBox, а для фамилии – элементы управления Label и TextBox.

Создание полей имени

Перетащите элемент управления Label из Панели элементов в первую ячейку элемента управления TableLayoutPanel.
В окне Свойства установите значение свойства Anchor элемента управления Label равным Right.
Свойству AutoSize присвойте значение true.
Присвойте свойству Text значение "Имя".
Перетащите элемент управления TextBox из Панели элементов во вторую ячейку первой строки рядом с элементом управления Label.
Присвойте свойству Anchor элемента управления TextBox значение Left, Right.
Перетащите элемент управления Label из Панели элементов в третью ячейку первой строки. Присвойте свойству Anchor элемента управления Label значение Right. Свойству AutoSize присвойте значение true. Присвойте свойству Text значение "Фамилия".
Перетащите элемент управления TextBox из Панели элементов в четвертую ячейку первой строки. Присвойте свойству Anchor элемента управления TextBox значение Left, Right.

Создание полей адреса

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

Создание полей адреса

Перетащите элемент управления Label из Панели элементов в первую ячейку второй строки.
В окне Свойства установите значение свойства Anchor элемента управления Label равным Right. Свойству AutoSize присвойте значение true. Присвойте свойству Text значение Адрес1.
Перетащите элемент управления TextBox из Панели элементов во вторую ячейку второй строки рядом с элементом управления Label.
Присвойте свойству Anchor элемента управления TextBox значение Left, Right.
Присвойте свойству ColumnSpan значение 3. Это свойство содержится в элементе управления TableLayoutPanel. Дополнительные сведения о доступных свойствах см. в разделе Общие сведения о поставщике расширителей.
Повторите шаги с 1 по 5 для третьей строки. Присвойте свойству Text элемента управления Label значение Адрес2.
Перетащите элемент управления Label из Панели элементов в первую ячейку четвертой строки.
Присвойте свойству Anchor элемента управления Label значение Right. Свойству AutoSize присвойте значение true. Присвойте свойству Text значение Город.
Перетащите элемент управления TextBox из Панели элементов во вторую ячейку четвертой строки рядом с элементом управления Label.
Присвойте свойству Anchor элемента управления TextBox значение Left, Right.
Перетащите элемент управления Label из Панели элементов в третью ячейку четвертой строки.
Присвойте свойству Anchor элемента управления Label значение Right. Свойству AutoSize присвойте значение true. Присвойте свойству Text значение Область.
Перетащите элемент управления ComboBox из Панели элементов в четвертую ячейку четвертой строки.
Присвойте свойству Anchor элемента управления ComboBox значение Left. Свойству FormattingEnabled присвойте значение true.

Создание полей номера телефона

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

Создание полей номера телефона

Перетащите элемент управления Label из Панели элементов в пятую ячейку пятой строки.
В окне Свойства установите значение свойства Anchor элемента управления Label равным Right. Свойству AutoSize присвойте значение true. Присвойте свойству Text значение "Рабочий телефон".
Перетащите элемент управления MaskedTextBox из Панели элементов во вторую ячейку пятой строки.
Присвойте свойству Anchor элемента управления MaskedTextBox значение Left.
Щелкните смарт-тег () элемента управления MaskedTextBox, чтобы открыть редактор Mask.
Выберите маску Номер телефона в диалоговом окне Маска ввода. Нажмите кнопку ОК.
Повторите шаги с 1 по 5 для полей номера домашнего телефона. Присвойте свойству Text значение "Домашний телефон".

Создание поля примечаний

Последнее поле занимает шестую строку. Это поле служит для ввода примечаний и допускает ввод любого текста.

Создание поля примечаний

Перетащите элемент управления Label из Панели элементов в пятую ячейку шестой строки.
В окне Свойства установите значение свойства Anchor элемента управления Label равным Top, Right. Свойству AutoSize присвойте значение true. Присвойте свойству Text значение "Примечания".
Перетащите элемент управления RichTextBox из Панели элементов во вторую ячейку шестой строки.
Присвойте свойству ColumnSpan значение 3.
Присвойте свойству Dock элемента управления RichTextBox значение Fill.

Завершение настройки сетки макета

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

Чтобы настроить сетку макета

Выберите элемент управления TableLayoutPanel и щелкните его глиф смарт-тега (). Выберите Изменить строки и столбцы, чтобы открыть диалоговое окно Стили столбцов и строк. Дополнительные сведения см. в разделе Практическое руководство. Изменение столбцов и строк в элементе управления TableLayoutPanel.
Выберите Столбцы из раскрывающегося списка Показать.
Выберите первый и третий столбцы и измените значение его свойства SizeType на AutoSize.
Нажмите кнопку ОК, чтобы принять изменения.

Контрольная точка

Теперь можно запустить приложение, чтобы проверить динамический макет формы.

Для проверки макета формы

Выполните построение и запуск проекта. После появления формы увеличьте или уменьшите ее размер.

Примечание

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

Следующие действия

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