Visual studio windows forms как открыть панель с элементами

Вне зависимости от того, с помощью какой платформы вы планируете разрабатывать графический интерфейс вашего приложения (WinForms, WPF или UWP) так или иначе вам придётся либо создавать все элементы интерфейса вручную, например, используя возможности XAML, либо использовать панель элементов (toolbox), просто перетаскивая необходимые компоненты на форму приложения. Второй вариант работы занимает намного меньше времени и для тех, кто как и я, переходит в C# из Delphi, наверное, более привычный. Однако, при установке новых элементов управления, они далеко не всегда автоматически появляются в панели элементов, что не совсем удобно. Поэтому сегодня мы рассмотрим подробно вопрос: как в Visual Studio добавить в Панель элементов (ToolBox) установленные компоненты?

Чтобы показать панель элементов Visual Studio 2019 необходимо зайти в главном меню в раздел «Вид» и выбрать пункт «Панель элементов»:

Состав панели элементов меняется в зависимости от того, какую платформу вы выбираете для разработки. Например, ниже на рисунке показаны различные варианты Toolbox для трех вариантов проектов: WinForms, WPF и UWP:

В зависимости от того, какая платформа используется, панель элементов содержит определенные элементы управления — какие-то элементы являются уникальными для платформы (например, в WinForms вы не найдете элемента MapControl, который присутствует в UWP), какие-то имеются во всех вариантах, на, при этом работать с ними, иногда, приходится с учётом особенностей той или иной платформы.

Панель элементов состоит из нескольких разделов, которые можно свернуть, например, в WPF такими разделами будут «Типовые элементы управления WPF», «Все элементы управления WPF» и так далее.

Как добавить новый элемент управления в проект

Рассмотрим вопрос на примере приложения WPF с использованием .NET Framework. Создадим новый проект «Приложение WPF (.NET Framework)»:

По умолчанию в панели элементов (toolbox) появятся только стандартные элементы управления. Например, мы захотим использовать в нашем проекте компоненты Ribbon Controls (как в Office). Для того, чтобы их использовать в своем проекте, мы должны добавить ссылку на них в свой проект. Сделать это можно следующим образом:

1. В обозревателе решение кликаем правой кнопкой мыши по названию нашего проекта и выбираем пункт «Управление пакетами NuGet»

2. В открывшемся окне выбираем раздел «Обзор» и в окне поиска набираем «Ribbon». Появятся всевозможные пакеты, с элементами Ribbon Controls. Выбираем пакет от Microsoft с названием RibbonControlsLibrary и в правой части окна жмем кнопку «Установить»

3. После установки пакета в разделе «Ссылки» нашего проекта появится ссылка на установленный пакет

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

Как добавить установленные элементы в панель элементов (toolbox)

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

1. Находясь в панели элементов, выберите название любой вкладки, кликните по ней правой кнопкой мыши и в меню выдерите пункт «Добавить вкладку»

2. Назовем нашу новую вкладку «Ribbon Controls»

3. Кликаем по названию вкладки правой кнопкой мыши и выбираем пункт «Выбрать элементы». Откроется окно для выбора элементов, которые мы можем добавить в новую группу элементов

4. В разделе «Компоненты WPF» ищем элементы управления Ribbon, отмечаем их в списке и жмем кнопку «Ok»:

5. Теперь в панели элементов появятся новые элементы управления, которые можно добавлять на форму приложения простым перетаскиванием мышкой:

Итого

Сегодня мы разобрались с вопросом как добавить новые элементы управления в проект и добавить их в панель элементов (toolbox) Visual Studio 2019. Не всегда устанавливаемые элементы управления автоматически отображаются в панели элементов, поэтому иногда требуется воспользоваться их добавлением вручную, используя возможности IDE.

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

Последнее обновление: 13.11.2021

Графический редактор Windows Forms

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

Для открытия формы в режиме графического дизайнера нажмем на в структуре проекта на файл Form1.cs либо левой кнопкой мыши двойным кликом,
либо правой кнопкой мыши и в появившемся контекстном меню выберем View Designer (также можно использовать комбинацию клавиш Shift+F7)

После этого в Visual Studio откроется выбранная форма в графическом виде.

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

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

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

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

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

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

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

Кроме того, если после переноса кнопки на форму мы откроем файл Form1.

 namespace HelloApp
{
    partial class Form1
    {
        /// <summary>
        ///  Required designer variable.
        /// </summary>
        private System.ComponentModel.IContainer components = null;

        /// <summary>
        ///  Clean up any resources being used.
        /// </summary>
        /// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>
        protected override void Dispose(bool disposing)
        {
            if (disposing && (components != null))
            {
                components.Dispose();
            }
            base.Dispose(disposing);
        }

        #region Windows Form Designer generated code

        /// <summary>
        ///  Required method for Designer support - do not modify
        ///  the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {
            this.button1 = new System.Windows.Forms.Button();
            this.SuspendLayout();
            // 
            // button1
            // 
            this.button1.Location = new System.Drawing.Point(312, 187);
            this.button1.Name = "button1";
            this.button1.Size = new System.Drawing.Size(94, 29);
            this.button1.TabIndex = 0;
            this.button1.Text = "button1";
            this.button1.UseVisualStyleBackColor = true;
            // 
            // Form1
            // 
            this.AutoScaleDimensions = new System.Drawing.SizeF(8F, 20F);
            this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
            this.ClientSize = new System.Drawing.Size(800, 450);
            this.Controls.Add(this.button1);
            this.Name = "Form1";
            this.Text = "METANIT.COM";
            this.ResumeLayout(false);

        }

        #endregion

        private Button button1;
    }
}

Мы видим, что в класс Form1 была добавлена переменная button1 типа Button и для этой переменной, как и для объекта формы, задан ряд свойств.
И если в окне свойств мы поменяем значения этих свойств, то в этом файле также изменяться их значения. Как в случае с текстом формы:

this.Text = "METANIT.COM";

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

namespace HelloApp
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
    }
}

Изменим этот код следующим образом:

namespace HelloApp
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();

            button1.Click += button1_Click;
        }

        private void button1_Click(object? sender, EventArgs e)
        {
            MessageBox.Show("Привет");
        }
    }
}

Кнопка обладает событием Click, которое генерируется при нажатии. В данном случае в конструкторе формы мы подвязываем к кнопке button1 в качестве обработчика события
нажатия метод button1_Click, в котором с помощью метода MessageBox.Show выводит сообщение. Текст сообщения передается в метод в качестве параметра.

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

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

---

Hello World из Windows Frorms

Доброго времени суток! В этом уроке мы создадим первое приложение с графическим интерфейсом, которое будет обрабатывать действия пользователя. На самом деле, все будет очень просто, но информация, которую Вы получите, определит дальнейшее развитие Вашего обучения. Я покажу как «строить» интерфейс приложения в дизайнере, как обрабатывать события (другими словами, как реагировать на действия пользователя) и как редактировать код, ассоциированный с графическим интерфейсом. И так, к делу!

Создадим новый проект приложения с графическим интерфейсом (как это делать, я показывал в предыдущем уроке). Затем, зададим главному окну заголовок «Hello World». Как устанавливать заголовок окна, тоже рассказывалось в предыдущем уроке. Для тех кто забыл, мы выделяем окно (форму) в дизайнере (левым кликом мыши по окну), переходим в область редактирования свойств, ищем свойство «Text» и справа от него вводим текст «Hello World». Если Вы соберёте проект и запустите приложение, то получите примерно следующий результат:

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

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

Как видно, в панели элементов перечислены группы элементов, сейчас нас интересует группа «Стандартные элементы управления», давайте раскроем её (результат показан на рисунке ниже).

Теперь, давайте найдем элемент «Button» (он выделен на рисунке выше) и перетащим его на нашу форму (перетаскивание осуществляется обычным для Windows способом, так называемым Drag and Drop, т.е. наводим курсор на элемент, нажимаем левую кнопку мыши, и не отпуская её, перемещаем курсор на любое место формы, а затем, отпускаем кнопку мыши). Результат показан на рисунке ниже.

Теперь «настроим» перетащенную кнопку, для этого зададим осмысленные значения нужным свойствам этой кнопки. Для этого, убедимся, что кнопка выделена в дизайнере, и перейдем в область свойств, где найдем свойство «Name», которому зададим значение «MainBtn» (см. рисунок ниже).

Теперь давайте зададим надпись на кнопке, для этого установим значение свойства «Text» (обратите внимание, такое же свойство было и у формы). Установим этому свойству значение «Показать приветствие». Результат будет примерно таким, как показано на рисунке ниже.

Как видите, весь текст не поместился на кнопке, но это легко исправить, мы просто «растянем» кнопку в ширину. Для этого наведем курсор на кнопку, щелкнем левой кнопкой мыши по ней, а потом, подведем курсор к правому краю кнопку, курсор примет вид двунаправленной стрелки, после чего, нужно нажать левую кнопку мыши и переместить курсор вправо, тем самым увеличив кнопку, результат показан на рисунке ниже.

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

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

В этом самом месте области кода, мы будем писать тот код, который нужно выполнять при нажатии пользователем на кнопку в нашем приложении. Это так называемые обработчик события (в данном случае, нажатия на кнопку). Давайте в ставим в обработчик следующий код:

MessageBox.Show("Hello World!");

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

Как видите, мы поприветствовали мир!

И так, в этом уроке мы редактировали форму в дизайнере, устанавливали значения свойствам кнопки и окна (формы), обрабатывали события в коде приложения. Да, урок получился длинным, но он важен, и разбить его на части практически невозможно, а я всё больше задумываюсь о создании видеоуроков. А в следующем уроке, будет сделан небольшой разбор полетов.

Перейти к следующему уроку