Панель Toolbox в Visual Studio

Одно из основных преимуществ над другими интегрированными средами разработки состоит в том, что компания Microsoft предлагает пользователям реальную возможность перемещать элементы при проектировании как веб-, так и сложных клиентских приложений. Все эти элементы размещены в окне Toolbox ( Ctrl+Alt+X ), доступ к которому можно получить посредством меню View:

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

Окно Toolbox содержит все доступные компоненты для активного в данный момент документа, открытого в главном рабочем окне. Ими могут быть визуальные компоненты, например кнопки и текстовые поля; невидимые, сервисные объекты, например таймеры или регистрационные журналы системных событий; и даже элементы дизайна, такие как классы и интерфейсные объекты, используемые в инструменте Class Designer.

Система Visual Studio 2013 группирует доступные компоненты, а не смешивает их в одну кучу. Такая группировка по умолчанию позволяет проще находить требуемые элементы контроля; например, компоненты для работы с данными содержатся в отдельной группе Data.

По умолчанию эти группы представлены в виде списка. Каждый компонент представлен с помощью своей собственной пиктограммы и имеет название. Этим новая версия системы Visual Studio 2013 отличается от старого способа представления доступных объектов, в которых окно Toolbox просто представляло собой список пиктограмм, а пользователь должен был угадать, каким компонентам они соответствуют. Вы можете изменять представление каждой группы элементов управления по отдельности. Для этого щелкните правой кнопкой мыши в любом месте области, где расположена группа, и снимите флажок с команды List View в контекстном меню.

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

В левом верхнем углу на самом первом рисунке показана группа GettingStarted Controls с единственным компонентом SampleButton. По существу, строка «GettingStarted» — это имя проекта WPF. Он содержит элемент управления SampleButton. Когда вы начинаете создавать свои собственные компоненты или элементы управления, то, вместо того, чтобы предоставить вам вручную создавать новую закладку и повторять весь процесс добавления каждого элемента, система Visual Studio 2013 автоматически просматривает все проекты вашего решения. Как только компоненты или элементы управления будут идентифицированы (т.е. будет распознан любой класс, реализующий компонент System.ComponentModel.IComponent или System.Windows.FrameworkElement для программной модели WPF), в проекте будет создана новая закладка, на которую будут добавлены соответствующие элементы с пиктограммами и именами классов, заданными по умолчанию, в данном случае SampleButton. Когда вы используете компонент, в области невидимых элементов появляется соответствующая пиктограмма.

Система Visual Studio 2013 просматривает все проекты в вашем решении и перед, и после построения решения. Если решение состоит из многих проектов, то этот процесс может занять много времени. В таком случае следует подумать об отключении этой возможности, установив свойство AutoToolboxPopulate узла Windows Forms Designer в диалоговом окне Options равным false (Tools —> Options).

Для того чтобы настроить внешний вид элементов в окне Toolbox, добавьте в проект ваш компонент или элемент в виде побитового изображения размером 16×16 пикселей. Затем выберите вновь вставленное побитовое изображение в окно Solution Explorer и перейдите к окну Properties. Убедитесь, что свойство Build установлено равным Embedded Resource. Теперь достаточно связать атрибут вашего элемента управления с атрибутом изображения ToolboxBitmap.

Следует отметить, что при настройке окна Toolbox и внешнего вида элементов управления в программной модели Windows Presentation Foundation (WPF) используется понятие хранилища метаданных, а не атрибуты. Обычно это приводит к появлению дополнительных сборок, которые можно использовать для уточнения внешнего вида элементов управления как в системе Visual Studio 2013, так и в системе Expression Blend.

Настройка компонентов

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

Перемещение отдельного компонента не составляет труда. Найдите его в окне Toolbox, щелкните на нем и перетащите в новое место. Когда достигнете пункта назначения, отпустите кнопку мыши, и компонент будет перемещен в новое место списка. Точно так же можете переместить компонент в другую группу — просто перетаскивайте его вверх или вниз по окну Toolbox, пока не окажетесь в нужной группе. Эти действия можно выполнять как с представлением List, так и с представлением Icon.

Если хотите скопировать компонент из одной группы в другую, а не переместить его, то в ходе перетаскивания удерживайте нажатой клавишу Ctrl . Иногда удобно иметь свою собственную группу, чтобы хранить в ней элементы управления и компоненты, которые используются чаще других. Для того чтобы создать новую группу в окне Toolbox, щелкните правой кнопкой мыши в любом месте окна Toolbox и выполните команду Add Tab. Внизу окна Toolbox будет добавлена новая пустая закладка, которой вы должны присвоить имя. После того как вы назовете закладку, добавьте в нее компоненты, следуя инструкциям, описанным в этом разделе.

Если вы впервые запускаете систему Visual Studio 2013, то элементы в каждой группе будут упорядочены по алфавиту. Однако после перемещения элементов вы можете обнаружить, что они перепутаны, и решите просто начать все сначала. Все, что вам для этого необходимо, — щелкнуть правой кнопкой мыши в группе и выполнить команду Sort Items Alphabetically.

По умолчанию элементы управления добавляются в окно Toolbox в порядке следования имен их классов. Это значит, что вы столкнетесь с непонятными именами, особенно, если захотите добавить в окно Toolbox элементы управления COM. Система Visual Studio 2013 позволяет пользователю изменять имена компонентов на что-нибудь более понятное.

Для того чтобы изменить имя компонента, щелкните правой кнопкой мыши в окне Toolbox и выполните команду Rename Item. На месте первоначального названия появится поле редактирования, в которое можете ввести удобное для вас имя, даже если оно содержит специальные символы.

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

Добавление компонентов

Иногда оказывается, что конкретный компонент, который вам нужен, отсутствует в списке Toolbox. Большинство основных компонентов .NET в этом списке есть, но некоторых нет. Например, компонент WebClient class в списке Toolbox по умолчанию не указан. Управляемые приложения могут также использовать компоненты COM. После добавления в окно Toolbox объекты COM могут быть использованы точно так же, как обычные компоненты .NET, и если они закодированы правильно, то вы можете программировать работу с ними как обычно, используя окно Properties и ссылаясь на их методы, свойства и события в своем коде.

Для того чтобы добавить компонент в свое окно Toolbox, щелкните правой кнопкой мыши на группе компонентов, в которую хотите добавить новый компонент, и выполните команду Choose Items. Через какое-то время (на медленном компьютере этот процесс может занять несколько секунд, потому что машина должна просмотреть кэш .NET, чтобы определить все возможные компоненты, которые можно выбрать) отобразится список .NET Framework components, как показано на рисунке ниже:

Помните: команда Reset Toolbox удаляет все группы команд, созданные пользователем, поэтому сначала убедитесь, что вам действительно необходимо выполнить эту функцию!

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

Если вам покажется трудным найти требуемый элемент, воспользуйтесь текстовым полем Filter, фильтрующим список по имени, пространству имен и имени сборки. В редких ситуациях список может не содержать элемент вообще. Это может произойти с нестандартными компонентами, например, созданными вами или не зарегистрированными в кэше Global Assembly Cache (GAC). Вы по-прежнему можете добавить их, используя кнопку Browse, чтобы просмотреть реальные файлы на компьютере. Выбирая и отменяя выбор требуемого элемента, щелкните на кнопке ОК, чтобы сохранить настройки окна Toolbox.

Компоненты COM, WPF, Silverlight Components и Workflow Activities можно добавить точно так же. Просто щелкните на соответствующей закладке в диалоговом окне, чтобы увидеть список доступных, правильно зарегистрированных компонентов COM. Можете также использовать кнопку Browse, чтобы найти элементы управления, которых нет в списке.

Введение в 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

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

Учебник. Создание нового приложения WinForms (Windows Forms .NET) Tutorial: Create a new WinForms app (Windows Forms .NET)

Из этого краткого руководства вы узнаете, как создать новое приложение Windows Forms (WinForms) с помощью Visual Studio. In this short tutorial, you’ll learn how to create a new Windows Forms (WinForms) app with Visual Studio. После создания первоначального приложения вы научитесь добавлять элементы управления и обрабатывать события. Once the initial app has been generated, you’ll learn how to add controls and how to handle events. По завершении работы с этим руководством у вас будет простое приложение, добавляющее имена в список. By the end of this tutorial, you’ll have a simple app that adds names to a list box.

Документация для Руководства по рабочему столу по .NET 5 (и .NET Core) находится в разработке. The Desktop Guide documentation for .NET 5 (and .NET Core) is under construction.

В этом руководстве описано следующее: In this tutorial, you learn how to:

• Создание нового приложения WinForms Create a new WinForms app
• Добавление элементов управления на форму Add controls to a form
• Обработка событий элемента управления для предоставления функциональных возможностей приложения Handle control events to provide app functionality
• Запустите приложение Run the app

Предварительные требования Prerequisites

• Visual Studio 2019 версии 16.8 или более поздней Visual Studio 2019 version 16.8 or later versions
  • Выберите рабочую нагрузку «Рабочий стол Visual Studio» Select the Visual Studio Desktop workload
  • Выберите Отдельные компоненты .NET 5 Select the .NET 5 individual component

Создание приложения WinForms Create a WinForms app

Первым шагом в создании нового приложения является запуск Visual Studio и создание приложения на основе шаблона. The first step to creating a new app is opening Visual Studio and generating the app from a template.

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

Выберите Создать новый проект. Select Create a new project.

В поле Поиск шаблонов введите winforms и нажмите клавишу ВВОД . In the Search for templates box, type winforms, and then press Enter .

В раскрывающемся списке язык кода выберите C# или Visual Basic. In the code language dropdown, choose C# or Visual Basic.

В списке шаблонов выберите Приложение Windows Forms (.NET) и затем щелкните Далее. In the templates list, select Windows Forms App (.NET) and then click Next.

Не выбирайте шаблон Приложение Windows Forms (.NET Framework) . Don’t select the Windows Forms App (.NET Framework) template.

В окне Настроить новый проект задайте в качестве имени проекта значение Names и щелкните Создать. In the Configure your new project window, set the Project name to Names and click Create.

Вы также можете сохранить проект в другую папку, изменив параметр Расположение. You can also save your project to a different folder by adjusting the Location setting.

После создания приложения Visual Studio должен открыть панель конструктора для формы по умолчанию Form1. Once the app is generated, Visual Studio should open the designer pane for the default form, Form1. Если конструктор форм не отображается, дважды щелкните форму в области Обозреватель решений, чтобы открыть окно конструктора. If the form designer isn’t visible, double-click on the form in the Solution Explorer pane to open the designer window.

Важные элементы среды Visual Studio Important parts of Visual Studio

Поддержка WinForms в Visual Studio состоит из четырех важных компонентов, с которыми вы будете взаимодействовать при создании приложения. Support for WinForms in Visual Studio has four important components that you’ll interact with as you create an app:

обозреватель решений Solution Explorer

Все файлы проекта, код, формы и ресурсы отображаются в этой области. All if your project files, code, forms, resources, will appear in this pane.

Properties (Свойства) Properties

На этой панели отображаются параметры свойств, которые можно настроить в зависимости от выбранного элемента. This pane shows property settings you can configure based on the item selected. Например, если выбрать элемент в Обозревателе решений, отобразятся параметры свойств, связанные с файлом. For example, if you select an item from Solution Explorer, you’ll see property settings related to the file. Если выбрать объект в конструкторе, отобразятся параметры элемента управления или формы. If you select an object in the Designer, you’ll see settings for the control or form.

Конструктор форм Form Designer

Это конструктор для формы. This is the designer for the form. Он является интерактивным, и на него можно перетаскивать объекты из панели элементов. It’s interactive and you can drag-and-drop objects from the Toolbox. Выбирая и перемещая элементы в конструкторе, можно визуально создавать пользовательский интерфейс для приложения. By selecting and moving items in the designer, you can visually compose the user interface (UI) for your app.

Панель элементов Toolbox

Панель элементов содержит все элементы управления, которые можно добавить на форму. The toolbox contains all of the controls you can add to a form. Чтобы добавить элемент управления на текущую форму, дважды щелкните элемент управления или перетащите его. To add a control to the current form, double-click a control or drag-and-drop the control.

Добавление элементов управления на форму Add controls to the form

Открыв конструктор форм Form1, используйте панель Область элементов, чтобы добавить на форму следующие элементы управления: With the Form1 form designer open, use the Toolbox pane to add the following controls to the form:

• Метка Label
• Кнопка Button
• Listbox Listbox
• Текстовое поле Textbox

Вы можете расположить и изменить размер элементов управления в соответствии со следующими настройками. You can position and size the controls according to the following settings. Либо визуально перенесите их, чтобы они соответствовали следующему снимку экрана, либо щелкните каждый элемент управления и настройте параметры в области Свойства. Either visually move them to match the screenshot that follows, or click on each control and configure the settings in the Properties pane. Можно также щелкнуть область заголовка формы, чтобы выбрать форму. You can also click on the form title area to select the form:

Объект Object	Параметр Setting	Значение Value
Form Form	Текст Text	Names
Размер Size	268, 180
Label Label	Расположение Location	12, 9
Текст Text	Names
Listbox Listbox	Имя Name	lstNames
Расположение Location	12, 27
Размер Size	120, 94
текстовое поле; Textbox	Имя Name	txtName
Расположение Location	138, 26
Размер Size	100, 23
Button Button	Имя Name	btnAdd
Расположение Location	138, 55
Размер Size	100, 23
Текст Text	Add Name

Вы должны получить в конструкторе форму, которая выглядит следующим образом. You should have a form in the designer that looks similar to the following:

Обработка событий Handle events

Теперь, когда в форме есть все элементы управления, необходимо обрабатывать события элементов управления, чтобы реагировать на вводимые пользователем данные. Now that the form has all of its controls laid out, you need to handle the events of the controls to respond to user input. Открыв конструктор форм, выполните следующие действия. With the form designer still open, perform the following steps:

Выберите в форме элемент управления «Кнопка». Select the button control on the form.

В области Свойства щелкните значок события , чтобы вывести список событий кнопки.

Найдите событие Click и дважды щелкните его, чтобы создать обработчик событий. Find the Click event and double-click it to generate an event handler.

Это действие добавляет следующий код в форму: This action adds the following code to the the form:

Код, помещаемый в этот обработчик, будет добавлять имя, заданное элементом управления TextBox txtName , в элемент управления ListBox lstNames . The code we’ll put in this handler will add the name specified by the txtName textbox control to the lstNames listbox control. Однако мы хотим, чтобы имя удовлетворяло двум условиям: указанное имя не должно быть пустым, и его еще не должно быть в списке. However, we want there to be two conditions to adding the name: the name provided must not be blank, and the name must not already exist.

В следующем примере кода показано добавление имени в элемент управления lstNames . The following code demonstrates adding a name to the lstNames control:

Запустите приложение Run the app

Теперь, когда у нас есть код события, можно запустить приложение, нажав клавишу F5 или выбрав пункт меню Отладка > Начать отладку. Now that the event has been coded, you can run the app by pressing the F5 key or by selecting Debug > Start Debugging from the menu. Отобразится форма, и вы можете ввести имя в текстовое поле, а затем добавить его, нажав кнопку. The form displays and you can enter a name in the textbox and then add it by clicking the button.