Шаг 2. Создание пользовательского интерфейса

Обновлен: Ноябрь 2007

В этом разделе будет создан веб-обозреватель. Используйте Visual Basic, экспресс-выпуск для построения интерфейса пользователя (видимый компонент приложения, с которым взаимодействует пользователь) посредством добавления элементов управления с панели элементов на форму.

Панель элементов находится в левой части окна Visual Studio и содержит несколько вкладок, в том числе Данные, Компоненты и Все формы Windows Forms. На каждой вкладке находится набор операций, представляющих элементы управления или компоненты, которые можно добавить к приложению. Например, на вкладке Все формы Windows Forms содержатся элементы TextBox, Button, CheckBox, представляющие элементы управления, которые можно добавить к приложению, перетащив их на форму. Не беспокойтесь по поводу размера элемента управления. Порядок настройки внешнего вида приложения будет описан в следующем разделе.

Просмотрите видеодемонстрацию Видео с практическими советами: создание первой программы на Visual Basic.

Добавление элемента управления к приложению

1. Выберите панель элементов.

   Открывается панель элементов.

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

2. Щелкните вкладку Все формы Windows Forms в панели элементов, а затем перетащите элемент управления Panel в левый верхний угол формы.

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

3. С той же вкладки перетащите элемент управления TextBox и поместите его в верхней части элемента управления Panel.

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

4. С той же вкладки перетащите элемент управления Button и поместите его в верхней части элемента управления Panel справа от элемента управления TextBox.

5. Наконец, на вкладке Все формы Windows Forms выберите элемент управления WebBrowser и поместите его под элементом управления Panel.

   Примечание.
   Если элемент управления WebBrowser не умещается на форме, можно изменить размеры формы, перетащив ее границу или угол.

   Примечание.
   Если окно панели элементов оставалось открытым, можно закрыть его, чтобы освободить пространство для работы. Чтобы сделать это, щелкните значок Автоматически скрывать.

Более детальное рассмотрение

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

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

Как вы видите, панель элементов содержит большое количество элементов управления, каждый из которых имеет уникальное предназначение. Элементы управления Panel могут использоваться для хранения других элементов управления, например таких, как только что добавленные. Элементы управления Button обычно используются для выполнения задач при их нажатии, например для закрытия программы. Элементы управления TextBox используются для ввода текста на экране с помощью клавиатуры. Элемент управления WebBrowser предоставляет встроенные возможности просмотра веб-страниц, схожие с возможностями Internet Explorer, что избавляет от необходимости заново писать код для них.

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

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

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

Следующее занятие: Шаг 3. Настройка внешнего вида и поведения

См. также

Задачи

Шаг 1. Создание проекта в Visual Basic

Другие ресурсы

Создание первой программы на Visual Basic

Элементы управления для использования в формах Windows Forms