[C# .Net WinForms] Основы создания контролов

[Algor1x]

Всем привет. Решил создать урок с основами разработки кастомных контролов на C# .Net Windows Forms.
Без различных фреймворков, дополнительных библиотек и так далее. System.Drawing - всё, что нам нужно.

На это есть две причины:
1. Поделиться знаниями с теми, кто задаёт вопрос: "Где ты этому научился? В интернете практически нет информации".
2. Научить тех, для кого мой ценник - это дорого, делать самостоятельно, либо поменять своё мнение.

Меня ни капли не пугает конкуренция, есть вероятность, что те, кто научится делать красоту - выставит ещё больший ценник, так как пак контролов содержит порядка 3.000 строк (а то и больше), не учитывая всех правок. Если посчитать правки, то там все 10-15к строк может выйти.

Я не считаю себя профессионалом, мистер-доктор-профессором Патриком.
Просто могу показать часть своих работ, а вам делать вывод, стоит ли читать то, что пишу я.

Спойлер: ПРИМЕРЫ РАБОТ

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

---

Custom Controls на C# .Net Windows Forms​

Существует распространенное заблуждение, что Для просмотра ссылки Войди или Зарегистрируйся - это устаревшая технология. Многие разработчики отказываются от нее в пользу Для просмотра ссылки Войди или Зарегистрируйся и Для просмотра ссылки Войди или Зарегистрируйся, но насколько это оправдано? Давайте разберемся в этом по порядку.

Windows Forms был создан для упрощения разработки стандартных десктопных приложений, не требующих сложной графики. WinForms имеет высокоуровневую обертку, Для просмотра ссылки Войди или Зарегистрируйся, для работы с GDI+ (Для просмотра ссылки Войди или Зарегистрируйся), который осуществляет рендеринг на уровне CPU и не использует аппаратное ускорение. В то время как в WPF интегрирован DirectX, который позволяет использовать возможности GPU для рендеринга (Для просмотра ссылки Войди или Зарегистрируйся).

В Windows Forms также есть возможность рендеринга с помощью GPU (например, через SharpDX). Но сейчас мы говорим не об этом.

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

C# .Net Windows Forms позволяет разрабатывать как нативные, так и кроссплатформенные приложения с адаптивным интерфейсом, который может иметь анимированный дизайн. Все это можно сделать без навыков верстки Для просмотра ссылки Войди или Зарегистрируйся, с простым в использовании режимом дизайнера и с меньшими требованиями к аппаратному обеспечению.

Многие полюбили WPF из-за наличия готовых решений на Guna, Avalonia и подобных фреймворках, не задумываясь о том, что для WinForms достаточно создать всего 2-3, ну максимум 5 настраиваемых наборов контролов на все случаи жизни.

---

Fundamentals​

Каждый элемент управления в Windows Forms - это объект, который отображается на экране и с которым пользователь может взаимодействовать. Эти элементы управления управляются системой событий.

Класс Graphics является основным инструментом для рисования на элементе управления. С помощью Graphics вы можете рисовать линии, прямоугольники, круги, текст, изображения и выполнять другие графические операции. Он инкапсулирует поверхность рисования GDI+.

Создание нового контрола
Откройте Visual Studio и создайте проект Windows Forms (.Net Framework). После этого создайте папку в обозревателе решений и назовите ее Controls, UI, GUI или как вам больше нравится. В этой папке мы будем создавать наши элементы управления. Для удобства каждый элемент управления будет находиться в отдельном файле. Щелкните правой кнопкой мыши на папке и создайте новый элемент Class. Назовите его как угодно, например MyCustomControl. Удалите оттуда весь код. Вот и все, теперь вы готовы к работе.

Создание пользовательского элемента управления обычно включает в себя два этапа:
1. Наследование от базового класса элемента управления (например, Для просмотра ссылки Войди или Зарегистрируйся, Для просмотра ссылки Войди или Зарегистрируйся, Для просмотра ссылки Войди или Зарегистрируйся, Для просмотра ссылки Войди или Зарегистрируйся, Для просмотра ссылки Войди или Зарегистрируйся и т.д.);
2. Переопределение его методов для рисования или обработки событий.

Сначала нам нужно создать класс и добавить пространство имен System.Windows.Forms, чтобы сделать наш класс дочерним классом базового класса Control:

using System.Windows.Forms;

public class MyCustomControl : Control
{

}

Поскольку класс MyCustomControl наследует Control, он может переопределять или расширять его методы, свойства и события. Если мы скомпилируем наш проект, то обнаружим, что в панели элементов появился новый элемент MyCustomControl.

Теперь нам нужно создать конструктор этого класса внутри этого класса:

using System;
using System.Drawing;
using System.Windows.Forms;

public class MyCustomControl : Control
{
    // Конструктор
    public MyCustomControl()
    {
    }
}

Конструктор используется для инициализации объектов этого класса при их создании. В данном случае он является публичным, что означает, что он может быть вызван извне (например, при создании экземпляра MyCustomControl в другом месте программы). Конструктор не возвращает значений.

Далее мы можем инициализировать свойства элемента управления, например, присвоить значение свойству Size, то есть установить размер. Для этого нам уже понадобится использование System.Drawing:

using System.Drawing;
using System.Windows.Forms;

public class MyCustomControl : Control
{
    // Конструктор
    public MyCustomControl()
    {
        // Устанавливаем размер элемента управления
        this.Size = new Size(200, 100);
        // this — ключевое слово, которое ссылается на текущий экземпляр объекта (т.е. экземпляр MyCustomControl, который создается при вызове конструктора)
        // Size — свойство базового класса Control, определяющее размер элемента управления (контрола). Оно представляет собой объект типа Size, который содержит два значения: ширину и высоту
        // new Size(200, 100) — создаём новый объект типа Size с шириной 200 пикселей и высотой 100 пикселей
    }
}

В результате выполнения этого конструктора каждый раз, когда создается новый экземпляр MyCustomControl, его размер будет установлен на 200 пикселей в ширину и 100 пикселей в высоту. Это удобно, когда нужно задать размеры по умолчанию для элемента управления при его создании.

Мы рассмотрели наследование, теперь давайте переопределим стандартное поведение элемента управления при рисовании. Для этого нам нужно переопределить метод OnPaint:

using System.Drawing;
using System.Windows.Forms;

public class MyCustomControl : Control
{
    // Конструктор
    public MyCustomControl()
    {
        // Устанавливаем размер контрола
        this.Size = new Size(200, 100);
    }

    // Переопределяем метод OnPaint для рисования
    protected override void OnPaint(PaintEventArgs e)
    {
        base.OnPaint(e);
    }
}

Если бы я каждый раз добавлял по одной строке, этот урок получился бы слишком большим. Поэтому я создам небольшой пример элемента управления с подробным объяснением каждой строки, а затем мы пойдем дальше:

using System.Drawing;
using System.Windows.Forms;

public class MyCustomControl : Control
{
    // Конструктор
    public MyCustomControl()
    {
        // Устанавливаем размер контрола
        this.Size = new Size(200, 100);
    }

    // Переопределяем метод OnPaint для рисования
    // Этот метод переопределяет стандартное поведение элемента управления при рисовании.
    // В Windows Forms метод OnPaint вызывается всякий раз, когда элемент управления нужно перерисовать,
    // например, когда система перерисовывает его после изменения размера или когда он становится видимым.
    // PaintEventArgs e - объект, передаваемый в метод OnPaint и содержащий информацию о контексте рисования, например, об объекте Graphics, который используется для рисования на экране.
    protected override void OnPaint(PaintEventArgs e)
    {
        // Вызов базовой реализации метода OnPaint из класса Control позволяет вам выполнить стандартное рисование, предоставляемое Windows Forms, прежде чем вы начнете добавлять свои собственные "рисунки".
        // Это важно, чтобы не забыть нарисовать фон, границы и т. д.
        base.OnPaint(e);

        // Получаем объект Graphics. Объект Graphics используется для рисования на экране.
        // Он предоставляет методы для рисования различных графических объектов, таких как линии, прямоугольники, тексты и изображения.
        // В этом случае e.Graphics передает объект Graphics, предоставленный системой для рисования.
        Graphics g = e.Graphics;

        // Метод Clear очищает область рисования, заливая ее указанным цветом.
        // В этом случае фон будет белым. Это позволит вам "сбросить" весь предыдущий рисунок, если элемент управления будет перерисован.
        g.Clear(Color.White);
 
        // Рисование прямоугольника
        // Создаём объект Pen, который будет использоваться для рисования. В данном случае это синяя линия, толщина линии - 2 пикселя.
        Pen pen = new Pen(Color.Blue, 2);
        // Этот объект рисует контур прямоугольника. Для заливки используется Brush.

        // Метод DrawRectangle рисует прямоугольник. В качестве параметров передаются:
        // pen — используемый карандаш для рисования
        // 10, 10 — координаты левого верхнего угла прямоугольника
        // this.Width - 20, this.Height - 20 — ширина и высота прямоугольника, которые рассчитываются относительно ширины и высоты элемента управления (с отступом в 10 пикселей с каждой стороны)
        g.DrawRectangle(pen, 10, 10, this.Width - 20, this.Height - 20);

        // Текст для рисования
        // Создаём объект Font, задающий шрифт и размер текста. Здесь используется шрифт Arial размером 12
        Font font = new Font("Arial", 12);
        // Создаём кисть (объект Brush), задающую цвет текста, в данном случае черный.
        Brush brush = Brushes.Black;
        // Метод DrawString рисует на экране строку текста.
        // Текст "Custom Control" будет нарисован с помощью шрифта и кисти в точке с координатами (30, 30) относительно левого верхнего угла элемента управления.
        g.DrawString("Custom Control", font, brush, new PointF(30, 30));
    }
}

Таким образом, мы создали примитивный элемент управления, который будет представлять собой синий контур прямоугольника толщиной 2 пикселя на белом фоне, с отступами от краев 10 пикселей, внутри которого расположен текст «Custom Control», нарисованный в точке черного цвета, шрифт Arial, размер 12. Текст расположен в точке с координатами [30;30].

---

Инструменты и методы рисования​

---

Инструменты рисования​

Pen (Drawing tool)
Pen - это инструмент для рисования линий, прямоугольников, эллипсов и других контурных фигур. Его основные свойства - цвет, толщина линии и стиль линии.

Спойлер: Основные свойства

1. Color - устанавливает цвет линии;
2. Width - задает толщину линии;
3. DashStyle - задает стиль линии (например, сплошная, пунктирная);
4. StartCap и EndCap - задаёт стиль начала и конца линии (например, круглый, квадратный и т.д.).

Спойлер: Стили линии

1. DashStyle.Solid - сплошная линия (по умолчанию);
2. DashStyle.Dash - пунктирная линия;
3. DashStyle.Dot - пунктирная линия;
4. DashStyle.DashDot - чередующиеся тире и точки;
5. DashStyle.DashDotDot - чередующиеся тире и две точки.

Спойлер: StartCap & EndCap

Flat - прямой, плоский конец;
Round - закругленный конец (круглый);
Square - квадратный конец (выступает за линию);
Triangle - треугольный конец (выступает как стрела);
NoAnchor - без изменений на концах линии (обычная линия).

Brush (Drawing tool)
Brush - is an abstract class that is used to fill shapes (rectangles, ellipses, etc.) of contoured figures. There are several types of brushes, which have their own sets of basic parameters:

Спойлер: Типы кистей / заливок

SolidBrush - заливка фигур сплошным цветом;
LinearGradientBrush - заливает фигуры линейным градиентом;
HatchBrush - заливка фигур текстурой (штриховка);
TextureBrush - заливка фигур изображением.

---

Методы рисования​

Рисование линий:​

DrawLine(Pen pen, float x1, float y1, float x2, float y2) - рисует линию между двумя точками (x1, y1) и (x2, y2).

Рисование прямоугольников и квадратов:
DrawRectangle(Pen pen, float x, float y, float width, float height) - очерчивает прямоугольник.
FillRectangle(Brush brush, float x, float y, float width, float height) - заполняет прямоугольник цветом.

Рисование элипсов и окружностей:
DrawEllipse(Pen pen, float x, float y, float width, float height) - рисует эллипс в прямоугольной области (контур)
FillEllipse(Brush brush, float x, float y, float width, float height) - заполняет эллипс цветом
Чтобы нарисовать круг, просто задайте одинаковую ширину и высоту эллипса.

Рисование текста:
DrawString(string text, Font font, Brush brush, float x, float y) - рисует строку текста
DrawString(string text, Font font, Brush brush, RectangleF layoutRectangle) - отрисовывает текст в заданном прямоугольнике

Полигональные фигуры:
DrawPolygon(Pen pen, Point[] points) - рисует многоугольник, соединяя переданные точки.
FillPolygon(Brush brush, Point[] points) - заливает многоугольник цветом.

Дополнительные методы рисования:
DrawArc(Pen pen, float x, float y, float width, float height, float startAngle, float sweepAngle) - рисует дугу (часть эллипса).
FillRegion(Brush brush, Region region) - заливает область (например, после создания сложной фигуры с помощью Region).

Думаю, этого достаточно. Постом ниже дам информацию про перерисовку и пользовательские свойства элементов.

English lesson: Для просмотра ссылки Войди или Зарегистрируйся

 

[ChatGPT]

Спасибо, что поделились своим уроком по созданию кастомных контролов на C# для Windows Forms! Это отличная информация для тех, кто хочет углубить свои знания в этой области и научиться разрабатывать собственные элементы управления без использования дополнительных фреймворков и библиотек.

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

Если у вас будут дополнительные материалы или «фишки», как вы их назвали, обязательно публикуйте их — всегда интересно узнать о новых приемах и техниках в разработке UI/UX на Windows Forms. Ваш опыт наверняка будет полезен для многих разработчиков.

 

[Algor1x]

Обработка перерисовки (Invalidate)​

Перерисовка - это процесс, при котором форма или элемент управления очищается и перерисовывается заново. Когда окно приложения скрывается, а затем снова появляется, система перерисовывает его содержимое. Это также происходит при изменении размера окна или когда вы хотите обновить часть экрана (например, при изменении данных или состояния).

Однако Windows Forms не перерисовывает форму или элемент управления автоматически в каждый момент времени. Если вы хотите обновить что-то на экране, например, после изменения состояния, вам нужно запросить перерисовку с помощью метода Для просмотра ссылки Войди или Зарегистрируйся.

Метод Invalidate запускает событие Paint на форме или элементе управления, что приводит к его перерисовке. Когда вы вызываете метод Invalidate, он сообщает системе: «Перерисуй эту область экрана».

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

ВАЖНО:
Метод Invalidate не вызывает немедленную перерисовку. Он просто помечает объект как нуждающийся в перерисовке. Фактическое перерисовывание произойдет на следующем этапе обработки событий.

Событие Paint будет вызвано автоматически, когда перерисовка будет завершена.

using System.Drawing;
using System.Windows.Forms;

public class Clicker : Control
{
    private Color currentColor;

    public Clicker()
    {
        // Устанавливаем начальный цвет для прямоугольника
        currentColor = Color.Red;

        // Устанавливаем обработчик событий для щелчков мыши
        this.MouseClick += new MouseEventHandler(this.OnMouseClick);

        // Устанавливаем размеры формы
        this.Size = new Size(400, 400);
    }

    // Обработчик события щелчка мыши
    private void OnMouseClick(object sender, MouseEventArgs e)
    {
        // Изменяем цвет при каждом нажатии
        currentColor = (currentColor == Color.Red) ? Color.Blue : Color.Red;

        // "Вызываем" перерисовку формы
        // Если этого не сделать, цвет на форме останется прежним
        this.Invalidate();
    }

    // Переопределяем метод OnPaint для рисования
    protected override void OnPaint(PaintEventArgs e)
    {
        base.OnPaint(e);

        // Получаем графический объект
        Graphics g = e.Graphics;

        // Создаём кисть для заливки
        Brush brush = new SolidBrush(currentColor);

        // Рисуем прямоугольник с текущим цветом
        g.FillRectangle(brush, 100, 100, 200, 100);
    }
}

currentColor - переменная, хранящая текущий цвет для заливки прямоугольника. Мы начинаем с красного цвета и меняем его на синий каждый раз, когда щелкаем мышью.
Обработчик события MouseClick - когда пользователь щелкает мышью, цвет меняется (красный на синий или наоборот) и вызывается метод Invalidate, который помечает форму как требующую перерисовки.
Метод OnPaint - этот метод перерисовывает форму. В нем мы создаем объект Graphics и рисуем прямоугольник с текущим цветом с помощью метода FillRectangle.
Метод Invalidate - каждый раз, когда цвет меняется, вызывается Invalidate. Это вызывает событие Paint, которое перерисовывает весь элемент управления, а именно прямоугольник.

Частичная перерисовка (Invalidate(Rectangle)):
Вместо того чтобы перерисовывать всю форму, вы можете указать, какая именно область должна быть перерисована. Метод Для просмотра ссылки Войди или Зарегистрируйся позволяет указать прямоугольник, который будет перерисован, что может повысить производительность при обновлении только части интерфейса.

this.Invalidate(new Rectangle(50, 50, 200, 100)); - перерисовывает только прямоугольник 50,50,200,100.

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

private void OnMouseClick(object sender, MouseEventArgs e)
{
    // Изменяем цвет
    currentColor = (currentColor == Color.Red) ? Color.Blue : Color.Red;

    // Перерисовываем только область, которую занимает прямоугольник
    this.Invalidate(new Rectangle(100, 100, 200, 100));
}

Заключение

Invalidate - это метод, который сообщает системе, что форму или элемент управления нужно перерисовать. Он помечает область как требующую обновления, и система автоматически вызывает событие Paint, в котором мы рисуем.

С помощью Invalidate(Rectangle) можно перерисовать всю форму или определенные области.

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

Когда использовать Invalidate?

Изменение состояния: если программа изменяет состояние, которое должно быть отражено на экране во время ее работы.
Перерисовка после взаимодействия с пользователем: например, после изменения параметров или перемещения элементов на экране.
Обновление пользовательского интерфейса на основе данных: например, при изменении данных на экране (графиков или статистики).

Метод Invalidate является основным инструментом для ручной перерисовки форм и элементов управления в Windows Forms.

--- Добавлено позже: Среда в 12:41 ---

Пользовательские свойства контролов​

В Windows Forms вы можете добавлять свойства к пользовательским элементам управления, которые позволяют изменять поведение или внешний вид элемента управления через окно свойств в Visual Studio. Эти свойства могут быть как простыми типами, такими как int, string, Color, так и более сложными типами данных. Для просмотра ссылки Войди или Зарегистрируйся

Для того чтобы свойство отображалось в окне свойств в дизайнере, необходимо использовать такие атрибуты, как Browsable, Category, Description и другие.

В качестве примера возьмем код из предыдущего урока. Мы добавим в наш элемент управления еще один прямоугольник и два свойства: FirstColor и SecondColor, которые будут определять два цвета прямоугольника. Эти свойства можно изменить в режиме дизайнера:

using System;
using System.Drawing;
using System.Windows.Forms;
using System.ComponentModel;

public class Clicker : Control
{
    private Color _firstColor; // Первое свойство - цвет
    private Color _secondColor; // Второе свойство - цвет

    // Конструктор
    public Clicker()
    {
        // Устанавливаем исходные цвета
        _firstColor = Color.Red;
        _secondColor = Color.Blue;

        // Устанавливаем обработчик событий для щелчков мыши
        this.MouseClick += new MouseEventHandler(this.OnMouseClick);

        // Устанавливаем размеры элемента управления
        this.Size = new Size(400, 400);
    }

    // Обработчик события щелчка мыши
    private void OnMouseClick(object sender, MouseEventArgs e)
    {
        // Меняем цвета при каждом нажатии
        var temp = _firstColor;
        _firstColor = _secondColor;
        _secondColor = temp;

        // "Вызов перерисовки" элементов управления
        this.Invalidate();
    }

    // Переопределяем метод OnPaint для рисования
    protected override void OnPaint(PaintEventArgs e)
    {
        base.OnPaint(e);

        // Получаем графический объект
        Graphics g = e.Graphics;

        // Создаём кисти для заливки
        Brush brush1 = new SolidBrush(_firstColor);
        Brush brush2 = new SolidBrush(_secondColor);

        // Рисуем прямоугольники с текущими цветами
        g.FillRectangle(brush1, 50, 50, 150, 100); // Первый прямоугольник
        g.FillRectangle(brush2, 200, 50, 150, 100); // Второй прямоугольник
    }

    // Свойство для первого цвета
    [Browsable(true)]
    [Category("Appearance")]
    [Description("Color for the first rectangle")]
    public Color FirstColor
    {
        get { return _firstColor; }
        set
        {
            if (_firstColor != value)
            {
                _firstColor = value;
                this.Invalidate(); // Перерисовка
            }
        }
    }

    // Свойство для второго цвета
    [Browsable(true)]
    [Category("Appearance")]
    [Description("Color for the second rectangle")]
    public Color SecondColor
    {
        get { return _secondColor; }
        set
        {
            if (_secondColor != value)
            {
                _secondColor = value;
                this.Invalidate();
            }
        }
    }
}

Свойства
FirstColor - цвет для первого прямоугольника
SecondColor - цвет для второго прямоугольника

Атрибуты
[Browsable(true)] - указывает, что свойство будет отображаться в окне свойств в Visual Studio
[Category(«Внешний вид»)] - указывает категорию, в которой будет отображаться это свойство
[Description(«Цвет для первого прямоугольника»)] - добавляет описание для свойства, которое будет отображаться в окне свойств.

Эти атрибуты делают свойства доступными для настройки через дизайнер в Visual Studio.

 

[DeadIce]

Спасибо !

 

[Olegio]

Большое спасибо

 

[Abobusxxx]

Ого, большое спасибо за урок! Прям то, что искал

 

[444436767]

спасибо огромное, познавательно