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

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

Элементы управления используют код C# или Visual Basic для выполнения связанных с ними действий.

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

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

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

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

Добавление обработчиков событий для элементов управления

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

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

2. В конструкторе Windows Forms дважды щелкните Показать рисунок. Вместо этого можно нажать кнопку Показать рисунок в форме, а затем нажать клавишу ВВОД.

   В Visual Studio IDE откроется вкладка в главном окне. Для C# вкладка называется Form1.cs. (Если вы используете Visual Basic, она называется Form1.vb.)

   На этой вкладке отображается файл кода, лежащий в основе формы.

   

   Примечание.

   На вкладке Form1.cs кнопка showButton может отображаться как ShowButton.

3. Обратите внимание на эту часть кода.

   C#

   private void showButton_Click(object sender, EventArgs e)
   {
   }
   

   VB

   Private Sub showButton_Click() Handles showButton.Click
   
   End Sub
   

   Важно!

   Используйте элемент управления языка программирования в правом верхнем углу этой страницы, чтобы просмотреть фрагмент кода на C# или Visual Basic.
   
   

4. Снова выберите вкладку Конструктор Windows Forms, а затем дважды нажмите кнопку Очистить изображение, чтобы открыть код. Повторите это действие для двух оставшихся кнопок. Каждый раз при этом действии Visual Studio IDE добавляет в файл кода формы новый метод.

5. Дважды щелкните элемент управления CheckBox в конструкторе Windows Forms, чтобы добавить метод checkBox1_CheckedChanged(). Если установить или снять флажок, будет вызываться этот метод.

   Ниже показан фрагмент нового кода, который представлен в редакторе кода.

   C#

   private void clearButton_Click(object sender, EventArgs e)
   {
   }
   
   private void backgroundButton_Click(object sender, EventArgs e)
   {
   }
   
   private void closeButton_Click(object sender, EventArgs e)
   {
   }
   
   private void checkBox1_CheckedChanged(object sender, EventArgs e)
   {
   }
   

   VB

   Private Sub clearButton_Click() Handles clearButton.Click
   
   End Sub
   
   Private Sub backgroundButton_Click() Handles backgroundButton.Click
   
   End Sub
   
   Private Sub closeButton_Click() Handles closeButton.Click
   
   End Sub
   
   Private Sub CheckBox1_CheckedChanged() Handles CheckBox1.CheckedChanged
   
   End Sub
   

---

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

Например, событие Click для кнопки с именем showButton вызывает showButton_Click() или ShowButton_Click(). Если вы решите изменить имя переменной кода, щелкните правой кнопкой мыши переменную в коде, а затем выберите команду Рефакторинг>Переименовать. Все экземпляры этой переменной в коде будут переименованы. Дополнительные сведения см. в разделе Оптимизация кода с помощью переименования.

Написание кода для открытия диалогового окна

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

В Visual Studio IDE имеется эффективный инструмент, который называется IntelliSense. При вводе текста IntelliSense предлагает возможный код.

1. В конструкторе Windows Forms дважды нажмите кнопку Показать рисунок. Интегрированная среда разработки перемещает курсор внутрь метода showButton_Click() или ShowButton_Click().

2. Введите i в пустой строке между двумя фигурными скобками { } или между Private Sub... и End Sub. Откроется окно IntelliSense.

   

3. Окно IntelliSense должно выделить слово if Нажмите клавишу TAB, чтобы вставить if.

4. Выберите значение true, а затем введите op, чтобы перезаписать его для C# или Op для Visual Basic.

   

   В IntelliSense отобразится openFileDialog1.

5. Нажмите клавишу TAB, чтобы добавить openFileDialog1.

6. Введите точку (.) или точку, сразу после openFileDialog1. IntelliSense отобразит все свойства и методы компонента OpenFileDialog. Начните вводить ShowDialog и нажимайте клавишу TAB. Метод отобразит диалоговое ShowDialog()окно "Открыть файл ".

7. Добавьте круглые скобки () сразу после "g" в ShowDialog. Код должен быть следующим: openFileDialog1.ShowDialog().

8. В C# добавьте пробел, затем два знака равенства (==). В Visual Basic добавьте пробел, затем один знак равенства (=).

9. Добавьте еще один пробел. Используйте IntelliSense для ввода DialogResult.

10. Чтобы открыть значение DialogResult в окне IntelliSense, введите точку. Введите букву O и нажмите клавишу TAB, чтобы вставить ОК.

    Примечание.

    Первая строка кода должна быть завершена. В C# это выглядит следующим образом.

    if (openFileDialog1.ShowDialog() == DialogResult.OK)

    В Visual Basic это выглядит следующим образом.

    If OpenFileDialog1.ShowDialog() = DialogResult.OK Then

11. Добавьте следующую строку кода:

    C#

    pictureBox1.Load(openFileDialog1.FileName);  
    

    VB

    PictureBox1.Load(OpenFileDialog1.FileName)
    

    Можно скопировать и вставить ее или использовать IntelliSense. Окончательный вариант метода showButton_Click() будет выглядеть аналогично приведенному ниже коду.

    C#

    private void showButton_Click(object sender, EventArgs e)
    {
        if (openFileDialog1.ShowDialog() == DialogResult.OK)
        {
            pictureBox1.Load(openFileDialog1.FileName);  
        }
    }
    

    VB

    Private Sub showButton_Click() Handles showButton.Click
        If OpenFileDialog1.ShowDialog() = DialogResult.OK Then
            PictureBox1.Load(OpenFileDialog1.FileName)
        End If
    
    End Sub
    

---

1. Добавьте следующий комментарий в код.

   C#

   private void showButton_Click(object sender, EventArgs e)
   {
       // Show the Open File dialog. If the user clicks OK, load the
       // picture that the user chose.
       if (openFileDialog1.ShowDialog() == DialogResult.OK)
       {
           pictureBox1.Load(openFileDialog1.FileName);
       }
   }
   

   VB

   Private Sub showButton_Click() Handles showButton.Click
   
       ' Show the Open File dialog. If the user clicks OK, load the
       ' picture that the user chose.
       If OpenFileDialog1.ShowDialog() = DialogResult.OK Then
           PictureBox1.Load(OpenFileDialog1.FileName)
       End If
   
   End Sub
   

---

Рекомендуется всегда комментировать код. Комментарии к коду облегчают понимание и обслуживание кода в будущем.

Написание кода для других элементов управления

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

В этом разделе добавьте код для других обработчиков событий.

1. В конструкторе Windows Forms дважды нажмите кнопку Очистить рисунок. Добавьте код в фигурные скобки.

   C#

   private void clearButton_Click(object sender, EventArgs e)
   {
       // Clear the picture.
       pictureBox1.Image = null;
   }
   

   VB

   Private Sub clearButton_Click() Handles clearButton.Click
       ' Clear the picture.
       PictureBox1.Image = Nothing
   End Sub   
   

2. Дважды нажмите кнопку Задать цвет фона и добавьте код в фигурные скобки.

   C#

   private void backgroundButton_Click(object sender, EventArgs e)
   {
       // Show the color dialog box. If the user clicks OK, change the
       // PictureBox control's background to the color the user chose.
       if (colorDialog1.ShowDialog() == DialogResult.OK)
           pictureBox1.BackColor = colorDialog1.Color;
   }
   

   VB

   Private Sub backgroundButton_Click() Handles backgroundButton.Click
       ' Show the color dialog box. If the user clicks OK, change the
       ' PictureBox control's background to the color the user chose.
       If ColorDialog1.ShowDialog() = DialogResult.OK Then
           PictureBox1.BackColor = ColorDialog1.Color
       End If
   End Sub
   

3. Дважды нажмите кнопку Закрыть и добавьте код в фигурные скобки.

   C#

   private void closeButton_Click(object sender, EventArgs e)
   {
       // Close the form.
       this.Close();
   }
   
   

   VB

   Private Sub closeButton_Click() Handles closeButton.Click
       ' Close the form.
       Close()
   End Sub  
   

4. Дважды нажмите кнопку Растянуть и добавьте код в фигурные скобки.

   C#

   private void checkBox1_CheckedChanged(object sender, EventArgs e)
   {
       // If the user selects the Stretch check box, 
       // change the PictureBox's
       // SizeMode property to "Stretch". If the user clears 
       // the check box, change it to "Normal".
       if (checkBox1.Checked)
           pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;
       else
           pictureBox1.SizeMode = PictureBoxSizeMode.Normal;
   }
   

   VB

   Private Sub CheckBox1_CheckedChanged() Handles CheckBox1.CheckedChanged
       ' If the user selects the Stretch check box, change 
       ' the PictureBox's SizeMode property to "Stretch". If the user 
       ' clears the check box, change it to "Normal".
       If CheckBox1.Checked Then
           PictureBox1.SizeMode = PictureBoxSizeMode.StretchImage
       Else
           PictureBox1.SizeMode = PictureBoxSizeMode.Normal
       End If
   End Sub   
   

Запуск приложения

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

• Нажмите клавишу F5.
• В строке меню выберите Отладка>Начать отладку.
• На панели инструментов нажмите кнопку Запустить.

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

1. Нажмите кнопку Задать цвет фона. Откроется диалоговое окно Цвет.

   

2. Выберите цвет для задания цвета фона.

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

   

4. Установите и снимите флажок Растянуть.

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

6. Нажмите кнопку Закрыть, чтобы выйти из приложения.

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

Поздравляем! Вы завершили изучение серии учебников. Вы выполнили следующие задачи по программированию и проектированию в Visual Studio IDE:

• Создание проекта Visual Studio, использующего Windows Forms
• Добавлен макет для приложения просмотра рисунков
• Добавление кнопок и флажков
• Добавление диалоговых окон
• Добавление обработчиков событий для элементов управления
• Написание кода C# или Visual Basic для управления событиями

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

Руководство 2. Создание математического теста с временем