C windows forms обучение

Уроки Windows Forms C++/C#

Создание приложения Windows Forms в MVS C++/C#

В этом разделе вы познакомитесь с тем, как делать полноценные программы: с всевозможными кнопочками, текстовыми полями, иконками, окошками и прочими элементами, которые мы все привыкли видеть. Есть огромнейшее количество всевозможных программ – web-браузеры, текстовые редакторы, переводчики, конверторы, графические редакторы, музыкальные редакторы, конструкторы компьютерных игр и многое многое прочее, и всё эти содержат форму и огромнейшее количество разных элементов. В этом разделе вы, по поэтапным урокам, вы приобретёте все необходимые навыки и опыт, что бы создать свою неповторимую программу. Сначала вам будут предоставлены уроки, в которых рассматриваются самые необходимые элементы и их свойства. Затем будут рассмотрены полноценные программы. Во многих уроках код будет предоставлен как на “С++” , так и на “С#”,который всё больше и больше становиться популярным. Но особых, радикальных различий вы не встретите. Если говорить в крации, то в “С++” свойство или метод могут вызываться стрелочкой «->» и двойным двоеточием «::», а в ”C#” всё вызывается точкой “.” И так, запускайте Microsoft Visual Studio C++\C#, нажимайте “Создать проект”, выбирайте (слева) «CLR”, далее выберите “Приложение Windows Forms”, назовите свой проект «first_lesson()» и переходите на “следующую страницу”. Если вы не знаете, как запустить сделанный проект, не используя компилятора, то посмотрите ниже. Откройте: «Документы» -> «Visual Studio 20 . .» ->«Progects»

Далее выбирайте папку с нужным вам проектом:

Далее в папке «Debug» нажмите на файл с «.exe» расширением:

Следующий урок >>

Введение в Windows Forms

Для создания графических интерфейсов с помощью платформы .NET применяются разные технологии — Window Forms, WPF, приложения для магазина Windows Store (для ОС Windows 8/8.1/10). Однако наиболее простой и удобной платформой до сих пор остается Window Forms или формы. Данное руководство ставит своей целью дать понимание принципов создания графических интерфейсов с помощью технологии WinForms и работы основных элементов управления.

Создание графического приложения

Для создания графического проекта нам потребуется среда разработки Visual Studio. Поскольку наиболее распространенная пока версия Visual Studio 2013, то для данного руководства я буду использовать бесплатную версию данной среды Visual Studio Community 2013 которую можно найти на странице https://www.visualstudio.com/en-us/products/visual-studio-community-vs.aspx.

После установки среды и всех ее компонентов, запустим Visual Studio и создадим проект графического приложения. Для этого в меню выберем пункт File (Файл) и в подменю выберем New — > Project (Создать — > Проект). После этого перед нами откроется диалоговое окно создания нового проекта:

В левой колонке выберем Windows Desktop , а в центральной части среди типов проектов — тип Windows Forms Application и дадим ему какое-нибудь имя в поле внизу. Например, назовем его HelloApp. После этого нажимаем OK.

После этого Visual Studio откроет наш проект с созданными по умолчанию файлами:

Большую часть пространства Visual Studio занимает графический дизайнер, который содержит форму будущего приложения. Пока она пуста и имеет только заголовок Form1. Справа находится окно файлов решения/проекта — Solution Explorer (Обозреватель решений). Там и находятся все связанные с нашим приложением файлы, в том числе файлы формы Form1.cs.

Внизу справа находится окно свойств — Properties. Так как у меня в данный момент выбрана форма как элемент управления, то в этом поле отображаются свойства, связанные с формой.

Теперь найдем в этом окне свойство формы Text и изменим его значение на любое другое:

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

Найдем среди элементов кнопку и, захватив ее указателем мыши, перенесем на форму:

Это визуальная часть. Теперь приступим к самому программированию. Добавим простейший код на языке C#, который бы выводил сообщение по нажатию кнопки. Для этого мы должны перейти в файл кода, который связан с этой формой. Если у нас не открыт файл кода, мы можем нажать на форму правой кнопкой мыши и в появившемся меню выбрать View Code (Посмотреть файл кода):

Однако воспользуемся другим способом, чтобы не писать много лишнего кода. Наведем указатель мыши на кнопку и щелкнем по ней двойным щелчком. Мы автоматически попадаем в файл кода Form1.cs, который выглядит так:

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

Запуск приложения

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

После запуска приложения студия компилирует его в файл с расширением exe. Найти данный файл можно, зайдя в папку проекта и далее в каталог bin/Debug или bin/Release

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

Введение в Windows Forms — пишем первую программу

В данной статье будет рассказано о том как написать простой обработчик событий на C++ для приложения Windows Forms, работающего под управления .NET Framework. Мы создадим простейшую Windows программу, которая вычисляет факториал целого числа. Для написания данной программы Вам понадобится Visual Studio 2008 Express Edition или Professional.

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

Откроем 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 и нажимаем Добавить. В данном файле будет содержаться прототип функции для вычисления факториала. Добавляем туда следующий исходный код.

Далее подключаем этот файл к проекту с помощью директивы #include – Открываем файл factr.cpp и добавляем после строчки #include «stdafx.h» следующий код.

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

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

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

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

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

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

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

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

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

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

Учебник. Начало работы с конструктором Windows Forms Tutorial: Get started with Windows Forms Designer

Конструктор Windows Forms предоставляет множество средств для создания приложений 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.
• располагать элементы управления с помощью элемента управления TableLayoutPanel; Arrange controls using a TableLayoutPanel control.
• разделять макет элемента управления с помощью элемента управления SplitContainer; 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.

В итоге вы создадите пользовательский элемент управления, используя разнообразные функции макета, которые доступны в конструкторе Windows Forms. 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

Первым шагом является создание проекта элемента управления DemoCalculator. The first step is to create the DemoCalculator control project.

Откройте Visual Studio и создайте проект категории Библиотека элементов управления Windows Forms. Open Visual Studio and create a new Windows Forms Control Library project. Задайте проекту имя DemoCalculatorLib. Name the project DemoCalculatorLib.

Чтобы переименовать файл, в обозревателе решений щелкните правой кнопкой мыши элемент UserControl1.vb или UserControl1.cs, выберите Переименовать и замените имя файла на DemoCalculator.vb или DemoCalculator.cs. 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. Чтобы переименовать все ссылки на элемент кода UserControl1, в соответствующем запросе выберите Да. Select Yes when you are asked if you want to rename all references to the code element «UserControl1».

В конструктор Windows Forms отображается поверхность конструктора для элемента управления DemoCalculator. 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

Элемент управления DemoCalculator содержит несколько элементов управления Windows Forms. The DemoCalculator control contains several Windows Forms controls. На этом этапе вы зададите расположение элементов управления с помощью конструктора Windows Forms. In this procedure, you’ll arrange the controls using the Windows Forms Designer.

В конструкторе Windows Forms увеличьте размер элемента управления DemoCalculator, выбрав маркер изменения размера в правом нижнем углу и перетащив его вниз и вправо. 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. В правом нижнем углу Visual Studio просмотрите сведения о размере и расположении элементов управления. In the lower-right corner of Visual Studio, find the size and location information for controls. Задайте элементу управления ширину 500 и высоту 400, наблюдая за сведениями о размере при изменении размера элемента управления. 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. Выберите элемент управления SplitContainer и перетащите его на поверхность конструктора. Select the SplitContainer control and drag it onto the designer surface.

Элемент SplitContainer появится на поверхности конструктора элемента управления DemoCalculator. The SplitContainer is placed on the DemoCalculator control’s designer surface.

Размер элемента управления SplitContainer автоматически устанавливается в соответствии с размером элемента управления DemoCalculator. The SplitContainer control sizes itself to the fit the size of the DemoCalculator control. В окне Свойства проверьте свойства, заданные для элемента управления SplitContainer . Look at the Properties window to see the property settings for the SplitContainer control. Найдите свойство Dock. Find the Dock property. Ему задано значение DockStyle.Fill. Это означает, что размер элемента управления SplitContainer устанавливается в соответствии с границами элемента управления DemoCalculator. Its value is DockStyle.Fill, which means the SplitContainer control will always size itself to the boundaries of the DemoCalculator control. Измените размер элемента управления DemoCalculator, чтобы проверить это поведение. Resize the DemoCalculator control to verify this behavior.

В окне Свойства замените значение свойства Dock на None . In the Properties window, change the value of the Dock property to None .

Элемент управления SplitContainer уменьшится до размера по умолчанию и больше не будет меняться при изменении размера элемента управления DemoCalculator. The SplitContainer control shrinks to its default size and no longer follows the size of the DemoCalculator control.

Щелкните глиф смарт-тега () в правом верхнем углу элемента управления SplitContainer . Select the smart tag glyph () on the upper-right corner of the SplitContainer control. Выберите Закрепить в родительском контейнере, чтобы присвоить свойству Dock значение Fill . Select Dock in Parent Container to set the Dock property to Fill .

Элемент управления SplitContainer закрепится по границам элемента управления DemoCalculator. The SplitContainer control docks to the DemoCalculator control’s boundaries.

Для некоторых элементов управления доступны смарт-теги, упрощающие проектирование. Several controls offer smart tags to facilitate design. Дополнительные сведения см. в разделе Пошаговое руководство: выполнение типичных задач с помощью смарт-тегов в элементах управления Windows Forms. 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.

SplitContainer разделяет элемент управления DemoCalculator на две панели с разделяющей их границей, которую можно перемещать. 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.

В окне Свойства замените значение свойства BorderStyle на Fixed3D . In the Properties window, change the value of the BorderStyle property to Fixed3D .

На панели элементов выберите узел Стандартные элементы управления, чтобы открыть его. In Toolbox, select the Common Controls node to open it. Выберите элемент управления ListView и перетащите его на правую панель элемента управления SplitContainer . Select the ListView control and drag it into the right panel of the SplitContainer control.

Выберите глиф смарт-тега элемента управления ListView . Select the ListView control’s smart tag glyph. На панели смарт-тегов замените значение параметра View на Details . In the smart tag panel, change the View setting to Details .

На панели смарт-тегов выберите Изменить столбцы. In the smart tag panel, select Edit Columns.

Откроется диалоговое окно Редактор коллекции ColumnHeader. The ColumnHeader Collection Editor dialog box opens.

В диалоговом окне Редактор коллекции ColumnHeader выберите Добавить, чтобы добавить столбец в элемент управления ListView . In the ColumnHeader Collection Editor dialog box, select Add to add a column to the ListView control. Измените значение свойства элемента управления Text на Журнал. 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.

С панели элементов узла Контейнеры перетащите элемент управления TableLayoutPanel на левую панель элемента управления SplitContainer . From the Containers node Toolbox, drag a TableLayoutPanel control into the left panel of the SplitContainer control.

Элемент управления TableLayoutPanel отобразится на поверхности конструктора с открытой панелью смарт-тегов. The TableLayoutPanel control appears on the designer surface with its smart tag panel open. Элемент управления TableLayoutPanel упорядочивает свои дочерние элементы управления в сетке. The TableLayoutPanel control arranges its child controls in a grid. Элемент управления TableLayoutPanel будет содержать экран и кнопки элемента управления DemoCalculator. The TableLayoutPanel control will hold the DemoCalculator control’s display and buttons. Дополнительные сведения см. в разделе Пошаговое руководство: упорядочение элементов управления в формах Windows Forms с помощью элемента TableLayoutPanel. 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. Параметру Процент задайте значение 20. 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. Параметру Процент задайте значение 20. 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.

В окне Свойства замените значение свойства Dock на Fill . In the Properties window, change the value of the Dock property to Fill .

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

Теперь, когда макет элемента управления настроен, можно добавить в элемент управления DemoCalculator кнопки и экран. Now that the layout of the control is set up, you can populate the DemoCalculator control with buttons and a display.

На панели элементов выберите значок элемента управления TextBox . In Toolbox, select the TextBox control icon.

Элемент управления TextBox помещается в первую ячейку элемента управления TableLayoutPanel . A TextBox control is placed in the first cell of the TableLayoutPanel control.

В окне Свойства замените значение свойства ColumnSpan элемента управления TextBox на 5. In the Properties window, change the value of the TextBox control’s ColumnSpan property to 5.

Элемент управления TextBox переместится в центр своей строки. The TextBox control moves to a position that is centered in its row.

Замените значение свойства Anchor элемента управления TextBox на Left , Right . Change the value of the TextBox control’s Anchor property to Left , Right .

Элемент управления TextBox расширится по горизонтали, заняв все пять столбцов. The TextBox control expands horizontally to span all five columns.

Измените значение свойства TextBox элемента управления TextAlign на Right . Change the value of the TextBox control’s TextAlign property to Right .

В окне Свойства разверните узел свойства Font . In the Properties window, expand the Font property node. Задайте значение 14 для Size и true для Bold у элемента управления TextBox . Set Size to 14, and set Bold to true for the TextBox control.

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

На панели элементов выберите значок Button . In Toolbox, select the Button icon.

Элемент управления Button разместится в следующей свободной ячейке элемента управления TableLayoutPanel . A Button control is placed in the next open cell of the TableLayoutPanel control.

На панели элементов выберите Button еще четыре раза, чтобы заполнить вторую строку элемента управления TableLayoutPanel . In Toolbox, select the Button icon four more times to populate the second row of the TableLayoutPanel control.

Выберите все пять элементов управления Button , удерживая нажатой клавишу SHIFT. Select all five Button controls by selecting them while holding down the Shift key. Нажмите клавиши CTRL+C, чтобы скопировать элементы управления Button в буфер обмена. Press Ctrl+C to copy the Button controls to the clipboard.

Трижды нажмите сочетание клавиш CTRL+V, чтобы вставить скопированные элементы управления Button в оставшиеся строки элемента управления TableLayoutPanel . Press Ctrl+V three times to paste copies of the Button controls into the remaining rows of the TableLayoutPanel control.

Выберите все 20 элементов управления Button , удерживая нажатой клавишу SHIFT. Select all 20 Button controls by selecting them while holding down the Shift key.

В окне Свойства замените значение свойства Dock на Fill . In the Properties window, change the value of the Dock property to Fill .

Все элементы управления Button закрепятся в своих ячейках. All the Button controls dock to fill their containing cells.

В окне Свойства разверните узел свойства Margin . In the Properties window, expand the Margin property node. Для All задайте значение 5. Set the value of All to 5.

Всем элементам управления Button задается меньший размер, чтобы увеличить поля между ними. All the Button controls are sized smaller to create a larger margin between them.

Выберите button10 и button20, после чего нажмите клавишу DELETE, чтобы удалить их из макета. Select button10 and button20, and then press Delete to remove them from the layout.

Выберите button5 и button15, после чего замените значение их свойства RowSpan на 2. Select button5 and button15, and then change the value of their RowSpan property to 2. Это будут кнопки очистки и = для элемента управления DemoCalculator. 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.

В этом окне структура элемента управления DemoCalculator и его составных элементов управления представлена в виде дерева. The Document Outline window shows a tree view of the DemoCalculator control and its constituent controls. Дочерние элементы управления контейнерных элементов управления, таких как SplitContainer , отображаются в виде подузлов дерева. 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.

В окне Структура документа щелкните правой кнопкой мыши элемент button1, чтобы выбрать его, после чего щелкните Переименовать. In the Document Outline window, right-click button1, and then select Rename. Замените его имя на sevenButton. Change its name to sevenButton.

В окне Структура документа замените имена элементов управления Button , заданные конструктором, на имена для рабочей среды согласно следующему списку: Using the Document Outline window, rename the Button controls from the designer-generated name to the production name according to the following list:

button1 на sevenButton; button1 to sevenButton

button2 на eightButton; button2 to eightButton

button3 на nineButton; button3 to nineButton

button4 на divisionButton; button4 to divisionButton

button5 на clearButton; button5 to clearButton

button6 на fourButton; button6 to fourButton

button7 на fiveButton; button7 to fiveButton

button8 на sixButton; button8 to sixButton

button9 на multiplicationButton; button9 to multiplicationButton

button11 на oneButton; button11 to oneButton

button12 на twoButton; button12 to twoButton

button13 на threeButton; button13 to threeButton

button14 на subtractionButton; button14 to subtractionButton

button15 на equalsButton; button15 to equalsButton

button16 на zeroButton; button16 to zeroButton

button17 на changeSignButton; button17 to changeSignButton

button18 на decimalButton; button18 to decimalButton

button19 на additionButton; button19 to additionButton

С помощью окон Структура документа и Свойства измените значения свойства Text для каждого имени элемента управления Button согласно следующему списку: Using the Document Outline and Properties windows, change the Text property value for each Button control name according to the following list:

для элемента управления sevenButton замените свойство текста на 7; Change the sevenButton control text property to 7

для элемента управления eightButton замените свойство текста на 8; Change the eightButton control text property to 8

для элемента управления nineButton замените свойство текста на 9; Change the nineButton control text property to 9

для элемента управления divisionButton замените свойство текста на / (косая черта); Change the divisionButton control text property to / (forward slash)

для элемента управления clearButton замените свойство текста на Clear; Change the clearButton control text property to Clear

для элемента управления fourButton замените свойство текста на 4; Change the fourButton control text property to 4

для элемента управления fiveButton замените свойство текста на 5; Change the fiveButton control text property to 5

для элемента управления sixButton замените свойство текста на 6; Change the sixButton control text property to 6

для элемента управления multiplicationButton замените свойство текста на * (звездочка); Change the multiplicationButton control text property to * (asterisk)

для элемента управления oneButton замените свойство текста на 1; Change the oneButton control text property to 1

для элемента управления twoButton замените свойство текста на 2; Change the twoButton control text property to 2

для элемента управления threeButton замените свойство текста на 3; Change the threeButton control text property to 3

для элемента управления subtractionButton замените свойство текста на — (дефис); Change the subtractionButton control text property to — (hyphen)

для элемента управления equalsButton замените свойство текста на = (знак равенства); Change the equalsButton control text property to = (equals sign)

для элемента управления zeroButton замените свойство текста на 0; Change the zeroButton control text property to 0

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

для элемента управления decimalButton замените свойство текста на . Change the decimalButton control text property to . (точка); (period)

для элемента управления additionButton замените свойство текста на + (знак «плюс»); Change the additionButton control text property to + (plus sign)

На поверхности конструктора выберите все элементы управления Button , удерживая нажатой клавишу SHIFT. On the designer surface, select all the Button controls by selecting them while holding down the Shift key.

В окне Свойства разверните узел свойства Font . In the Properties window, expand the Font property node. Задайте значение 14 для Size и true для Bold у всех элементов управления Button . Set Size to 14, and set Bold to true for all the Button controls.

На этом разработка элемента управления DemoCalculator завершена. This completes the design of the DemoCalculator control. Остается только добавить логику калькулятора. All that remains is to provide the calculator logic.

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

Кнопки в элементе управления DemoCalculator имеют обработчики событий, которые можно использовать для реализации большей части логики калькулятора. The buttons on the DemoCalculator control have event handlers that can be used to implement much of the calculator logic. Конструктор Windows Forms позволяет реализовать заглушки всех обработчиков событий для всех кнопок одним выбором. The Windows Forms Designer enables you to implement the stubs of all the event handlers for all the buttons with one selection.

На поверхности конструктора выберите все элементы управления Button , удерживая нажатой клавишу SHIFT. On the designer surface, select all the Button controls by selecting them while holding down the Shift key.

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

В редакторе кода откроются обработчики событий, созданные конструктором. The Code Editor opens to the event handlers generated by the designer.

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

Поскольку элемент управления DemoCalculator наследуется от класса UserControl, его поведение можно проверить с помощью Контейнера для тестирования пользовательских элементов управления. Because the DemoCalculator control inherits from the UserControl class, you can test its behavior with the UserControl Test Container. Дополнительные сведения см. в разделе Практическое руководство. Тестирование поведения элемента UserControl во время выполнения. For more information, see How to: Test the run-time behavior of a UserControl.

Нажмите клавишу F5, чтобы собрать и запустить элемент управления DemoCalculator в Контейнере для тестирования пользовательских элементов управления. Press F5 to build and run the DemoCalculator control in the UserControl Test Container.

Выберите границу между панелями SplitContainer и перетащите ее влево и вправо. Select the border between the SplitContainer panels and drag it left and right. Размеры элемента TableLayoutPanel и всех его дочерних элементов управления будут изменяться в соответствии с доступным пространством. 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

Элемент управления DemoCalculator можно использовать в других составных элементах управления или в форме. 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.

Создайте проект Приложение Windows Forms с именем DemoCalculatorTest. Create a new Windows Forms Application project and name it DemoCalculatorTest.

В обозревателе решений щелкните правой кнопкой мыши проект DemoCalculatorTest и выберите Добавить ссылку, чтобы открыть диалоговое окно Добавление ссылки. In Solution Explorer, right-click the DemoCalculatorTest project, and then select Add Reference to open the Add Reference dialog box.

Перейдите на вкладку Проекты и выберите проект DemoCalculatorLib, чтобы добавить ссылку на тестовый проект. Go to the Projects tab, and then select the DemoCalculatorLib project to add the reference to the test project.

В обозревателе решений щелкните правой кнопкой мыши DemoCalculatorTest и выберите пункт Назначить запускаемым проектом. In Solution Explorer, right-click DemoCalculatorTest, and then select Set as StartUp Project.

В конструкторе Windows Forms увеличьте размер формы примерно до 700 x 500. In the Windows Forms Designer, increase the size of the form to about 700 x 500.

Использование элемента управления в макете формы Use the control in the form’s layout

Чтобы использовать элемент управления DemoCalculator в приложении, его необходимо поместить в форму. To use the DemoCalculator control in an application, you need to place it on a form.

На панели элементов разверните узел Компоненты DemoCalculatorLib. In Toolbox, expand the DemoCalculatorLib Components node.

Перетащите элемент управления DemoCalculator с панели элементов в форму. 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. Линии привязки указывают расстояние свойства Padding формы и свойства Margin элемента управления. 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.

Перетащите элемент управления Button с панели элементов и поместите его в форму. Drag a Button control from Toolbox and drop it onto the form.

Перемещайте элемент управления Button по элементу управления DemoCalculator, чтобы определить, где отображаются линии привязки. 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. По завершении удалите элемент управления Button . Delete the Button control when you’re finished.

Щелкните правой кнопкой мыши элемент управления DemoCalculator и выберите пункт Свойства. Right-click the DemoCalculator control, and then select Properties.

Замените значение свойства Dock на Fill . Change the value of the Dock property to Fill .

Выберите форму, а затем разверните узел свойства Padding . Select the form, and then expand the Padding property node. Замените значение Все на 20. Change the value of All to 20.

Размер элемента управления DemoCalculator уменьшится в соответствии с новым значением формы Padding . 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. Обратите внимание на то, как размер элемента управления DemoCalculator пропорционально изменяется. 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. В дальнейшем можно расширить его функциональность, реализовав логику калькулятора, а затем опубликовать приложение с помощью ClickOnce. To continue, you can extend its functionality by implementing the calculator logic, then publish the app using ClickOnce. Вы также можете ознакомиться с руководством по созданию средства просмотра рисунков с помощью Windows Forms. Or, continue on to a different tutorial where you create a picture viewer using Windows Forms.