Руководство. Добавление элементов управления в приложение Windows Forms для просмотра рисунков (.NET Framework)

В этой серии трех руководств вы создадите приложение Windows Forms, которое загружает рисунок и отображает его. Интегрированная среда разработки Visual Studio (IDE) предоставляет инструменты, необходимые для создания приложения.

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

В этом втором руководстве описано, как:

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

Чтобы создать новое приложение Windows Forms с помощью .NET, следуйте руководству по созданию приложения Windows Forms с помощью .NET. Дополнительные сведения см. в руководстве по настольному .NET для Windows Forms.

Необходимые условия

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

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

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

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

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

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

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

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

   

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

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

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

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

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

    

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

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

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

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

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

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

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

5. Добавьте еще две кнопки таким образом. Другой вариант — выбрать кнопку 2. Затем выберите Изменить>Копировать или Ctrl+C. Затем выберите Изменить>Вставить в панели меню или нажмите клавиши Ctrl+V, чтобы вставить копию кнопки. Теперь снова вставьте его. Интегрированная среда разработки добавляет button3 и button4 в FlowLayoutPanel.

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

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

8. Чтобы изменить размер кнопок и упорядочить их, выберите FlowLayoutPanel. Задайте для свойства flowDirection значениеRightToLeft.

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

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

10. В окне свойств задайте для свойства AutoSize значение True. Кнопки изменяют размер, чтобы соответствовать тексту.

    

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

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

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

1. На форме нажмите кнопку Закрыть. Если у вас все кнопки по-прежнему выбраны, выберите Esc, чтобы отменить выделение.

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

   

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

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

Вы можете изменить имя любого элемента управления, например TableLayoutPanel или CheckBox.

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

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

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

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

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

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

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

   

4. Выберите значок openFileDialog1 и задайте два свойства:

   • Задайте свойству фильтра следующее значение:

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

   • Задайте для свойства Название следующее значение: Выбрать файл рисунка.

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

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

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

Учебник, часть 3: добавление кода в программу просмотра рисунков