Microsoft visual studio конструктор

Обновлено: 28.04.2024

Конструктор 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.

The Windows Forms Designer provides many tools for building Windows Forms applications. This article illustrates how to build an app using the various tools provided by the designer, including the following tasks:

Arrange controls using snaplines.
Accomplish designer tasks using smart tags.
Set margins and padding for controls.
Arrange controls using a TableLayoutPanel control.
Partition your control’s layout by using a SplitContainer control.
Navigate your layout with the Document Outline window.
Position controls with the size and location information display.
Set property values using the Properties window.

When you're finished, you'll have a custom control that's been assembled using many of the layout features available in the Windows Forms Designer. This control implements the user interface (UI) for a simple calculator. The following image shows the general layout of the calculator control:

Create the custom control project

The first step is to create the DemoCalculator control project.

Open Visual Studio and create a new Windows Forms Control Library project. Name the project DemoCalculatorLib.

To rename the file, in Solution Explorer, right-click UserControl1.vb or UserControl1.cs, select Rename, and change the file name to DemoCalculator.vb or DemoCalculator.cs. Select Yes when you are asked if you want to rename all references to the code element "UserControl1".

The Windows Forms Designer shows the designer surface for the DemoCalculator control. In this view, you can graphically design the appearance of the control by selecting controls and components from Toolbox and placing them on the designer surface. For more information about custom controls, see Varieties of custom controls.

Design the control layout

The DemoCalculator control contains several Windows Forms controls. In this procedure, you'll arrange the controls using the Windows Forms Designer.

In the Windows Forms Designer, change the DemoCalculator control to a larger size by selecting the sizing handle in the lower-right corner and dragging it down and to the right. In the lower-right corner of Visual Studio, find the size and location information for controls. Set the size of the control to width 500 and height 400 by watching the size information as you resize the control.

In Toolbox, select the Containers node to open it. Select the SplitContainer control and drag it onto the designer surface.

The SplitContainer is placed on the DemoCalculator control's designer surface.

The SplitContainer control sizes itself to the fit the size of the DemoCalculator control. Look at the Properties window to see the property settings for the SplitContainer control. Find the Dock property. Its value is DockStyle.Fill, which means the SplitContainer control will always size itself to the boundaries of the DemoCalculator control. Resize the DemoCalculator control to verify this behavior.

In the Properties window, change the value of the Dock property to None .

The SplitContainer control shrinks to its default size and no longer follows the size of the DemoCalculator control.

Select the smart tag glyph () on the upper-right corner of the SplitContainer control. Select Dock in Parent Container to set the Dock property to Fill .

The SplitContainer control docks to the DemoCalculator control's boundaries.

Several controls offer smart tags to facilitate design. For more information, see Walkthrough: Perform common tasks using Smart Tags on Windows Forms controls.

Select the vertical border between the panels and drag it to the right, so that most of the space is taken by the left panel.

The SplitContainer divides the DemoCalculator control into two panels with a movable border separating them. The panel on the left will hold the calculator buttons and display, and the panel on the right will show a record of the arithmetic operations performed by the user.

In the Properties window, change the value of the BorderStyle property to Fixed3D .

In Toolbox, select the Common Controls node to open it. Select the ListView control and drag it into the right panel of the SplitContainer control.

Select the ListView control's smart tag glyph. In the smart tag panel, change the View setting to Details .

In the smart tag panel, select Edit Columns.

The ColumnHeader Collection Editor dialog box opens.

In the ColumnHeader Collection Editor dialog box, select Add to add a column to the ListView control. Change the value of the column's Text property to History. Select OK to create the column.

In the smart tag panel, select Dock in Parent Container, and then select the smart tag glyph to close the smart tag panel.

From the Containers node Toolbox, drag a TableLayoutPanel control into the left panel of the SplitContainer control.

The TableLayoutPanel control appears on the designer surface with its smart tag panel open. The TableLayoutPanel control arranges its child controls in a grid. The TableLayoutPanel control will hold the DemoCalculator control's display and buttons. For more information, see Walkthrough: Arrange controls using a TableLayoutPanel.

Select Edit Rows and Columns on the smart tag panel.

The Column and Row Styles dialog box opens.

Select the Add button until five columns are displayed. Select all five columns, and then select Percent in the Size Type box. Set the Percent value to 20. This sets each column to the same width.

Under Show, select Rows.

Select Add until five rows are displayed. Select all five rows, and the select Percent in the Size Type box. Set the Percent value to 20. This sets each row to the same height.

Select OK to accept your changes, and then select the smart tag glyph to close the smart tag panel.

In the Properties window, change the value of the Dock property to Fill .

Populate the control

Now that the layout of the control is set up, you can populate the DemoCalculator control with buttons and a display.

In Toolbox, select the TextBox control icon.

A TextBox control is placed in the first cell of the TableLayoutPanel control.

In the Properties window, change the value of the TextBox control's ColumnSpan property to 5.

The TextBox control moves to a position that is centered in its row.

Change the value of the TextBox control's Anchor property to Left , Right .

The TextBox control expands horizontally to span all five columns.

Change the value of the TextBox control's TextAlign property to Right .

In the Properties window, expand the Font property node. Set Size to 14, and set Bold to true for the TextBox control.

Select the TableLayoutPanel control.

In Toolbox, select the Button icon.

A Button control is placed in the next open cell of the TableLayoutPanel control.

In Toolbox, select the Button icon four more times to populate the second row of the TableLayoutPanel control.

Select all five Button controls by selecting them while holding down the Shift key. Press Ctrl+C to copy the Button controls to the clipboard.

Press Ctrl+V three times to paste copies of the Button controls into the remaining rows of the TableLayoutPanel control.

Select all 20 Button controls by selecting them while holding down the Shift key.

In the Properties window, change the value of the Dock property to Fill .

All the Button controls dock to fill their containing cells.

In the Properties window, expand the Margin property node. Set the value of All to 5.

All the Button controls are sized smaller to create a larger margin between them.

Select button10 and button20, and then press Delete to remove them from the layout.

Select button5 and button15, and then change the value of their RowSpan property to 2. These will be the Clear and = buttons for the DemoCalculator control.

Use the Document Outline window

When your control or form is populated with several controls, you may find it easier to navigate your layout with the Document Outline window.

On the menu bar, choose View > Other Windows > Document Outline.

The Document Outline window shows a tree view of the DemoCalculator control and its constituent controls. Container controls like the SplitContainer show their child controls as subnodes in the tree. You can also rename controls in place using the Document Outline window.

In the Document Outline window, right-click button1, and then select Rename. Change its name to sevenButton.

Using the Document Outline window, rename the Button controls from the designer-generated name to the production name according to the following list:

button1 to sevenButton

button2 to eightButton

button3 to nineButton

button4 to divisionButton

button5 to clearButton

button6 to fourButton

button7 to fiveButton

button8 to sixButton

button9 to multiplicationButton

button11 to oneButton

button12 to twoButton

button13 to threeButton

button14 to subtractionButton

button15 to equalsButton

button16 to zeroButton

button17 to changeSignButton

button18 to decimalButton

button19 to additionButton

Using the Document Outline and Properties windows, change the Text property value for each Button control name according to the following list:

Change the sevenButton control text property to 7

Change the eightButton control text property to 8

Change the nineButton control text property to 9

Change the divisionButton control text property to / (forward slash)

Change the clearButton control text property to Clear

Change the fourButton control text property to 4

Change the fiveButton control text property to 5

Change the sixButton control text property to 6

Change the multiplicationButton control text property to * (asterisk)

Change the oneButton control text property to 1

Change the twoButton control text property to 2

Change the threeButton control text property to 3

Change the subtractionButton control text property to - (hyphen)

Change the equalsButton control text property to = (equals sign)

Change the zeroButton control text property to 0

Change the changeSignButton control text property to +/-

Change the decimalButton control text property to . (period)

Change the additionButton control text property to + (plus sign)

On the designer surface, select all the Button controls by selecting them while holding down the Shift key.

In the Properties window, expand the Font property node. Set Size to 14, and set Bold to true for all the Button controls.

This completes the design of the DemoCalculator control. All that remains is to provide the calculator logic.

Implement event handlers

The buttons on the DemoCalculator control have event handlers that can be used to implement much of the calculator logic. The Windows Forms Designer enables you to implement the stubs of all the event handlers for all the buttons with one selection.

On the designer surface, select all the Button controls by selecting them while holding down the Shift key.

Select one of the Button controls.

The Code Editor opens to the event handlers generated by the designer.

Test the control

Because the DemoCalculator control inherits from the UserControl class, you can test its behavior with the UserControl Test Container. For more information, see How to: Test the run-time behavior of a UserControl.

Press F5 to build and run the DemoCalculator control in the UserControl Test Container.

Select the border between the SplitContainer panels and drag it left and right. The TableLayoutPanel and all its child controls resize themselves to fit in the available space.

When you are finished testing the control, select Close.

Use the control on a form

The DemoCalculator control can be used in other composite controls or on a form. The following procedure describes how to use it.

Create the project

The first step is to create the application project. You'll use this project to build the application that shows your custom control.

Create a new Windows Forms Application project and name it DemoCalculatorTest.

In Solution Explorer, right-click the DemoCalculatorTest project, and then select Add > Project Reference to open the Reference Manager dialog box.

(If you're using Visual Studio 2017, select Add > Reference to open the Reference Manager dialog box.)

Go to the Projects tab, and then select the DemoCalculatorLib project to add the reference to the test project.

In Solution Explorer, right-click DemoCalculatorTest, and then select Set as StartUp Project.

In the Windows Forms Designer, increase the size of the form to about 700 x 500.

Use the control in the form's layout

To use the DemoCalculator control in an application, you need to place it on a form.

In Toolbox, expand the DemoCalculatorLib Components node.

Drag the DemoCalculator control from Toolbox onto your form. Move the control to the upper-left corner of the form. When the control is close to the form's borders, snaplines will appear. Snaplines indicate the distance of the form's Padding property and the control's Margin property. Position the control at the location indicated by the snaplines.

Drag a Button control from Toolbox and drop it onto the form.

Move the Button control around the DemoCalculator control and observe where the snaplines appear. You can align your controls precisely and easily using this feature. Delete the Button control when you're finished.

Right-click the DemoCalculator control, and then select Properties.

Change the value of the Dock property to Fill .

Select the form, and then expand the Padding property node. Change the value of All to 20.

The size of the DemoCalculator control is reduced to accommodate the new Padding value of the form.

Resize the form by dragging the various sizing handles to different positions. Observe how the DemoCalculator control is resized to fit.

Next steps

This article has demonstrated how to construct the user interface for a simple calculator. To continue, you can extend its functionality by implementing the calculator logic, then publish the app using ClickOnce. Or, continue on to a different tutorial where you create a picture viewer using Windows Forms.

Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого.

На некоторых снимках экрана в этом учебнике используется темная тема. Если вы не используете темную тему, но хотите переключиться на нее, см. страницу Персонализация интегрированной среды разработки и редактора Visual Studio.

Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio 2022, если еще не сделали этого.

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

Запустите Visual Studio.

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

Затем нажмите кнопку Изменить в Visual Studio Installer. Вам может быть предложено сохранить результаты работы; в таком случае сделайте это. Выберите Продолжить, чтобы установить рабочую нагрузку. После этого вернитесь к шагу 2 в процедуре Создание проекта.

В поле Имя проекта окна Настроить новый проект введите HelloWorld. Затем нажмите Создать.

Новый проект открывается в Visual Studio.

Запустите Visual Studio.

В окне запуска выберите Создание нового проекта.

В поле Имя проекта окна Настроить новый проект введите HelloWorld. Затем выберите Создать.

Новый проект открывается в Visual Studio.

Создание приложения

Добавление кнопки на форму

Выберите Панель элементов, чтобы открыть всплывающее окно "Панель элементов".

(Если параметр всплывающего меню панели элементов не отображается, его можно открыть в строке меню. Для этого просмотрите>панель элементов. Или нажмите клавиши CTRL+ALT+X.)

Выберите значок Закрепить, чтобы закрепить окно Панель элементов.

Выберите элемент управления Кнопка и перетащите его на форму.

В окне Свойства найдите Текст, измените имя с button1 на Click this и нажмите клавишу ВВОД.

(Если окно "Свойства " не отображается, его можно открыть в строке меню. Для этого выберите окно "Просмотр>свойств". Или нажмите клавишу F4.)

В разделе Конструктор окна Свойства измените имя с button1 на btnClickThis и нажмите клавишу ВВОД.

Если список в окне Свойства был упорядочен по алфавиту, button1 появится в разделе Привязки данных.

Добавление метки на форму

Теперь, когда мы добавили элемент управления ''Кнопка'' для создания действия, давайте добавим элемент управления "Метка", куда можно отправлять текст.

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

В разделе Конструктор или Привязки данных окна Свойства измените имя label1 на lblHelloWorld и нажмите клавишу ВВОД.

Добавление кода на форму

В окне Form1.cs [Design] дважды щелкните эту кнопку, чтобы открыть окно Form1.cs .

(Кроме того, можно развернуть узел Form1.cs в обозревателе решений, а затем выбрать Form1.)

В окне Form1.cs после строки private void введите lblHelloWorld.Text = "Hello World!"; , как показано на следующем снимке экрана:

Выполнение приложения

Будет выполнено несколько операций. В интегрированной среде разработки Visual Studio откроются окна Средства диагностики и Вывод. Кроме того, вне этой среды откроется диалоговое окно Form1. Оно будет содержать вашу кнопку Нажмите это и текст label1.

Закройте диалоговое окно Form1, чтобы завершить работу приложения.

Создание приложения

Добавление кнопки на форму

Щелкните Панель элементов, чтобы открыть всплывающее окно "Панель элементов".

Щелкните значок Закрепить, чтобы закрепить окно Панель элементов.

Выберите элемент управления Кнопка и перетащите его на форму.

В окне Свойства найдите элементТекст, измените имя с Button1 на Click this , а затем нажмите клавишу ВВОД.

В разделе Проектирование окна Свойства измените имя с Button1 на btnClickThis , а затем нажмите клавишу ВВОД.

Если список был упорядочен по алфавиту в окне Свойства, Button1 появится в разделе (DataBindings) .

Добавление метки на форму

В разделе Проект или (DataBindings) окна Свойства измените имя Label1 на lblHelloWorld и нажмите клавишу ВВОД.

Добавление кода на форму

В окне Form1.cs [Design] дважды щелкните эту кнопку, чтобы открыть окно Form1.cs .

(Кроме того, можно развернуть узел Form1.cs в обозревателе решений, а затем выбрать Form1.)

В окне Form1.cs после строки private void введите lblHelloWorld.Text = "Hello World!"; , как показано на следующем снимке экрана:

Выполнение приложения

Закройте диалоговое окно Form1, чтобы завершить работу приложения.

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

Для получения дополнительных сведений перейдите к следующему руководству:

Что? Этот компонент позволяет немедленно создать код для нового конструктора в классе.

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

Зачем? Вы можете объявить конструктор до его использования. Но этот компонент автоматически создаст его с соответствующими параметрами. Кроме того, изменение существующего конструктора требует обновления всех мест вызова, пока этот компонент не обновит их автоматически.

Как? Конструктор можно создать несколькими способами:

Поместите курсор в любую пустую строку в классе:

Затем выполните одно из следующих действий.

Клавиатура

Нажмите CTRL+., чтобы открыть меню Быстрые действия и рефакторинг.

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

Выберите Создать конструктор в раскрывающемся меню.

Откроется диалоговое окно Выбор элементов.

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

Конструктор создается с учетом указанных параметров.

Поместите курсор на экземпляр.

Нажмите CTRL+., чтобы открыть меню Быстрые действия и рефакторинг.

Выберите Создать конструктор в (со свойствами) .

Выделите элементы, которые вы хотите добавить в созданный конструктор:

Затем выполните одно из следующих действий.

Клавиатура

Нажмите CTRL+., чтобы открыть меню Быстрые действия и рефакторинг.

Мышь

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

Выберите Создать конструктор "TypeName(. )" в раскрывающемся меню.

Конструктор создается с учетом выбранных параметров.

Поместите курсор в строку с красной волнистой линией. Она указывает вызов несуществующего конструктора.

Затем выполните одно из следующих действий.

Клавиатура

Нажмите CTRL+., чтобы открыть меню Быстрые действия и рефакторинг.

Мышь

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

Выберите Создать конструктор в "TypeName" в раскрывающемся меню.

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

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

Добавьте параметр в вызов существующего конструктора.

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

Затем выполните одно из следующих действий.

Клавиатура

Нажмите CTRL+., чтобы открыть меню Быстрые действия и рефакторинг.

Мышь

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

Выберите Добавить параметр в "TypeName(. )" в раскрывающемся меню.

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

Вы также можете добавить параметр к существующему методу. Дополнительные сведения см. в статье Добавление параметра в метод.

Найдите существующий конструктор и добавьте параметр:

Поместите курсор внутри добавленного параметра.

Затем выполните одно из следующих действий:

Клавиатура

Нажмите CTRL+., чтобы открыть меню Быстрые действия и рефакторинг.

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

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

Свойство или поле объявляется и автоматически называется в соответствии с вашими типами. Также добавляется строка кода для инициализации поля или свойства в теле конструктора.

Из этого краткого руководства вы узнаете, как создать новое приложение 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 или выбрав пункт меню Отладка>Начать отладку. Отобразится форма, и вы можете ввести имя в текстовое поле, а затем добавить его, нажав кнопку.

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