Шаг 5. Добавление элементов управления в форму

На данном шаге производится добавление на форму элемента управления PictureBox и элемента управления CheckBox.Затем на форму добавляются кнопки.

Для видео версии этого раздела см. в разделе Учебное руководство 1. Создание приложения для просмотра рисунков на языке Visual Basic - видео 2 OR Учебное руководство 1. Создайте средство просмотра видео в c# - 2 изображения.

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

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

2. Дважды щелкните элемент управления PictureBox.Интегрированная среда разработки добавляет элемент управления PictureBox в форму.Так как TableLayoutPanel размещена для заполнения формы, интегрированная среда разработки добавляет элемент управления PictureBox в первую пустую ячейку.

3. Чтобы отобразить список задач, щелкните черный треугольник на новом элементе управления PictureBox, как показано на рисунке ниже.

   Задачи элемента управления PictureBox

   

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

4. Щелкните элемент Закрепление в родительском контейнере.В результате этого действия у элемента управления PictureBox свойство Dock принимает значение Fill.Чтобы это увидеть, выделите элемент управления PictureBox, перейдите к окну Свойства и убедитесь, что свойство Dock имеет значение Fill.

5. Сделайте так, чтобы элемент управления PictureBox занимал два столбца с помощью его свойства ColumnSpan.Выделите элемент управления PictureBox и установите его свойству ColumnSpan значение 2.Также необходимо, чтобы когда элемент управления PictureBox был пустым, отображалась пустая рамка.Установите для его свойства BorderStyle значение Fixed3D.

6. Добавьте в форму элемент управления CheckBox.Дважды щелкните элемент CheckBox на панели элементов, чтобы интегрированная среда разработки добавила новый элемент управления CheckBox в следующую свободную ячейку таблицы.Так как элемент управления PictureBox занимает первые две ячейки, элемент управления CheckBox добавляется в нижнюю левую ячейку.Выберите новый элемент управления CheckBox и установите для свойства Text значение Stretch, как показано на рисунке ниже.

   Элемент управления TextBox со свойством Stretch

   

7. На панели элементов перейдите к группе Контейнеры (там где был получен элемент управления TableLayoutPanel) и дважды щелкните элемент управления FlowLayoutPanel, чтобы добавить новый элемент управления в последнюю ячейку в элементе управления PictureBox.Затем закрепите его в родительском контейнере (выберите в списке задач Закрепить в родительском контейнере или установите для его свойства Dock значение Fill).

   Примечание

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

Добавление кнопок

1. Выберите добавленный элемент FlowLayoutPanel.Перейдите к группе Стандартные элементы управления на панели элементов. Чтобы добавить кнопку с названием button1 на элемент управления FlowLayoutPanel, дважды щелкните по значку Button.Чтобы добавить другую кнопку, повторите это действие.Среда интегрированной разработки определяет, что уже существует кнопка с именем button1 и называет следующую кнопку как button2.

   Примечание
   В Visual Basic имена кнопок начинаются с заглавной буквы, поэтому имя button1 будет как Button1, имя button2 будет как Button2 и так далее.

2. Обычно другие кнопки добавляются при помощи панели элементов.В этот раз выделите button2, затем в меню Правка выберите команду Копировать (или нажмите сочетание клавиш CTRL+C).Чтобы вставить копию кнопки, в меню Правка выберите пункт Вставить (или нажмите сочетание клавиш CTRL+V).Повторите вставку еще раз.Среда интегрированной разработки добавила кнопки button3 и button4.

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

3. Выделите первую кнопку и установите для ее свойства Text значение Показать рисунок.Затем установите для свойства Text следующих трех кнопок значения Очистить рисунок, Установить цвет фона, Закрыть.

4. Следующий шаг это установка размера кнопок и размещение их таким образом, чтобы они были выровнены по левой стороне панели.Выделите элемент управления FlowLayoutPanel и посмотрите свойство FlowDirection.Измените его значение на RightToLeft.После этого действия кнопки должны сами выровняться по правой стороне ячейки и изменить свой порядок таким образом, чтобы кнопка Показать рисунок располагалась с правой стороны.

   Примечание
   Если кнопки по-прежнему остаются в неправильном порядке, можно перетащить кнопки вокруг элемента управления FlowLayoutPanel для расположения их в произвольном порядке.Можно щелкнуть по одной из кнопок и перетащить ее слева направо.

5. Чтобы выделить кнопку Закрыть, щелкните по ней.Удерживая клавишу CTRL, щелкните по трем другим кнопкам, чтобы все они были выделены.При выделенных кнопках перейдите к окну Свойства и прокрутите его вверх до свойства AutoSize.Это свойство указывает кнопке автоматически изменять свой размер так, чтобы весь текст мог разместиться на ней.Задайте значение true.Кнопки теперь должны иметь соответствующий размер и быть расположены в правильном порядке.(пока выделены все четыре кнопки, можно одновременно изменить все четыре свойства AutoSize). На следующем рисунке показаны эти четыре кнопки.

   Программа просмотра изображений с четырьмя кнопками

   

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

Продолжить или повторить пройденный материал

• Следующий шаг руководства см. в разделе Шаг 6. Присвоение имен элементам управления "Кнопка".

• Предыдущий шаг руководства см. в разделе Шаг 4. Создание макета формы с помощью элемента управления TableLayoutPanel.