Как создать форму в visual studio 2019 c
Конструктор 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 и выберите Добавить > Ссылка на проект, чтобы открыть диалоговое окно Диспетчер ссылок.
(Если вы используете Visual Studio 2017, для открытия диалогового окна Диспетчер ссылок выберите Добавить > Ссылка.)
Перейдите на вкладку Проекты и выберите проект 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.
Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого.
Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого.
На некоторых снимках экрана в этом учебнике используется темная тема. Если вы не используете темную тему, но хотите переключиться на нее, см. страницу Персонализация интегрированной среды разработки и редактора Visual Studio.
Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio 2022, если еще не сделали этого.
Создание проекта
Откройте Visual Studio 2017.
В верхней строке меню последовательно выберите Файл > Создать > Проект.
Запустите Visual Studio.
На начальном экране выберите Создать проект.
Затем нажмите кнопку Изменить в Visual Studio Installer. Вам может быть предложено сохранить результаты работы; в таком случае сделайте это. Выберите Продолжить, чтобы установить рабочую нагрузку. После этого вернитесь к шагу 2 в процедуре Создание проекта.
В поле Имя проекта окна Настроить новый проект введите HelloWorld. Затем нажмите Создать.
Новый проект открывается в Visual Studio.
Запустите Visual Studio.
В окне запуска выберите Создание нового проекта.
Затем нажмите кнопку Изменить в Visual Studio Installer. Вам может быть предложено сохранить результаты работы; в таком случае сделайте это. Выберите Продолжить, чтобы установить рабочую нагрузку. После этого вернитесь к шагу 2 в процедуре Создание проекта.
В поле Имя проекта окна Настроить новый проект введите HelloWorld. Затем выберите Создать.
Новый проект открывается в Visual Studio.
Создание приложения
Добавление кнопки на форму
Выберите Панель элементов, чтобы открыть всплывающее окно "Панель элементов".
(Если параметр для всплывающего окна Панель элементов отсутствует, его можно открыть в строке меню. Для этого выберите Вид > Панель элементов. Либо нажмите клавиши CTRL+ALT+X.)
Выберите значок Закрепить, чтобы закрепить окно Панель элементов.
Выберите элемент управления Кнопка и перетащите его на форму.
В окне Свойства найдите Текст, измените имя с button1 на Click this и нажмите клавишу ВВОД.
(Если окно Свойства не отображается, его можно открыть в строке меню.) Для этого выберите Вид > Окно свойств. Или нажмите клавишу F4.)
В разделе Конструктор окна Свойства измените имя с button1 на btnClickThis и нажмите клавишу ВВОД.
Если список в окне Свойства был упорядочен по алфавиту, button1 появится в разделе Привязки данных.
Добавление метки на форму
Теперь, когда мы добавили элемент управления ''Кнопка'' для создания действия, давайте добавим элемент управления "Метка", куда можно отправлять текст.
Выберите элемент управления Метка в окне Панель элементов, а затем перетащите его на форму и расположите под кнопкой Нажмите это.
В разделе Конструктор или Привязки данных окна Свойства измените имя label1 на lblHelloWorld и нажмите клавишу ВВОД.
Добавление кода на форму
В окне Form1.cs [Проект] дважды щелкните кнопку Нажмите это, чтобы открыть окно Form1.cs.
(Кроме того, можно развернуть узел Form1.cs в обозревателе решений, а затем выбрать Form1.)
В окне Form1.cs после строки private void введите lblHelloWorld.Text = "Hello World!"; , как показано на следующем снимке экрана:
Запуск приложения
Будет выполнено несколько операций. В интегрированной среде разработки Visual Studio откроются окна Средства диагностики и Вывод. Кроме того, вне этой среды откроется диалоговое окно Form1. Оно будет содержать вашу кнопку Нажмите это и текст label1.
Закройте диалоговое окно Form1, чтобы завершить работу приложения.
Создание приложения
Добавление кнопки на форму
Щелкните Панель элементов, чтобы открыть всплывающее окно "Панель элементов".
(Если параметр для всплывающего окна Панель элементов отсутствует, его можно открыть в строке меню. Для этого выберите Вид > Панель элементов. Либо нажмите клавиши CTRL+ALT+X.)
Щелкните значок Закрепить, чтобы закрепить окно Панель элементов.
Выберите элемент управления Кнопка и перетащите его на форму.
В окне Свойства найдите элемент Текст, измените имя с Button1 на Click this , а затем нажмите клавишу ВВОД.
(Если окно Свойства не отображается, его можно открыть в строке меню.) Для этого выберите Вид > Окно свойств. Или нажмите клавишу F4.)
В разделе Проектирование окна Свойства измените имя с Button1 на btnClickThis , а затем нажмите клавишу ВВОД.
Если список был упорядочен по алфавиту в окне Свойства, Button1 появится в разделе (DataBindings) .
Добавление метки на форму
Теперь, когда мы добавили элемент управления ''Кнопка'' для создания действия, давайте добавим элемент управления "Метка", куда можно отправлять текст.
Выберите элемент управления Метка в окне Панель элементов, а затем перетащите его на форму и расположите под кнопкой Нажмите это.
В разделе Проект или (DataBindings) окна Свойства измените имя Label1 на lblHelloWorld и нажмите клавишу ВВОД.
Добавление кода на форму
В окне Form1.cs [Проект] дважды щелкните кнопку Нажмите это, чтобы открыть окно Form1.cs.
(Кроме того, можно развернуть узел Form1.cs в обозревателе решений, а затем выбрать Form1.)
В окне Form1.cs после строки private void введите lblHelloWorld.Text = "Hello World!"; , как показано на следующем снимке экрана:
Запуск приложения
Будет выполнено несколько операций. В интегрированной среде разработки Visual Studio откроются окна Средства диагностики и Вывод. Кроме того, вне этой среды откроется диалоговое окно Form1. Оно будет содержать вашу кнопку Нажмите это и текст Label1.
Закройте диалоговое окно Form1, чтобы завершить работу приложения.
Следующие шаги
Для получения дополнительных сведений перейдите к следующему руководству:
If you haven't already installed Visual Studio, go to the Visual Studio downloads page to install it for free.
If you haven't already installed Visual Studio, go to the Visual Studio downloads page to install it for free.
Some of the screenshots in this tutorial use the dark theme. If you aren't using the dark theme but would like to, see the Personalize the Visual Studio IDE and Editor page to learn how.
If you haven't already installed Visual Studio, go to the Visual Studio 2022 downloads page to install it for free.
Create a project
Open Visual Studio 2017.
From the top menu bar, choose File > New > Project.
Open Visual Studio.
On the start window, choose Create a new project.
After that, choose the Modify button in the Visual Studio Installer. You might be prompted to save your work; if so, do so. Next, choose Continue to install the workload. Then, return to step 2 in this "Create a project" procedure.
In the Configure your new project window, type or enter HelloWorld in the Project name box. Then, choose Create.
Visual Studio opens your new project.
Open Visual Studio.
On the start window, select Create a new project.
After that, select the Modify button in the Visual Studio Installer. You might be prompted to save your work; if so, do so. Next, select Continue to install the workload. Then, return to step 2 in this "Create a project" procedure.
In the Configure your new project window, type or enter HelloWorld in the Project name box. Then, select Create.
Visual Studio opens your new project.
Create the application
Add a button to the form
Select Toolbox to open the Toolbox fly-out window.
(If you don't see the Toolbox fly-out option, you can open it from the menu bar. To do so, View > Toolbox. Or, press Ctrl+Alt+X.)
Select the Pin icon to dock the Toolbox window.
Select the Button control and then drag it onto the form.
In the Properties window, locate Text, change the name from button1 to Click this , and then press Enter.
(If you don't see the Properties window, you can open it from the menu bar. To do so, select View > Properties Window. Or, press F4.)
In the Design section of the Properties window, change the name from button1 to btnClickThis , and then press Enter.
If you've alphabetized the list in the Properties window, button1 appears in the (DataBindings) section, instead.
Add a label to the form
Now that we've added a button control to create an action, let's add a label control to send text to.
Select the Label control from the Toolbox window, and then drag it onto the form and drop it beneath the Click this button.
In either the Design section or the (DataBindings) section of the Properties window, change the name of label1 to lblHelloWorld , and then press Enter.
Add code to the form
In the Form1.cs [Design] window, double-click the Click this button to open the Form1.cs window.
(Alternatively, you can expand Form1.cs in Solution Explorer, and then choose Form1.)
In the Form1.cs window, after the private void line, type or enter lblHelloWorld.Text = "Hello World!"; as shown in the following screenshot:
Run the application
Select the Start button to run the application.
Several things will happen. In the Visual Studio IDE, the Diagnostics Tools window will open, and an Output window will open, too. But outside of the IDE, a Form1 dialog box appears. It will include your Click this button and text that says label1.
Select the Click this button in the Form1 dialog box. Notice that the label1 text changes to Hello World!.
Close the Form1 dialog box to stop running the app.
Create the application
Add a button to the form
Choose Toolbox to open the Toolbox fly-out window.
(If you don't see the Toolbox fly-out option, you can open it from the menu bar. To do so, View > Toolbox. Or, press Ctrl+Alt+X.)
Choose the Pin icon to dock the Toolbox window.
Choose the Button control and then drag it onto the form.
In the Properties window, locate Text, change the name from Button1 to Click this , and then press Enter.
(If you don't see the Properties window, you can open it from the menu bar. To do so, choose View > Properties Window. Or, press F4.)
In the Design section of the Properties window, change the name from Button1 to btnClickThis , and then press Enter.
If you've alphabetized the list in the Properties window, Button1 appears in the (DataBindings) section, instead.
Add a label to the form
Now that we've added a button control to create an action, let's add a label control to send text to.
Select the Label control from the Toolbox window, and then drag it onto the form and drop it beneath the Click this button.
In either the Design section or the (DataBindings) section of the Properties window, change the name of Label1 to lblHelloWorld , and then press Enter.
Add code to the form
In the Form1.cs [Design] window, double-click the Click this button to open the Form1.cs window.
(Alternatively, you can expand Form1.cs in Solution Explorer, and then choose Form1.)
In the Form1.cs window, after the private void line, type or enter lblHelloWorld.Text = "Hello World!"; as shown in the following screenshot:
Run the application
Choose the Start button to run the application.
Several things will happen. In the Visual Studio IDE, the Diagnostics Tools window will open, and an Output window will open, too. But outside of the IDE, a Form1 dialog box appears. It will include your Click this button and text that says Label1.
Choose the Click this button in the Form1 dialog box. Notice that the Label1 text changes to Hello World!.
Для начала необходимо закрыть и открыть решения.
Чтобы подготовиться к выполнению данного пошагового руководства
- Если какое–либо решение уже открыто, закройте его. (В меню Файл выберите команду Закрыть решение.)
Создание новой формы Windows Forms.
Далее нам предстоит создать новую форму Windows Forms.
Чтобы создать форму Windows Forms для данного примера
В меню Файл последовательно выберите пункты Создать и Проект.
Откроется диалоговое окно Новый проект .
Для Visual C++ выберите Классическое приложение Windows.
В поле Имя задайте уникальное имя проекта (например, Walkthrough_SimpleDebug).
Visual Studio создаст новый проект и откроет новую форму в конструкторе Windows Forms. Дополнительные сведения см. в разделе Конструктор Windows Forms.
В меню Вид выберите пункт Панель элементов.
Откроется Панель элементов. См. дополнительные сведения о панели элементов.
В панели элементов щелкните элемент управления Кнопка и перетащите его на поверхность разработки формы. Опустите кнопку на форму.
В панели элементов щелкните элемент управления Текстовое поле и перетащите его на поверхность разработки формы. Бросьте Текстовое поле в форму.
На поверхности разработки формы дважды щелкните кнопку.
Появится страница кода. Курсор должен находиться в тексте button1_Click
В функции button1_Click добавьте следующий код:
В меню Сборка выберите команду Собрать решение.
Проект должен быть построен без ошибок.
Отладка формы
Теперь все готово для того, чтобы начать отладку.
Чтобы выполнить отладку формы Windows Forms, созданной для данного примера
В окне исходного кода щелкните левое поле на той же строке, в которую добавляется текст:
Появится красная точка, и текст строки будет выделен красным цветом. Красная точка представляет точку останова. Дополнительные сведения см. в разделе Точки останова. Если приложение запускается из отладчика, выполнение этого приложения будет приостановлено отладчиком на строке с помеченным кодом. После этого можно просмотреть состояние приложения и произвести его отладку.
Можно также щелкнуть правкой кнопкой мыши любую строку кода, выбрать пункт Точка останова, затем щелкнуть Вставить точку останова, чтобы добавить точку останова в эту строку.
В меню Отладка выберите команду Пуск.
Запустится форма Windows Forms.
В форме Windows Forms щелкните добавленную кнопку.
После этого в Visual Studio приложение остановится на той строке, где была задана точка останова на странице кода. Эта строка будет выделена желтым цветом. Теперь можно просматривать переменные в приложении и управлять его выполнением. В этот момент приложение остановит свое выполнение и будет ожидать действий со стороны пользователя.
В меню Отладка выберите пункт Окна, затем Контрольные значения и потом Контрольные значения 1.
Окно Контрольные значения 1 отобразит значение этой переменной в двойных кавычках, как показано ниже:
В меню Отладка выберите команду Выполнять по шагам.
Значение textBox1.Text в окне Контрольные значения 1 изменится на следующее:
Button was clicked!
В меню Отладка выберите команду Продолжить для возобновления отладки программы.
В форме Windows Forms снова нажмите кнопку.
Visual Studio снова приостановит выполнение программы.
Щелкните красную точка, представляющую точка останова.
Это действие удалит точка останова из кода программы.
В меню Отладка выберите Остановить отладку.
Присоединение к приложению Windows Form для отладки
В Visual Studio можно присоединить отладчик к выполняющемуся процессу. Если используется экспресс-выпуск, эта функция не поддерживается.
Присоединение к приложению Windows Form для отладки
В созданном ранее проекте щелкните левое поле, чтобы еще раз установить точка останова на добавленной строке:
В меню Отладка выберите команду Запуск без отладки.
Форма Windows Forms запустится из Windows, как и при двойном щелчке исполняемого файла. Отладчик не будет присоединен.
В меню Отладка выберите команду Присоединиться к процессу. (Эта команда также доступна из меню Средства.)
Откроется диалоговое окно Присоединение к процессу .
В области Доступные процессы найдите в столбце Процесс имя процесса (Walkthrough_SimpleDebug.exe) и щелкните его.
Из этого краткого руководства вы узнаете, как создать новое приложение Windows Forms с помощью Visual Studio. После создания первоначального приложения вы научитесь добавлять элементы управления и обрабатывать события. По завершении работы с этим руководством у вас будет простое приложение, добавляющее имена в список.
В этом руководстве описано следующее:
- Создание приложения Windows Forms
- Добавление элементов управления на форму
- Обработка событий элемента управления для предоставления функциональных возможностей приложения
- Запустите приложение
Предварительные требования
Создание приложения Windows Forms
Первым шагом в создании нового приложения является запуск Visual Studio и создание приложения на основе шаблона.
Запустите Visual Studio.
Выберите Создать новый проект.
В поле Поиск шаблонов введите winforms и нажмите клавишу ВВОД .
В окне Настроить новый проект задайте в качестве имени проекта значение Names и щелкните Создать.
Вы также можете сохранить проект в другую папку, изменив параметр Расположение.
Запустите Visual Studio.
Выберите Создать новый проект.
В поле Поиск шаблонов введите winforms и дождитесь появления результатов поиска.
В списке шаблонов выберите Приложение Windows Forms и щелкните Далее.
В окне Настроить новый проект задайте в поле Имя проекта значение Names и щелкните Создать.
Вы также можете сохранить проект в другую папку, изменив путь в поле Расположение.
После создания приложения Visual Studio должен открыть панель конструктора для формы по умолчанию Form1. Если конструктор форм не отображается, дважды щелкните форму в области Обозреватель решений, чтобы открыть окно конструктора.
Важные элементы среды Visual Studio
Поддержка Windows Forms в Visual Studio состоит из четырех важных компонентов, с которыми вы будете взаимодействовать при создании приложения.
Все файлы проекта, код, формы и ресурсы отображаются в этой области.
На этой панели отображаются параметры свойств, которые можно настроить в зависимости от выбранного элемента. Например, если выбрать элемент в Обозревателе решений, отобразятся параметры свойств, связанные с файлом. Если выбрать объект в конструкторе, отобразятся параметры элемента управления или формы.
Это конструктор для формы. Он является интерактивным, и на него можно перетаскивать объекты из панели элементов. Выбирая и перемещая элементы в конструкторе, можно визуально создавать пользовательский интерфейс для приложения.
Панель элементов содержит все элементы управления, которые можно добавить на форму. Чтобы добавить элемент управления на текущую форму, дважды щелкните элемент управления или перетащите его.
Добавление элементов управления на форму
Открыв конструктор форм Form1, используйте панель Область элементов, чтобы добавить на форму следующие элементы управления:
- Метка
- Кнопка
- Listbox
- Текстовое поле
Вы можете расположить и изменить размер элементов управления в соответствии со следующими настройками. Либо визуально перенесите их, чтобы они соответствовали следующему снимку экрана, либо щелкните каждый элемент управления и настройте параметры в области Свойства. Можно также щелкнуть область заголовка формы, чтобы выбрать форму.
Объект | Параметр | Значение |
---|---|---|
Form | Текст | Names |
Размер | 268, 180 | |
Label | Расположение | 12, 9 |
Текст | Names | |
Listbox | Имя | lstNames |
Расположение | 12, 27 | |
Размер | 120, 94 | |
текстовое поле; | Имя | txtName |
Расположение | 138, 26 | |
Размер | 100, 23 | |
Button | Имя | btnAdd |
Расположение | 138, 55 | |
Размер | 100, 23 | |
Текст | Add Name |
Вы должны получить в конструкторе форму, которая выглядит следующим образом.
Обработка событий
Теперь, когда в форме есть все элементы управления, необходимо обрабатывать события элементов управления, чтобы реагировать на вводимые пользователем данные. Открыв конструктор форм, выполните следующие действия.
Выберите в форме элемент управления "Кнопка".
В области Свойства щелкните значок события , чтобы вывести список событий кнопки.
Найдите событие Click и дважды щелкните его, чтобы создать обработчик событий.
Это действие добавляет следующий код в форму:
Код, помещаемый в этот обработчик, будет добавлять имя, заданное элементом управления TextBox txtName , в элемент управления ListBox lstNames . Однако мы хотим, чтобы имя удовлетворяло двум условиям: указанное имя не должно быть пустым, и его еще не должно быть в списке.
В следующем примере кода показано добавление имени в элемент управления lstNames .
Запустите приложение
Теперь, когда у нас есть код события, можно запустить приложение, нажав клавишу F5 или выбрав пункт меню Отладка>Начать отладку. Отобразится форма, и вы можете ввести имя в текстовое поле, а затем добавить его, нажав кнопку.
Читайте также: