Hello World из Windows Frorms

Доброго времени суток! В этом уроке мы создадим первое приложение с графическим интерфейсом, которое будет обрабатывать действия пользователя. На самом деле, все будет очень просто, но информация, которую Вы получите, определит дальнейшее развитие Вашего обучения. Я покажу как «строить» интерфейс приложения в дизайнере, как обрабатывать события (другими словами, как реагировать на действия пользователя) и как редактировать код, ассоциированный с графическим интерфейсом. И так, к делу!

Создадим новый проект приложения с графическим интерфейсом (как это делать, я показывал в предыдущем уроке). Затем, зададим главному окну заголовок «Hello World». Как устанавливать заголовок окна, тоже рассказывалось в предыдущем уроке. Для тех кто забыл, мы выделяем окно (форму) в дизайнере (левым кликом мыши по окну), переходим в область редактирования свойств, ищем свойство «Text» и справа от него вводим текст «Hello World». Если Вы соберёте проект и запустите приложение, то получите примерно следующий результат:

Пустое окно с установленным заголовком

Теперь, давайте добавим кнопку на нашу форму. Для этого в левой части окна Visual Studio (по умолчанию, в левой части) найдем панель элементов (см. рисунок ниже).

Панель элементов в MS Visual Studio

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

Раскрытая панель элементов MS Visual Studio

Как видно, в панели элементов перечислены группы элементов, сейчас нас интересует группа «Стандартные элементы управления», давайте раскроем её (результат показан на рисунке ниже).

Группа стандартных элементов управления

Теперь, давайте найдем элемент «Button» (он выделен на рисунке выше) и перетащим его на нашу форму (перетаскивание осуществляется обычным для Windows способом, так называемым Drag and Drop, т.е. наводим курсор на элемент, нажимаем левую кнопку мыши, и не отпуская её, перемещаем курсор на любое место формы, а затем, отпускаем кнопку мыши). Результат показан на рисунке ниже.

Окно с кнопкой в дизайнере Visual Studio

Теперь «настроим» перетащенную кнопку, для этого зададим осмысленные значения нужным свойствам этой кнопки. Для этого, убедимся, что кнопка выделена в дизайнере, и перейдем в область свойств, где найдем свойство «Name», которому зададим значение «MainBtn» (см. рисунок ниже).

Установка свойства «Name» для кнопки

Теперь давайте зададим надпись на кнопке, для этого установим значение свойства «Text» (обратите внимание, такое же свойство было и у формы). Установим этому свойству значение «Показать приветствие». Результат будет примерно таким, как показано на рисунке ниже.

Установленное свойство «Text» для кнопки

Как видите, весь текст не поместился на кнопке, но это легко исправить, мы просто «растянем» кнопку в ширину. Для этого наведем курсор на кнопку, щелкнем левой кнопкой мыши по ней, а потом, подведем курсор к правому краю кнопку, курсор примет вид двунаправленной стрелки, после чего, нужно нажать левую кнопку мыши и переместить курсор вправо, тем самым увеличив кнопку, результат показан на рисунке ниже.

Увеличенная кнопка на форме

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

Запущенное приложение

Но если мы попробуем нажать на кнопку, то ничего не произойдет, так как мы не реализовали обработчик таких действий пользователя. Давайте исправим это упущение. Для этого, закроем приложение и вернемся к дизайнеру. После чего, выполним двойной клик левой кнопкой мыши по кнопке. Нас, автоматически, Visual Studio переместит в область редактирования кода (из области визуального дизайнера), но это еще не всё, Visual Studio так же создаст специальный метод, который будет вызываться системой, всякий раз, после того, как пользователь нажмет на кнопку в нашем приложении (см. рисунок ниже).

Область редактирования кода (связанного с формой)

В этом самом месте области кода, мы будем писать тот код, который нужно выполнять при нажатии пользователем на кнопку в нашем приложении. Это так называемые обработчик события (в данном случае, нажатия на кнопку). Давайте в ставим в обработчик следующий код:

MessageBox.Show("Hello World!");

Как видите, очень простой код… Теперь снова соберем проект и запустим приложение. Когда приложение запустится, нажмите на кнопку, и вы получите такой результат:

Конечный результат работы приложения

Как видите, мы поприветствовали мир!

И так, в этом уроке мы редактировали форму в дизайнере, устанавливали значения свойствам кнопки и окна (формы), обрабатывали события в коде приложения. Да, урок получился длинным, но он важен, и разбить его на части практически невозможно, а я всё больше задумываюсь о создании видеоуроков. А в следующем уроке, будет сделан небольшой разбор полетов.

Перейти к следующему уроку