Учебник. Добавление элементов управления в средство просмотра изображений приложения Windows Forms в Visual Studio

  • Статья

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

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

В этом третьем учебнике вы научитесь следующему:

  • Добавление элементов управления в приложение
  • Добавление кнопок на панель макета
  • Изменение имен и расположений элементов управления
  • Добавление компонентов диалоговых окон

Необходимые компоненты

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

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

Приложение "Средство просмотра изображений" использует элемент управления PictureBox для вывода изображения. Оно использует флажок и несколько кнопок для управления изображением и фоном, а также для закрытия приложения. Вы добавите элемент PictureBox и флажок из области панели элементов в Visual Studio IDE.

  1. Откройте Visual Studio. Проект средства просмотра изображений находится в разделе Открыть последние.

  2. В конструкторе Windows Forms выберите элемент управления TableLayoutPanel, добавленный в предыдущем учебнике. Убедитесь, что в окне Свойства отображается tableLayoutPanel1.

  3. В левой части интегрированной среды разработки Visual Studio выберите вкладку Панель элементов. Если вы ее не видите, выберите пункт Представление>Панель элементов в строке меню или воспользуйтесь комбинацией клавиш CTRL+ALT+X. На панели элементов разверните узел Общие элементы управления.

  4. Дважды щелкните элемент PictureBox, чтобы добавить в форму элемент управления PictureBox. Visual Studio IDE добавит элемент управления PictureBox в первую пустую ячейку TableLayoutPanel.

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

    Screenshot shows the PictureBox Tasks dialog box with Dock in Parent Container highlighted.

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

  7. В окне Свойства для элемента управления PictureBox задайте для свойства ColumnSpan значение 2. Теперь элемент управления PictureBox заполняет оба столбца.

  8. Установите для его свойства BorderStyle значение Fixed3D.

  9. В конструкторе Windows Forms выберите элемент управления TableLayoutPanel. Затем двойным щелчком выберите элемент CheckBox на панели элементов, чтобы добавить новый элемент управления CheckBox в следующую свободную ячейку таблицы. Элемент управления PictureBox занимает первые две ячейки в TableLayoutPanel, поэтому элемент управления CheckBox добавляется в нижнюю левую ячейку.

  10. Выберите свойство Text и введите Stretch.

    Screenshot shows checkbox control named Stretch.

Добавление кнопок на панель макета

Мы добавили элементы управления в TableLayoutPanel. Далее показано, как добавить четыре кнопки в новую панель макета в TableLayoutPanel.

  1. В форме выберите элемент управления TableLayoutPanel. Откройте Панель элементов, выберите Контейнеры. Дважды щелкните элемент управления FlowLayoutPanel для добавления нового элемента в последнюю ячейку TableLayoutPanel.

  2. Присвойте свойству Dock элемента FlowLayoutPanel значение Fill. Это свойство можно задать, щелкнув черный треугольник и выбрав Закрепить в родительском контейнере.

    Элемент управления FlowLayoutPanel является контейнером, в котором другие элементы управления размещаются построчно в определенном порядке.

  3. Выберите новый элемент FlowLayoutPanel, а затем откройте Панель элементов и выберите Общие элементы управления. Дважды щелкните элемент Кнопки, чтобы добавить кнопку с именем button1.

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

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

  6. Выберите первую кнопку и установите для ее свойства Text значение Показать рисунок.

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

  8. Чтобы изменить размер кнопок и расположить их, выберите элемент FlowLayoutPanel. Присвойте свойству FlowDirection значение RightToLeft.

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

  9. Щелкните кнопку Закрыть, чтобы выбрать ее. Затем выберите остальные кнопки, удерживая нажатой клавишу CTRL.

  10. В окне Свойства задайте для свойства Авторазмер значение True. Размеры кнопок будут изменяться соответствии с текстом.

    Screenshot shows the Picture Viewer form with four buttons.

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

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

В форме есть четыре кнопки: button1, button2, button3и button4 в C#. В Visual Basic в качестве первой буквы любого имени элемента управления по умолчанию используется прописная буква, поэтому в Visual Basic кнопки называются Button1, Button2, Button3 и Button4. Чтобы присвоить им более информативные имена, выполните указанные ниже действия.

  1. В форме нажмите кнопку Закрыть . Если все еще выделены все кнопки, для отмены выделения нажмите клавишу ESC.

  2. В окне Свойства найдите (Name). Измените имя на closeButton.

    Properties window with closeButton name

    Интегрированная среда разработки не принимает имена, содержащие пробелы.

  3. Переименуйте другие три кнопки как backgroundButton, clearButton, showButton. Имена можно проверить в раскрывающемся списке селектора элементов управления в окне Свойства . Отобразятся новые имена кнопок.

Можно переименовать любой элемент управления, например TableLayoutPanel или checkbox.

Добавление компонентов диалоговых окон

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

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

В этом разделе добавьте в форму компоненты OpenFileDialog и ColorDialog.

  1. Выберите конструктор Windows Forms (Form1.cs[Design]). Затем откройте Панель элементов и выберите группу Диалоговые окна.

  2. Дважды щелкните элемент OpenFileDialog, чтобы добавить в форму компонент с именем openFileDialog1.

  3. Дважды щелкните на панели элементов элемент ColorDialog, чтобы добавить в форму компонент с именем colorDialog1. Компоненты отображаются в нижней части конструктора Windows Forms в виде значков.

    Dialog components

  4. Щелкните значок openFileDialog1 и задайте два свойства:

    • Установите для свойства Filter следующее значение:

      JPEG Files (*.jpg)|*.jpg|PNG Files (*.png)|*.png|BMP Files (*.bmp)|*.bmp|All files (*.*)|*.*

    • Установите для свойства Title значение Выбор файла изображения.

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

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

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

Учебник. Часть 3. Добавление кода в средство просмотра изображений