Как добавить диалоговое окно в windows forms

Обновлено: 30.06.2024

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

Первоначально, создайте новый проект, указав в качестве шаблона Windows Form Application и назовите second_application. Затем нажмите OK.

Здесь все предельно просто: чтобы добавить меню в приложение, сначала откройте окно Toolbox (Панель элементов).
Нам потребуется разворот Menus & Toolbars (Меню и панели инструментов). В нем нас интересует элемент MenuStrip (рис. 1).
Рисунок 1. Выбор элемента для созданию меню.
Зажмите его левой клавишей мыши и перетащите на форму. На нашей форме отразиться элемент меню, как показано на рисунке 2.
Рисунок 2. Создание элементов меню.
Теперь, щелкнув на строке «введите здесь» вы можете ввести название меню: назовем его «File». При этом добавятся 2 дополнительных элемента – один снизу, он будет доступен при открытии меню, второй справа - для создания новых разделов меню (рис. 3).
Рисунок 3. Процесс добавления элементов меню.

Перед нами откроется код функции обработчика:

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

Новый код функции с комментариями:

Теперь можно откомпилировать приложение и проверить работоспособность кнопки.

Часто панель управления (Toolbar) дублирует элементы меню для быстрого к ним доступа.

Нам снова нужно перейти к окну Toolbox (Панель инструментов) и развороту Menus & Toolbars. В этот раз мы выберем элемент ToolStrip (рис. 5).
Рисунок 5. Окно Toolbox.
Перетащите элемент управления на окно и вы увидите, как вдоль его верхней границы разместиться панель ToolBar (рис. 6).
Рисунок 6. Добавленный элемент Toolbar.
Мы изменим положение привязки нашего ToolBar’a. Для этого щелкнем по нему правой кнопкой и в открывшемся контекстном меню выберем пункт Свойства. Откроется окно свойств: здесь мы изменим привязку на левую часть окна, внеся изменения в параметр Dock, как показано на рисунке 7.
Рисунок 7. Привязка панели инструментов к левой стороне.
Теперь увеличим размеры кнопок на Toolbar'e. Для этого сначала необходимо в его свойствах установить параметр AutoSize равным false. Теперь мы можем изменить размеры самих кнопок: установим параметры Size - Width равным 44. Поле станет шире (рис. 8).
Рисунок 8. Установка размеров изображений, размещаемых на кнопках создаваемого Toolbar.
Теперь добавим 3 кнопки на наш ToolBar. Для этого щелкните по нему и в раскрывающемся списке элементов, которые мы можем добавить, выберите элемент button (рис. 9).
Рисунок 9. Добавление кнопок на панель элементов (Toolbar).
Повторите операцию, чтобы кнопок на панели стало две. Теперь поочередно выберите каждую кнопку и в ее свойствах установите AutoSize равный false. После это перейдите к полю Size и установите высоту равную 42. Теперь кнопки примут квадратный вид.

Мы будем использовать 3 следующих изображения:

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

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

Изображение для кнопки 2.

Изображение для кнопки 3.

(. ) Обратите внимание, что у данных изображений прозрачный фон.

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

Теперь для установки изображений необходимо перейти в свойства картинки, после чего мы установим значение параметра ImageScaling равным none, чтобы изображение не масштабировалось. Теперь в параметре Image мы можем выбрать изображение для загрузки, как показано на рисунке 11.
Рисунок 11. Установка изображений на кнопки.
В процессе выбора откроется окно, показанное на рисунке 12.
Рисунок 12. Импорт рисунка для установки на кнопке.
Теперь щелкните на кнопке Import и выберите необходимый рисунок. Аналогично повторите с другими рисунками. В результате вы получите 3 красивые кнопки, как показано на рисунке 13.
Рисунок 13. Пример созданной панели инструментов.
Для того чтобы создать обработчики нажатий на кнопки этого ToolBox'а, достаточно совершить двойной щелчок мыши на каждом из них – MS Visual Studio автоматически сгенерирует код обработчик события и заготовки функций.

В будущем мы добавим вызов необходимых нам функций из этого обработчика.

Чтобы пользователь мог выбирать файл для загрузки через стандартное в Windows окно загрузки файлов, мы выполним следующие действия.
Перейдите к окну ToolBox (Панель элементов).
Теперь перетащите элемент управления OpenFileDialog (рис. 15) на форму.
Рисунок 15. Добавление элемента OpenFileDialog.
Местоположение, куда вы перетащите элемент, неважно: он добавится в поле под окном, к другим специфическим объектам (рис. 16).
Рисунок 16. Элемент OpenFileDialog, расположенный под редактируемой формой.
Как видно из рисунка 16, к дополнительным элементам, уже установленным на наше окно (меню и ToolBox), добавился еще и элемент OpenFileDialog1.
Теперь мы реализуем код открытия окна выбора файла, с необходимыми нам параметрами.

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

Теперь напишем следующую функцию LoadImage.

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

Добавление и вызов дополнительного диалогового окна

Для этого перейдите к окну Solution Explorer (Обозреватель решений), после чего щелкните на названии проекта правой кнопкой мыши и в открывшемся контекстном меню выберите Add->Form, как показано на рисунке 18.
Рисунок 18. Добавление в проект нового диалогового окна.
В открывшемся окне введите названия класса, который будет отвечать за генерацию нашего вспомогательного окна – Preview.cs (рис. 19).
Рисунок 19. Установка названия создаваемой формы для нового диалогового окна.
Теперь измените размер окна так, как показано на рисунке 20. Затем на форме разместите элемент panel. Внутри элемента panel разместите элемент pictureBox, как показано на рисунке 20.
Рисунок 20. Размещение элементов panel и picturebox на созданном диалоговом окне.
Данное окно будет получать при загрузке в качестве параметра ссылку на наше загруженное изображение. Затем оно будет устанавливать границы элемента pictureBox равными размерам полученного изображения, после чего устанавливать его в элемент pictureBox.

Перейдите к свойствам элемента panel и установите значение параметра AutoScroll равное true. Теперь, в том случае, если размер изображения будет превышать размер элемента panel1, будут появляться вертикальная и горизонтальная полоса прокрутки, с помощью которых можно будет просмотреть изображение.

Теперь рассмотрим исходный код, необходимый для реализации данных возможностей.

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

Он будет выглядеть следующим образом:

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

Перейдите к окну Preview, после чего сделайте двойной щелчок левой клавшей мыши на нем (НЕ на размещенных на нем объектах).

Откроется для редактирования функция:

Но мы сначала изменим код конструктора класса, теперь он будет выглядеть следующим образом:

Теперь отредактируем код функции Preview_Load. Он будет выглядеть следующим образом:

В заключении, самостоятельно добавьте обработчик нажатия кнопки закрыть. Функция закрытия будет выглядеть следующим образом:

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

Диалоговые окна служат для получения приложением необходимой информации от пользователя. Чаще всего диалоговые окна вызываются командой меню, заканчивающейся многоточием, или кнопками панели управления. Различают модальные и немодальные диалоговые окна. Модальное окно не дает продолжить работу приложения, пока не будет закрыто. Немодальное окно позволяет пользователю переключаться на другие режимы работы приложения без его закрытия, но визуально всегда расположено поверх приложения.

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

На случай использования формы для разработки диалогового окна в ней предусмотрены методы Show() и ShowDialog(), а также свойство DialogResult. Свойство с таким же именем DialogResult есть и у кнопок на случай их использования в диалоговых окнах. Если в обработчике события Click кнопки предусмотреть присвоение его свойству DialogResult одного из значений одноименного перечисления, то свойству DialogResult формы, а также ее возвращаемому значению, будет присвоено это значение.

Среди множества свойств, наследуемых и своих, класс Form имеет свойства AcceptButton и CancelButton, которым можно присвоить ссылки на объекты кнопок, по умолчанию предназначенных на реагирование нажатий клавиш Enter и Esc соответственно. Если упомянутые свойства для формы установлены, то нажатие клавиши Esc равносильно щелчку на соответствующей кнопке Cancel. Нажатие клавиши Enter равносильно щелчку на кнопке OK при условии, что другая кнопка в это время не имеет фокуса ввода.

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

Модальные диалоговые окна

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

Вот код примера конструирования нашего диалогового окна, иллюстрирующий все сказанное.

Любая более или менее серьезная программа использует диалоговые окна для организации интерфейса с пользователем. В графическом интерфейсе операционной системы Windows различают два вида диалоговых окон:

Модальные окна являются наиболее распространенным видом окон. Если открыто модальное окно, то чтобы попасть в основную программу, его обязательно нужно закрыть. Без закрытия модального окна невозможно перейти в программу, которая его вызвала. В программах Windows Forms возможна ситуация, когда одно модальное окно открывает другое (следующее) модальное окно. Таким образом получается цепочка вызовов.

Как правило, модальное окно содержит кнопки типа OK, Cancel (или другие), при нажатии на которые это окно закрывается.

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

2. Особенности работы с немодальными окнами в Windows Forms

В технологии Windows Forms основной программе соответствует форма – экземпляр класса, унаследованного от класса Form . Также модальному или немодальному окну соответствует некоторая форма.

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

в немодальном окне есть одна кнопка Close , которая его закрывает;
вызов немодального окна из главной программы происходит с помощью метода Show() класса Form (чтобы вызвать модальное окно нужно использовать метод ShowDialog() ).

В нижеследующем коде приведены примеры вызова модального и немодального окна

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

3. Способы обмена информацией между главной формой и немодальной формой

При использовании немодальных форм важным есть обмен информацией между основной программой (главной формой) и немодальной формой.

Здесь возможны две ситуации:

передача информации из главной формы в немодальную. Эта ситуация решается без проблем, поскольку в основной форме создается экземпляр немодальной формы. Через этот экземпляр осуществляется доступ к компонентам немодальной формы стандартным способом;
передача информации из немодальной формы в главную форму. Здесь возникает проблема: как из немодальной формы доступиться к экземпляру главной формы.

Чтобы передать данные (информацию) с немодальной формы в главную, можно использовать один из следующих способов:

4. Пример разработки демонстрационной программы использования немодальной формы

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

Демонстрационная программа состоит из двух форм: главной и немодальной. Из главной формы вызывается немодальная форма. Из немодальной формы происходит копирование информации из поля ввода в соответствующее поле ввода главной формы.

4.1. Создать проект типа Windows Forms

После создания проекта по шаблону Windows Forms автоматически создается главная форма, экземпляр которой называется Form1 .

4.2. Разработка основной формы

Создать основную форму и разместить на ней следующие элементы управления:

элемент управления типа Button . Создается экземпляр кнопки с именем button1 ;
элемент управления типа Label . Создается экземпляр метки с именем label1 ;
элемент управления типа TextBox . Создается экземпляр поля ввода с именем textBox1 .

Настроить свойства формы и элементов управления как показано на рисунке 1:

Также нужно откорректировать размеры главной формы.

После настройки главная форма будет иметь вид как изображено на рисунке 1.

Рисунок 1. Главная форма программы

4.3. Создать новую форму Form2

Создание новой формы осуществляется стандартным способом с помощью команд

4.4. Проектирование формы Form2

Разместить на форме Form2 следующие элементы управления:

один элемент управления типа Label . Будет создан объект с именем label1 ;
два элемента управления типа Button . Будет создано два объекта с именами button1 , button2 ;
один элемент управления типа TextBox . Будет создан экземпляр с именем textBox1 .

Настроить следующие свойства элементов управления формы Form2 :

После настройки немодальная форма будет иметь вид как изображено на рисунке 2.

Рисунок 2. Немодальная форма Form2 после настройки элементов управления

4.5. Ввод статической ссылки на форму Form1

В тексте класса Form1 нужно ввести статическую переменную с именем form1:

Статическая переменная имеет тип Control . Все элементы управления унаследованы из класса Control . Это же касается и формы.

4.6. Программирование обработчика события Click элемента управления button1 формы Form1

При нажатии на кнопке button1 ( Show Modeless Form ) открывается окно немодальной формы и в поле ввода немодальной формы ( Form2.textBox1.Text ) вписывается текст из поля ввода главной формы ( Form1.textBox1.Text ).

Чтобы выполнить этот пункт сначала нужно активировать форму Form1 . Затем нужно запрограммировать событие Click элемента управления button1 , размещенного на форме Form1 .

Текст обработчика события следующий:

4.7. Программирование обработчика события Click кнопки button1 формы Form2

При нажатии на кнопке button1 ( Copy to Form1 ) текст из поля ввода немодальной формы ( Form2.textBox1.Text ) должен скопироваться в соответствующее поле ввода главной формы ( Form1.textBox1.Text ).

Сначала нужно активировать форму Form2 и сформировать обработчик события Click элемента управления button1 .

Текст обработчика события следующий:

В обработчике события на основе статической ссылки form1 происходит циклический поиск элемента управления типа TextBox с именем textBox1 (на всякий случай, если в главной форме несколько textBox-ов).

4.8. Программирование обработчика события Click элемента управления button2

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

Как видно из вышеприведенного кода, немодальная форма закрывается точно так же как и модальная.

4.9. Запуск программы на выполнение

Классическая задача — получение ввода от пользователя — чаще всего решается через диалоговые окна. Например, у вас есть форма для отображения списка людей, и вы хотите иметь возможность добавления людей в список и редактирования их. Где расположить поля ввода для параметров добавляемого или редактируемого объекта? Можно в том же окне, где находится список, но лучше это делать в отдельном окне редактирования. Давайте рассмотрим это на примере.

Для примера нам понадобится новое WinForms-приложение, на главной форме которого мы поместим компонент ListView для хранения списка и две кнопки для добавления новой записи и редактирования выделенной. В списке ListView нужно:

в свойстве Columns добавить три колонки с заголовками: Имя, Фамилия и Возраст;
в свойстве View выбрать Details.

Такую главную форму можно увидеть на рис. 11.2.

Теперь нам понадобится дочерняя форма или диалоговое окно для редактирования элементов. Щелкните правой кнопкой мыши по имени проекта в панели Solution Explorer и в контекстном меню выберите Add | New Item. В открывшемся окне найдите и выделите Windows Form и в поле Name введите имя для диалогового окна — например, EditPersonForm.

Рис. 11.2. Форма будущей программы

Сразу же поместите на форму две кнопки для сохранения и отмены изменений, а также три поля ввода: для изменения имени, фамилии и возраста. Для изменения возраста можно использовать компонент NumericUpDown, который хорошо подходит для редактирования чисел. Мой вариант формы можно увидеть на рис. 11.3, но ваш может и отличаться.

Рис. 11.3. Форма диалогового окна

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

в свойстве AcceptButton нужно указать кнопку, которая будет являться кнопкой по умолчанию, и именно она станет срабатывать (будет вызываться ее обработчик события Click), если пользователь нажмет клавишу в тот момент, когда отображается окно. Здесь чаще выбирают кнопки типа OK или Да;
в свойстве CancelButton укажите кнопку отмены, которая будет срабатывать при нажатии клавиши ;
свойство FormBorderStyle лучше установить в FixedDialog, потому что диалоговым окнам желательно устанавливать фиксированный размер окна, их просто незачем растягивать;
свойство MaximizeBox рекомендуется установить в false, чтобы в заголовке окна не отображалась кнопка максимизации формы. Мы уже определились, что размер окна не должен изменяться, и возможность максимизации тем более не нужна;
свойство ShowInTaskBar лучше тоже установить в false, потому что только главное окно должно отображаться в панели задач. Дочерние окна отображайте в панели задач только при необходимости, а для диалоговых окон я не могу себе представить эту необходимость, — особенно, если окно модальное.

Еще пару манипуляций нужно сделать над кнопками. Для кнопки Сохранить установите свойство DialogResult в OK, а для кнопки Отмена установите это же свойство в Cancel. Теперь, если окно отображается в модальном режиме, то по нажатию любой из этих кнопок окно будет закрыто, а форма вернет в качестве результата то, что мы указали для кнопок в свойстве DialogResult.

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

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

Теперь все готово, чтобы написать код, который будет создавать новые элементы в списке и редактировать их. Для начала создайте обработчик события Click для кнопки Добавить главной формы и напишите в нем содержимое листинга 11.1.

Листинг 11.1. Код добавления нового элемента в список

В самом начале создается экземпляр класса EditPersonForm, а этим классом является форма. Следующим этапом идет отображение формы editForm.ShowDialog(), и тут же проверяется результат, который возвращает метод ShowDialog(). Если результат не равен DialogResult.OK (а этот результат возвращает кнопка Сохранить в диалоговом окне), то выполнение метода прерывается.

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

Теперь посмотрим на метод, который выполняет редактирование выделенного в списке элемента. Этот код вы можете увидеть в листинге 11.2.

Читайте также: