Как изучить windows forms

Обновлено: 01.07.2024

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

В этом уроке вы узнаете

Основы Windows Forms

Приложение Windows Forms работает на настольном компьютере. Приложение форм Windows обычно имеет набор элементов управления, таких как метки, текстовые поля, списки и т. Д.

Итак, пример элементов управления, доступных в приведенном выше приложении

Теперь давайте рассмотрим пример того, как мы можем реализовать простое приложение «Hello World» в Visual Studio. Для этого нам нужно будет выполнить следующие шаги

Шаг 1) Первый шаг включает создание нового проекта в Visual Studio. После запуска Visual Studio вам нужно выбрать пункт меню New-> Project.

Если вышеуказанные шаги будут выполнены, вы получите следующий вывод в Visual Studio.

Вывод:-

Вы увидите конструктор форм, отображаемый в Visual Studio. Именно в этом конструкторе форм вы начнете создавать приложение Windows Forms.

В обозревателе решений вы также сможете увидеть решение DemoApplication. Это решение будет содержать ниже 2 файла проекта

Приложение Form называется Forms1.cs. Этот файл будет содержать весь код приложения Windows Form.
Основная программа с именем Program.cs является файлом кода по умолчанию, который создается при создании нового приложения в Visual Studio. Этот код будет содержать код запуска приложения в целом.

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

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

Шаг 3) На этом этапе мы добавим в форму метку, которая будет отображать «Hello World». На панели инструментов вам нужно будет выбрать элемент управления Label и просто перетащить его на форму.

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

Чтобы перейти к свойствам элемента управления, необходимо щелкнуть его правой кнопкой мыши и выбрать пункт меню «Свойства».

Панель свойств также отображается в Visual Studio. Таким образом, для элемента управления меткой в элементе управления свойствами перейдите в раздел «Текст» и введите «Hello World».
Каждый элемент управления имеет набор свойств, которые описывают элемент управления.

Если вы выполните все вышеперечисленные шаги и запустите свою программу в Visual Studio, вы получите следующий вывод

Вывод:-

В выводе вы можете видеть, что форма Windows отображается. Вы также можете увидеть «Hello World» отображается в форме.

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

Мы уже видели, как добавить элемент управления в форму, когда добавили элемент управления меткой в предыдущем разделе, чтобы отобразить «Hello World».

Давайте посмотрим на другие элементы управления, доступные для форм Windows, и рассмотрим некоторые их общие свойства.

В нашем примере мы создадим одну форму, которая будет иметь следующую функциональность.

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

Групповая коробка

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

Шаг 2) После того, как группа будет добавлена, перейдите в окно свойств, нажав на элемент управления группы. В окне свойств перейдите к свойству Text и измените его на «Сведения о пользователе».

После внесения вышеуказанных изменений вы увидите следующий вывод

Вывод:-

В выводе вы можете четко видеть, что Groupbox был добавлен в форму. Вы также можете видеть, что текст группового блока был изменен на «Сведения о пользователе».

Контроль над этикетками

Шаг 2) После добавления метки перейдите в окно свойств, щелкнув элемент управления меткой. В окне свойств перейдите к свойству Text каждого элемента управления label.

После внесения вышеуказанных изменений вы увидите следующий вывод

Вывод:-

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

Текстовое окно

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

После внесения вышеуказанных изменений вы увидите следующий вывод

Вывод:-

На выходе вы можете четко видеть, что текстовые поля были добавлены в форму.

Список

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

Шаг 2) После того, как список был добавлен, перейдите в окно свойств, нажав на элемент управления списка.

Сначала измените свойство элемента управления Listbox, в нашем случае мы изменили его на lstCity
Нажмите на свойство Items. Это позволит вам добавлять различные элементы, которые могут отображаться в списке. В нашем случае мы выбрали элементы «коллекция».
В появившемся всплывающем редакторе коллекции строк введите названия городов. В нашем случае мы ввели «Мумбаи», «Бангалор» и «Хайдарабад».
Наконец, нажмите кнопку «ОК».

После внесения вышеуказанных изменений вы увидите следующий вывод

Вывод:-

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

Переключатель

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

Шаг 2) После добавления радиокнопки перейдите в окно свойств, щелкнув элемент управления радиокнопки.

Во-первых, вам нужно изменить свойство текста обоих элементов управления Radio. Перейдите в окно свойств и измените текст на мужской радиобутон, а на другой женский.
Аналогичным образом измените свойство name обоих элементов управления Radio. Перейдите в окно свойств и измените имя на «rdMale» одной радиокнопки и на «rdfemale» для другой.

Как только вы сделаете вышеуказанные изменения, вы увидите следующий вывод

Вывод:-

Вы увидите переключатели, добавленные в форму Windows.

флажок

Шаг 2) После того, как флажок был добавлен, перейдите в окно свойств, нажав на элемент управления флажок.

После внесения вышеуказанных изменений вы увидите следующий вывод

Вывод:-

кнопка

Шаг 2) После добавления кнопки перейдите в окно свойств, нажав на элемент управления Button.

После внесения вышеуказанных изменений вы увидите следующий вывод

Вывод:-

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

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

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

Шаг 1) Дважды щелкните по списку в конструкторе форм . Делая это, Visual Studio автоматически откроет файл кода для формы. И он автоматически добавит метод события в код. Этот метод события будет запускаться всякий раз, когда выбран какой-либо элемент в списке.

Выше приведен фрагмент кода, который автоматически добавляется Visual Studio при двойном щелчке элемента управления «Список» на форме. Теперь давайте добавим приведенный ниже фрагмент кода в этот фрагмент кода, чтобы добавить необходимые функции в событие списка.

Как только вы внесете вышеуказанные изменения и запустите программу в Visual Studio, вы увидите следующий вывод

Вывод:-

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

Это метод обработчика событий, который автоматически создается Visual Studio при двойном щелчке по кнопке управления. Вам не нужно беспокоиться о сложности имени метода или параметров, передаваемых в метод.
Здесь мы получаем значения, введенные в текстовое поле имени и адреса. Значения могут быть взяты из свойства text текстового поля. Затем мы присваиваем значения двум переменным: name и address соответственно.
Наконец, мы используем метод MessageBox для отображения значения имени и адреса для пользователя.

Как только вы внесете вышеуказанные изменения и запустите программу в Visual Studio, вы увидите следующий вывод

Вывод:-

Управление Tree и PictureBox

Управление Деревом

Давайте посмотрим, как мы можем реализовать это на примере, показанном ниже.

Перейдите к панели инструментов свойств для древовидного элемента управления. Нажмите на свойство узла. Это вызовет редактор TreeNode
В редакторе TreeNode нажмите кнопку Add Root, чтобы добавить корневой узел в коллекцию дерева.
Затем измените текст корневого узла, укажите текст в качестве корневого и нажмите кнопку «ОК». Это добавит корневой узел.

Сначала нажмите кнопку «Добавить дочерний элемент». Это позволит вам добавить дочерние узлы в коллекцию Tree.
Для каждого дочернего узла измените свойство text. Продолжайте повторять предыдущий шаг и этот шаг и добавьте 2 дополнительных узла. В итоге у вас будет 3 узла, как показано выше, с текстом соответственно Label, Button и Checkbox.
Нажмите на кнопку ОК

После внесения вышеуказанных изменений вы увидите следующий вывод.

Вывод:-

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

PictureBox Control

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

Сначала нажмите на свойство Image для элемента управления PictureBox. Появится новое окно.
В этом окне нажмите на кнопку «Импорт». Это будет использоваться для прикрепления изображения к элементу управления Picturebox.
Появится диалоговое окно, в котором вы сможете выбрать изображение для прикрепления картинки
Нажмите на кнопку ОК

Как только вы сделаете вышеуказанные изменения, вы увидите следующий вывод

Для начала создадим проект.

Откроем Visual Studio, далее жмем Файл→Создать→Проект, далее выбираем пункт CLR и отмечаем Приложение Windows Forms, даем имя проекта, к примеру factr и жмем Ok.

После того как мы создали проект, должна появиться пустая форма, которая должна выглядеть примерно так:

Справа должна появиться панель элементов, если ее нет, то можно включить ее в меню Вид→Панель Элементов или нажатием горячих клавиш — Ctrl + Alt + X.

На ней расположены различные элементы для вставки в форму, нам понадобятся только элементы Button (Кнопка), Label (Надпись) и TextBox (Текстовое поле). Перетащите на форму три элемента Label, Два элемента TextBox, и одну кнопку (Button), расставьте элементы примерно так:

Теперь нам нужно будет изменить текст надписей для элементов Label и Button и Задать подходящие имена классов для элементов TextBox. Для этого Выделите элемент label1, перейдите в Панель свойств, (обычно она находится под Панелью элементов, если панель выключена, включите ее в меню Вид -> Диспетчер свойств.) и задайте для данного элемента значение атрибута Text как показано на рисунке.

Задайте атрибут Text для всех элементов Label и Кнопки Button аналогичным образом. Наша форма должна принять примерно следующий вид:

Я сделал кнопку развернуть неактивной, так как изменение размеров данной формы испортит ее внешний вид, Вы также можете это сделать, щелкнув левой кнопкой мыши на пустом месте формы и в Панели свойств задать для атрибута MaximizeBox параметр False.

Теперь задайте для текстовых полей (TextBox) Атрибуты Name в Панели Свойств – для первого поля это будет num1, а для второго, соответственно num2. Тем самым мы изменили имена классов для полей TextBox, чуть позднее Вы поймете зачем.

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

Первым делом нужно добавить заголовочный файл fact.h в проект, для этого щелкаем правой кнопкой мыши в Обозревателе решений на папке Заголовочные файлы, далее меню Добавить -> Создать Элемент, вписываем название файла – fact.h и нажимаем Добавить. В данном файле будет содержаться прототип функции для вычисления факториала. Добавляем туда следующий исходный код.

Теперь наш заголовочный файл подключен к проекту, далее аналогичным образом создаем файл исходного кода fact.cpp в проект.

В него добавляем саму функцию вычисления факториала целого числа.

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

Открываем файл Form.h, в нем мы видим визуальное представление нашей формы. Щелкаем двойным щелчком на кнопке Button и переходим к исходному коду.

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

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

И затем преобразовать полученное значение обратно в строку и присвоить его второму текстовому полю.

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

Теперь можно скомпилировать и запустить готовую программу и проверить ее. Помните, что тип double в С++ может хранить число не превышающее !170.

Результат работы программы можно проверить в инженерном калькуляторе Windows.

Конструктор Windows Forms предоставляет множество средств для создания приложений Windows Forms. В этой статье показано, как создать приложение с помощью различных средств, предоставляемых конструктором, и выполнять такие задачи:

размещать элементы управления с помощью линий привязки;
выполнять задачи конструктора с помощью смарт-тегов;
устанавливать поля и отбивки для элементов управления;
располагать элементы управления с помощью элемента управления TableLayoutPanel;
разделять макет элемента управления с помощью элемента управления SplitContainer;
просматривать макет в окне "Структура документа";
размещать элементы управления с отображением размера и сведений о расположении;
задавать значения свойств в окне "Свойства".

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

Создание проекта пользовательского элемента управления

Первым шагом является создание проекта элемента управления DemoCalculator.

Откройте Visual Studio и создайте проект категории Библиотека элементов управления Windows Forms. Задайте проекту имя DemoCalculatorLib.

Чтобы переименовать файл, в обозревателе решений щелкните правой кнопкой мыши элемент UserControl1.vb или UserControl1.cs, выберите Переименовать и замените имя файла на DemoCalculator.vb или DemoCalculator.cs. Чтобы переименовать все ссылки на элемент кода UserControl1, в соответствующем запросе выберите Да.

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

Разработка макета элемента управления

Элемент управления DemoCalculator содержит несколько элементов управления Windows Forms. На этом этапе вы зададите расположение элементов управления с помощью конструктора Windows Forms.

В конструкторе Windows Forms увеличьте размер элемента управления DemoCalculator, выбрав маркер изменения размера в правом нижнем углу и перетащив его вниз и вправо. В правом нижнем углу Visual Studio просмотрите сведения о размере и расположении элементов управления. Задайте элементу управления ширину 500 и высоту 400, наблюдая за сведениями о размере при изменении размера элемента управления.

На панели элементов выберите узел Контейнеры, чтобы открыть его. Выберите элемент управления SplitContainer и перетащите его на поверхность конструктора.

Элемент SplitContainer появится на поверхности конструктора элемента управления DemoCalculator.

Размер элемента управления SplitContainer автоматически устанавливается в соответствии с размером элемента управления DemoCalculator. В окне Свойства проверьте свойства, заданные для элемента управления SplitContainer . Найдите свойство Dock. Ему задано значение DockStyle.Fill. Это означает, что размер элемента управления SplitContainer устанавливается в соответствии с границами элемента управления DemoCalculator. Измените размер элемента управления DemoCalculator, чтобы проверить это поведение.

В окне Свойства замените значение свойства Dock на None .

Элемент управления SplitContainer уменьшится до размера по умолчанию и больше не будет меняться при изменении размера элемента управления DemoCalculator.

Щелкните глиф смарт-тега () в правом верхнем углу элемента управления SplitContainer . Выберите Закрепить в родительском контейнере, чтобы присвоить свойству Dock значение Fill .

Элемент управления SplitContainer закрепится по границам элемента управления DemoCalculator.

Для некоторых элементов управления доступны смарт-теги, упрощающие проектирование. Дополнительные сведения см. в разделе Пошаговое руководство: выполнение типичных задач с помощью смарт-тегов в элементах управления Windows Forms.

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

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

В окне Свойства замените значение свойства BorderStyle на Fixed3D .

На панели элементов выберите узел Стандартные элементы управления, чтобы открыть его. Выберите элемент управления ListView и перетащите его на правую панель элемента управления SplitContainer .

Выберите глиф смарт-тега элемента управления ListView . На панели смарт-тегов замените значение параметра View на Details .

На панели смарт-тегов выберите Изменить столбцы.

Откроется диалоговое окно Редактор коллекции ColumnHeader.

На панели смарт-тегов выберите Закрепить в родительском контейнере, а затем щелкните глиф смарт-тега, чтобы закрыть панель смарт-тегов.

С панели элементов узла Контейнеры перетащите элемент управления TableLayoutPanel на левую панель элемента управления SplitContainer .

Элемент управления TableLayoutPanel отобразится на поверхности конструктора с открытой панелью смарт-тегов. Элемент управления TableLayoutPanel упорядочивает свои дочерние элементы управления в сетке. Элемент управления TableLayoutPanel будет содержать экран и кнопки элемента управления DemoCalculator. Дополнительные сведения см. в разделе Пошаговое руководство: упорядочение элементов управления в формах Windows Forms с помощью элемента TableLayoutPanel.

На панели смарт-тегов выберите Правка строк и столбцов.

Откроется диалоговое окно Стили столбцов и строк.

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

В разделе Показать выберите Строки.

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

В окне Свойства замените значение свойства Dock на Fill .

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

Теперь, когда макет элемента управления настроен, можно добавить в элемент управления DemoCalculator кнопки и экран.

На панели элементов выберите значок элемента управления TextBox .

Элемент управления TextBox помещается в первую ячейку элемента управления TableLayoutPanel .

В окне Свойства замените значение свойства ColumnSpan элемента управления TextBox на 5.

Элемент управления TextBox переместится в центр своей строки.

Замените значение свойства Anchor элемента управления TextBox на Left , Right .

Элемент управления TextBox расширится по горизонтали, заняв все пять столбцов.

Измените значение свойства TextBox элемента управления TextAlign на Right .

В окне Свойства разверните узел свойства Font . Задайте значение 14 для Size и true для Bold у элемента управления TextBox .

Выберите элемент управления TableLayoutPanel .

На панели элементов выберите значок Button .

Элемент управления Button разместится в следующей свободной ячейке элемента управления TableLayoutPanel .

На панели элементов выберите Button еще четыре раза, чтобы заполнить вторую строку элемента управления TableLayoutPanel .

Выберите все пять элементов управления Button , удерживая нажатой клавишу SHIFT. Нажмите клавиши CTRL+C, чтобы скопировать элементы управления Button в буфер обмена.

Трижды нажмите сочетание клавиш CTRL+V, чтобы вставить скопированные элементы управления Button в оставшиеся строки элемента управления TableLayoutPanel .

Выберите все 20 элементов управления Button , удерживая нажатой клавишу SHIFT.

В окне Свойства замените значение свойства Dock на Fill .

Все элементы управления Button закрепятся в своих ячейках.

В окне Свойства разверните узел свойства Margin . Для All задайте значение 5.

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

Выберите button10 и button20, после чего нажмите клавишу DELETE, чтобы удалить их из макета.

Выберите button5 и button15, после чего замените значение их свойства RowSpan на 2. Это будут кнопки очистки и = для элемента управления DemoCalculator.

Использование окна структуры документа

Если в элементе управления или форме присутствует несколько элементов управления, перемещаться по макету удобнее с помощью окна "Структура документа".

В строке меню выберите Вид > Другие окна > Структура документа.

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

В окне Структура документа щелкните правой кнопкой мыши элемент button1, чтобы выбрать его, после чего щелкните Переименовать. Замените его имя на sevenButton.

В окне Структура документа замените имена элементов управления Button , заданные конструктором, на имена для рабочей среды согласно следующему списку:

button1 на sevenButton;

button2 на eightButton;

button3 на nineButton;

button4 на divisionButton;

button5 на clearButton;

button6 на fourButton;

button7 на fiveButton;

button8 на sixButton;

button9 на multiplicationButton;

button11 на oneButton;

button12 на twoButton;

button13 на threeButton;

button14 на subtractionButton;

button15 на equalsButton;

button16 на zeroButton;

button17 на changeSignButton;

button18 на decimalButton;

button19 на additionButton;

С помощью окон Структура документа и Свойства измените значения свойства Text для каждого имени элемента управления Button согласно следующему списку:

для элемента управления sevenButton замените свойство текста на 7;

для элемента управления eightButton замените свойство текста на 8;

для элемента управления nineButton замените свойство текста на 9;

для элемента управления divisionButton замените свойство текста на / (косая черта);

для элемента управления clearButton замените свойство текста на Clear;

для элемента управления fourButton замените свойство текста на 4;

для элемента управления fiveButton замените свойство текста на 5;

для элемента управления sixButton замените свойство текста на 6;

для элемента управления multiplicationButton замените свойство текста на * (звездочка);

для элемента управления oneButton замените свойство текста на 1;

для элемента управления twoButton замените свойство текста на 2;

для элемента управления threeButton замените свойство текста на 3;

для элемента управления subtractionButton замените свойство текста на - (дефис);

для элемента управления equalsButton замените свойство текста на = (знак равенства);

для элемента управления zeroButton замените свойство текста на 0;

для элемента управления changeSignButton замените свойство текста на +/- ;

для элемента управления decimalButton замените свойство текста на . (точка);

для элемента управления additionButton замените свойство текста на + (знак "плюс");

На поверхности конструктора выберите все элементы управления Button , удерживая нажатой клавишу SHIFT.

В окне Свойства разверните узел свойства Font . Задайте значение 14 для Size и true для Bold у всех элементов управления Button .

На этом разработка элемента управления DemoCalculator завершена. Остается только добавить логику калькулятора.

Добавление обработчиков событий

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

На поверхности конструктора выберите все элементы управления Button , удерживая нажатой клавишу SHIFT.

Выберите один из элементов управления Button .

В редакторе кода откроются обработчики событий, созданные конструктором.

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

Поскольку элемент управления DemoCalculator наследуется от класса UserControl, его поведение можно проверить с помощью Контейнера для тестирования пользовательских элементов управления. Дополнительные сведения см. в разделе Практическое руководство. Тестирование поведения элемента UserControl во время выполнения.

Нажмите клавишу F5, чтобы собрать и запустить элемент управления DemoCalculator в Контейнере для тестирования пользовательских элементов управления.

Выберите границу между панелями SplitContainer и перетащите ее влево и вправо. Размеры элемента TableLayoutPanel и всех его дочерних элементов управления будут изменяться в соответствии с доступным пространством.

Завершив тестирование элемента управления, нажмите кнопку Закрыть.

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

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

Создание проекта

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

Создайте проект Приложение Windows Forms с именем DemoCalculatorTest.

В обозревателе решений щелкните правой кнопкой мыши проект DemoCalculatorTest и выберите Добавить ссылку, чтобы открыть диалоговое окно Добавление ссылки.

Перейдите на вкладку Проекты и выберите проект DemoCalculatorLib, чтобы добавить ссылку на тестовый проект.

В обозревателе решений щелкните правой кнопкой мыши DemoCalculatorTest и выберите пункт Назначить запускаемым проектом.

В конструкторе Windows Forms увеличьте размер формы примерно до 700 x 500.

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

Чтобы использовать элемент управления DemoCalculator в приложении, его необходимо поместить в форму.

На панели элементов разверните узел Компоненты DemoCalculatorLib.

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

Перетащите элемент управления Button с панели элементов и поместите его в форму.

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

Щелкните правой кнопкой мыши элемент управления DemoCalculator и выберите пункт Свойства.

Замените значение свойства Dock на Fill .

Выберите форму, а затем разверните узел свойства Padding . Замените значение Все на 20.

Размер элемента управления DemoCalculator уменьшится в соответствии с новым значением формы Padding .

Измените размер формы, перетаскивая различные маркеры изменения размера в разные положения. Обратите внимание на то, как размер элемента управления DemoCalculator пропорционально изменяется.

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

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

Шаг 0. А вдруг получится сразу?

В настоящее время IDE, поддерживающих Windows forms, не так много — буквально одна только Visual Studio, более известная как просто "студия". Поэтому будем рассматривать создание и решение проблем именно в этой среде разработки. Первым шагом запустим студию, начнём создавать новый проект и попытаемся найти Windows forms проект для C++:

Если у вас более старая версия Visual Studio, то интерфейс будет выглядеть немного иначе, однако данная функциональность будет той же. Также не исключено, что у Вас может быть данный тип проекта для C++ (на некоторых версиях формы для C++ были доступны сразу после установки IDE). Если же у Вас, как и у нас поиск не дал нужных результатов, то переходим к следующему шагу.

Шаг 1. Создание CLR проекта

Поскольку непосредственно Windows Forms проекта у нас не оказалось, мы обхитрим студию и создадим пустой CLR проект на С++. Для этого в том же окне поиска необходимо найти и выбрать Новый CLR проект , ввести имя (если нужно, то поменять директорию расположения проекта) и немного подождать, пока студия сделает свою работу.

В результате Visual Stido создаст новый C++ CLR проект, который будет выглядеть примерно так:

Шаг 2. Добавить форму

Чтобы сделать CLR проект проектом Windows Forms, нужно просто добавить в него форму. Для этого в верхнем меню нужно выбрать Проект - Добавить новый элемент и в появившемся окне выбрать категорию Visual C++ - UI и затем выбрать Форма Windows Forms .

После данной операции нас ждёт разочарование в виде ошибки Исключение из HRESULT: 0x8000000A :

Шаг 3. Исправляем появившуюся ошибку

Данная ошибка появляется из-за того, что для создания окна формы приложению необходима основная программа, создающая форму и переключающая управление на неё, однако после добавления новой формы файл Form1.cpp предсказуемо создаётся пустым. Поэтому необходимо добавить основную программу в файл с формой:

В результате код файла Form1.cpp будет выглядеть следующим образом:

Шаг 4. Переоткрыть проект

Всё, что теперь осталось сделать — это закрыть текущее решение, а затем открыть его снова. Для этого можно закрыть саму студию, а можно выбрать в верхнем меню Файл - Закрыть решение , после чего в появившемся окне выбрать только что созданный проект и открыть его заново.

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

Выпускник МГУ им. М.В. Ломоносова

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

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

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

Компания Майкрософт предоставила в составе библиотеки классов .NET Framework огромное количество "элементов управления", которые можно помещать на формы. Освоив этот инструмент, вы сможете быстро создавать эффектные приложения.

Некоторые полезные классы из пространства имен System.Windows.Forms

Вот некоторые элементы управления, которые можно размещать на формах:

Удалите файл Form1.cs.
Замените код в файле Program.cs на код примера, с которым вы работаете.

Оба этих действия не понадобятся, если вы открываете программы с помощью команды "Открыть проект" в меню "Файл" и находите нужный проект в той папке, куда его поместили после разархивации.

Пример программы 3.3

Рассмотрим пример простейшего приложения Windows Forms. Оно всего лишь создает новую форму и выводит определенный текст в заголовок окна формы.

Пример программы 3.4

Следующий пример тоже достаточно прост, но мы делаем шаг вперед — размещаем на форме кнопку.

Пример программы 3.5

Кнопку на форму мы поместили, но при нажатии на нее ничего не происходит. Это скучно.

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

Пример программы 3.6

Мы добились успеха: наша программа умеет выполнять основные действия. Теперь добавим на форму несколько новых элементов управления, аккуратно разместим их и немного поработаем с ними. Возьмем элементы управления 4-х типов: Button, ListBox, MessageBox и PictureBox.

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