Пользовательские элементы управления windows forms

Время на прочтение
6 мин

Количество просмотров 22K

Доброго времени суток!

В данной статье я опишу создания своих элементов для C# Windows Form.

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

Для написания будем использовать .Net FrameWork 4.7.x, среда разработки Visual Studio 2019.

В первую очередь создадим обычный проект Windows Form. Думаю не нужно это показывать. А уже потом создаем проект «Библиотека элементов управления Windows Form»(Назовем его CustomControl).

Далее у нас будет создан файл UserControl.cs. Удаляем его и создаем обычный класс TableCustoms.cs.Наш класс будет наследоваться от класса Control.

Далее в этом же файле создадим еще несколько классов, а именно:Column,Row,Cell. Рассмотрим каждый по отдельности. Начнем с Column:

    [Serializable]
    public class Column
    {
        public string Name { get; set; } = "NameColumn";//Наименование Столбца 
        public string Caption { get; set; } = "CaptionColumn";//Текст заголовка
        public int Width { get; set; } = 100;//Стандартная ширина
        public Color Back { get; set; } = Color.White;//Цвет фона
        
        public Column()
        { 
        
        }
    }

Класс Row:

    [Serializable]
    public class Row
    {
        public int Heigth { get; set; } = 20;// Высота строки
        public List<Cell> Cells { get; set; } = new List<Cell>();//список ячеек
        public Row()
        {
 
        }
        public Row(List<Cell> cells)
        {
            Cells = cells;
        }

    }

Класс Cell(Для поддержки копирования добавляем интерфейс ICloneable):

    [Serializable]
    public class Cell : ICloneable
    {
        public object Value { get; set; } = null;//значение ячейки 
        public Cell()
        {
        }
        public object Clone()
        {
            return MemberwiseClone();
        }
    }

Теперь настроим наш основной класс TableCustoms:

   public class TableCustoms : Control
    {
        #region Перемененные
        public ObservableCollection<Column> Columns { get; set; } = new ObservableCollection<Column>();//Список столбцов таблицы
        private ObservableCollection<Row> rows = new ObservableCollection<Row>();//Список строк
        private int countRow = 0;//количество строк
        #endregion
        #region Свойства
        public int CountRow // гетер и сетер при увеличении переменной на N раз
        {
            get { return countRow; }
            set
            {
                //При увеличении добавляем 
                if (value > countRow)
                {
                    int iteration = value - countRow;
                    for (int i = 0; i < iteration; i++)
                    {
                        rows.Add(new Row());
                    }
                }
                //при уменьшении удаляем с конца
                if (value < countRow)
                {
                    int iteration = countRow - value;
                    for (int i = 0; i < iteration; i++)
                    {
                        rows.Remove(rows[rows.Count - 1]);
                    }
                }

                countRow = value;
            }
        }
        //гетер и сетер для списка строк, будет использоваться позже
        public ObservableCollection<Row> Rows
        {
            get { return rows; }
            set { }
        }

        public int ColumnHeaderHeigth { get; set; } = 20;//высота шапки таблицы
        public int RowHeaderWidth { get; set; } = 20;//высота заголовков строк
        public Color ColumnHeaderBack { get; set; } = SystemColors.Control;//Основной цвет фона заголовков таблицы
        public Color BorderColor { get; set; } = Color.Black;//Стандартный цвет границ таблицы
        public bool NumerableRows { get; set; } = false;//Флаг автоматической нумерации
        #endregion
        //Метода изменения столбцов, будет использоваться в следующем уроке
        private void EditColumn()
        {

        }
        //Метод изменения строк
        private void EditRows()
        {
            if (countRow < rows.Count)//Увеличение количества строк
            {
                rows[rows.Count - 1].Cells = CreatCells(Columns.Count);//Добавление пустых ячеек в строку
                countRow++;
            }
            if (CountRow > rows.Count)//уменьшение количества строк
            {
                countRow--;
            }

        }
        //метод создания N количества ячеек
        private List<Cell> CreatCells(int Count)
        {
            // return Enumerable.Repeat(new Cell(), Count).ToList();
            List<Cell> result = new List<Cell>();
            for (int i = 0; i < Count; i++)
            {
                result.Add(new Cell());
            }
            return result;
        }
        public TableCustoms()
        {
            rows.CollectionChanged += (e, v) => EditRows();//проверка изменения списка
            Columns.CollectionChanged += (e, v) => EditColumn();//проверка изменения списка
            BackColor = SystemColors.AppWorkspace;//Стандартный фон
            PanelTable panelTable = new PanelTable(this);//Создание основной панели
            panelTable.Dock = DockStyle.Fill;//Растягиваем основную панель по Control
            Controls.Add(panelTable);//Добавление панели на Control
        }
    }

Для того, чтобы у нас были полосы прокрутки нужно использовать ScrollableControl, поэтому создадим класс PanelTable наследуем ScrollableControl и помещаем его на Control(в следующем уроке объясню почему создаем два разных контрола, а не используем сразу ScrollableControl):

 internal class PanelTable : ScrollableControl//Control со ScrolLbar
        {
            private TableCustoms BParent;//переменная основного класса, для работы с свойствами
            public PanelTable(TableCustoms bParent)
            {
                HScroll = true;//Отображение ползунка по горизонтали
                VScroll = true;//Отображение ползунка по вертикали
                AutoScroll = true;//Автоматическое появление полос прокрутки
                BParent = bParent;
            }
            //переопределение метода
            protected override void OnPaint(PaintEventArgs e)
            {
                Matrix m = new Matrix();
                m.Translate(this.AutoScrollPosition.X, this.AutoScrollPosition.Y, MatrixOrder.Append);
                e.Graphics.Transform = m;
                Graphics graf = e.Graphics;
                int maxWidth = 0;//Высота AutoScrollMinSize
                int maxHeight = 0;//Ширина AutoScrollMinSize
                                  //расчитываем ширину
                foreach (Column item in BParent.Columns)
                {
                    maxWidth += item.Width;
                }
                //расчитываем высоту
                foreach (Row item in BParent.Rows)
                {
                    maxHeight += item.Heigth;
                }
                AutoScrollMinSize = new Size(maxWidth + 100, maxHeight + 100);//назначаем AutoScrollMinSize относительно этого будут появляться полосы прокрутки
                graf.Clear(BParent.BackColor);
                DrawHeaderColumns(graf);//Отрисовка заголовков столбцов таблицы
                DrawHeaderRows(graf);//Отрисовка заголовков строк таблицы
                DrawCells(graf);//Отрисовка ячеек
                base.OnPaint(e);
            }
            /// <summary>
            /// Отрисока заголовков столбцов
            /// </summary>
            /// <param name="graf"></param>
            private void DrawHeaderColumns(Graphics graf)
            {
                int x = 2;
                Rectangle rect;
                rect = new Rectangle(x, 1, BParent.RowHeaderWidth, BParent.ColumnHeaderHeigth);
                graf.DrawRectangle(new Pen(BParent.BorderColor), rect);
                graf.FillRectangle(new SolidBrush(BParent.ColumnHeaderBack), rect);
                x += BParent.RowHeaderWidth + 1;
                foreach (Column item in BParent.Columns)
                {
                    rect = new Rectangle(x, 1, item.Width, BParent.ColumnHeaderHeigth);
                    graf.DrawRectangle(new Pen(BParent.BorderColor), rect);
                    graf.FillRectangle(new SolidBrush(BParent.ColumnHeaderBack), rect);
                    if (item.Caption.Length != 0)
                    {
                        StringFormat sf = new StringFormat();
                        sf.Alignment = StringAlignment.Center;
                        sf.LineAlignment = StringAlignment.Center;
                        graf.DrawString(item.Caption, new Font("Times", 9), Brushes.Black, rect, sf);
                    }
                    x += item.Width + 1;
                }
            }
            //Отрисовка заголовков строк
            private void DrawHeaderRows(Graphics graf)
            {
                int y = 1;
                int i = 0;
                Rectangle rect;
                y += BParent.RowHeaderWidth + 1;
                foreach (Row item in BParent.Rows)
                {
                    rect = new Rectangle(2, y, BParent.RowHeaderWidth, item.Heigth);
                    graf.DrawRectangle(new Pen(BParent.BorderColor), rect);
                    graf.FillRectangle(new SolidBrush(BParent.ColumnHeaderBack), rect);
                    if (BParent.NumerableRows)
                    {
                        StringFormat sf = new StringFormat();
                        sf.Alignment = StringAlignment.Center;
                        sf.LineAlignment = StringAlignment.Center;
                        graf.DrawString(i.ToString(), new Font("Times", 9), Brushes.Black, rect, sf);
                    }
                    i++;
                    y += item.Heigth + 1;
                }
            }
            //отрисовка ячеек
            private void DrawCells(Graphics graf)
            {

                int x = 2 + BParent.RowHeaderWidth + 1;
                int y = 2 + BParent.ColumnHeaderHeigth;
                Rectangle rect;
                int i = 0;
                foreach (Row itemRow in BParent.Rows)
                {
                    foreach (Column itemColumn in BParent.Columns)
                    {
                        rect = new Rectangle(x, y, itemColumn.Width, itemRow.Heigth);
                        graf.DrawRectangle(new Pen(BParent.BorderColor), rect);
                        graf.FillRectangle(new SolidBrush(Color.White), rect);
                        if (itemRow.Cells[i].Value != null)
                        {
                            StringFormat sf = new StringFormat();
                            sf.Alignment = StringAlignment.Center;
                            sf.LineAlignment = StringAlignment.Center;
                            graf.DrawString(itemRow.Cells[i].Value.ToString(), new Font("Times", 9), Brushes.Black, rect, sf);
                        }
                        x += itemColumn.Width + 1;
                        i++;
                    }
                    i = 0;
                    y += itemRow.Heigth + 1;
                    x = 2 + BParent.RowHeaderWidth + 1;
                }
            }
        }

После этого «Пересобираем проект» элемента и добавляем элемент на форму(в основном проекте):

Теперь проверим некоторые методы нашего элемента:

  public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
             tableCustoms1.Rows.Add(new Row());//добавление строки
             tableCustoms1.Rows.Add(new Row());
             tableCustoms1.Rows[0].Cells[0].Value = "1";//Изменение значения ячейки
             tableCustoms1.Rows[1].Cells[1].Value = "2";
            tableCustoms1.CountRow++;//увеличение числа строк
            tableCustoms1.Rows[0].Cells[0].Value = "привет";
        }
    }

Запускаем наш проект:

Introduction
 

Simple Custom Controls

Custom controls are control that are created by user when Windows Forms controls do not fulfill their application requirements. Simple custom controls can be created by inheriting the Control class, UserControl class, or any Windows Forms controls. The developer should write the code for the custom control in the OnPaint event of the control. After writing the code, it should be saved with the .cs extension. The code can be complied into an assembly and saved into the application’s directly by executing the following command:

Syntax

csc /t:library/out:<path to your application;s directory>/<name of the assembly that contains the custom control class> /r:System.dll
/r: System.Windows.Form.dll /r: System.Drawing.dll <name of the custom control class file>

Where,

• /t:library, Instructs the compiler that the assembly that is being created is a library and it is cannot be executed.
• /out : Specifies the name and path of the assembly file that contains the custom control.
• /r: Specifies the names of all the assemblies that are used by the code.

Control Class

The Control class includes functionalities to handle user input, define position and size of controls, and so on. The control class can be inherited by other classes to display information to the user. The properties of Control class.

• Bounds
  Specifies or retrieves the size and location of the specified control with respect to its parent control.
• CanFocus
  Retrieves a value that indicates whether the specified control can receive focus.
• CanSelect
  Retrieves a value that indicates whether the specified control can be selected.
• Created
  Retrieved a value that indicates whether the specified the specified control has been created.
  Dock
  Specifies or retrieves the control borders, which are docked to its parent control. It also identifies the way a control is resized with its parent.
  Left
  Retrieves the distance between the left edge of specified control and the left edge of the container’s client area.
• Right
  Retrieves the distance between the right edge of specified control and the left edge of the container’s client area.
• TabIndex
  Specifies or retrieves the tab order of the specified control within a container.

Table below the list of methods of control class.

Method	Description
Contains	specifies control is a child of the control
CreateControl	Forcibly creates a control along with its handle and child controls.
CreateGraphics	Creates a graphic for the specified control.
GetNextControl	It retrieves the next control according to the specified tab order of child controls.
GetPreferredSize	It retrieves the size of the rectangular area.
Hide	Hides the specified control from the user.

Below are the lists of events of Control class.

Event	Description
ControlAdded	Occurs when a new control is added to a collection of controls.
ControlRemoved	Occurs when a specified control is removed from a collection of controls.
Validated	Occurs when the validation process of the specified control is complete.

Code below creates a rectangular custom control and changes its appearance when the control is validated.

public partial class CustomControl: Control {
    Graphics graphics;
    protected override void OnPaint(PaintEventArgs pe) {
        this.Bounds = new Rectangle(15, 15, 30, 15);
        if (this.CanFocus) {
            this.Focus();
        }
        this.Dock = DockStyle.None;
        graphics = this.CreateGraphics();
        graphics.FillRectangle / (Brushes.CornflowerBlue, ClientRectangle);
    }
    protected override void OnValidated(EventsArgs e) {
        graphics.FillRectangle(Brushes.MediumOrchid, ClientRectangle);
        graphics.DrawRectangle(new Pen(Color.Black, ClientRectangle);
    }
}

In this code, the custom control is created by inheriting the Control class. When the OnPaint() method is invoked, the Bounds property is used to set a rectangular region. This is done by invoking the constructor of the Rectangular class, which takes the x and y coordinates, width and height as the parameters. The CanFocus property is used to check whether the control can receive focus. By default, it returns true and the focus() method is used to focus the control. The dock style for the control is set to None, which means that control cannot be dragged to some other location on the form. The graphics object Brush, is used to create the custom control within the specified rectangular bounds. When the validations are successfully made to the control, the OnValidated() method is invoked. This event changes the appearance of the control by changing its back color and border color.

The following code demonstrates how to override the Text and BackColor properties of the Control class. This is useful in setting the default values of the properties when the custom control appears on the form.

public partial class CustomLabel: Control {
    private string labelText;
    private Color bgColor = Color.darkBlue;
    public override string Text {
        get {
            return labelText;
        }
        set {
            labelText = value;
            Invalidate();
        }
    }
    public override Color BackColor {
        get {
            return bgColor;
        }
        set {
            bgColor = value;
        }
    }
    protected override void OnPaint(PaintEventArgs pe) {
        Graphics graphics = this.CreateGraphics();
        graphics.FillRectangle(new SolidBrush(bgColor), ClientRectangle);
        graphics.DrawString(labelText, new Font(“Times”, 12), Brushes.Wheat, new Point(5, 5));
    }
}

The Text property of the Control class is overridden. The BackColor property is also overridden to set the default color as dark blue. When the custom control is added to the form, the control appears with dark blue as the background color and customLabel as the default text. This text and background color appear on the label due to the Invalidate() method, which in turn, calls the OnPaint() method. This method redraws the control within the given client area along with the specified text and background color.

UserControl Class

 The UserControl class allows the user to create controls that can be used in many places within an application of across multiple applications.

Table shows the properties of UserControl class

Property	Description
AutoSizeMode	Specifies or retrieves the way a control will resize itself.
AutoValidate	Specifies or retrieved the way a control performs validation when the focus is switched to another control
HorizontalScroll	Retrieves the characteristics of the horizontal scroll bar.
VerticalScroll	Retrieves the characteristics of the vertical scroll bar.

Table below the methods of UserControl class.

Method	Description
PerformAutoScale	Performs automatic scaling of the specified container control and its child controls.
ScrollControlView	Scrolls the specified control into view.

Table shows the events of UserControl class.

Event	Description
AutoValidateChanged	It occurs when the value of AutoValidate property is changed.
Load	Before the specified control becomes visible for the first time.

Code below shows how to create custom scroll bars using the UserControl class.

public partial class ScrollControl: UserControl {
    protected override void OnPaint(PaintEventArgs e) {
        this,
        VerticalScroll,
        Visible = true;
        this.HorizontalScroll.Visible = true;
        this.PerformAutoScale();
    }
    private void ScrollControl_Load(object sender, EventArgs e) {
        this.VericalScroll.Minimum = 0;
        this.VerticalScroll.Maximum = 100;
        this.HorizontalScroll.Minimum = 0;
        this.HorizontalScrollMaximum = 60;
    }
}

The OnPaint() method is invoked to set the vertical and horizontal scroll bars. This is done using the VerticalScroll and HorizontalScroll properties of the UserControl class. The PerformAutoScale() method automatically scales the control and its container control. When the created custom control is loaded, the Load event is raised. When this event is raised, the Minimum and Maximum properties sets the minimum and maximum limits for both the scroll bars.

Control Type Recommendations

Windows Forms provide the user with a variety of options while working with controls. The user can either use the Windows Forms controls or create a new control. But, sometimes, the user might get confused about the type of control to be used in the application. The difference between various types of controls from which the user can inherit are listed as follows:

Inheriting Windows Forms Controls

Inheriting Windows Forms controls allows the user to implement the functionalities of the inherited control. The user can also extend the functionalities of the inherited control. The user can inherit from the Windows Forms control if the inheriting control fulfills most of the application’s requirements.

Inheriting the Control Class

The user can inherit from the Control class while customizing the appearance of the control. Also, inheriting the control class allows the user to implement the functionalities that are not provided by the standard controls.

Inheriting the UserControl Class

When the user wants to combine the functionalities of several Windows Forms controls, a user can create a composite control by inheriting the UserControl class.

Property- Changed Events

 Windows Forms allows the user to send notifications when the value of the property is changed. The user can send notifications by defining an event and then a method that raises the event. The event name is the name of the property by appending the word, Changed, to the name of the property. For example, if the name of the property is BackColor, the user can define an event named BackColorChanged and the event-handler method named OnBackColorChanged.

Event handlers can be created to respond to property- change events. This allows developers to define various actions that can take place when a property of the control is changed.

Code below creates a custom TextBox control and raises an event when a value in the control is changed

public partial class TxtPrincipal: TextBox {
    int years;
    float rate;
    double principal;
    double interest;
    protected override void OnTextChanged(EventArgs e) {
        years = 10;
        rate = 8.5 F;
        principal = 0;
        interest = 0;
        try {
            principal = Convert.ToDouble(this.Text);
            interest = (principal * years * rate) / 100;
            this.Parent.Text = ”Interest is: ”+interest.ToString();
        } catch (Exception ex) {
            MessageBox.Show(“Enter the numeric value only.”, ”ABCDBank”, MessageBoxButtons.OK, MessageBoxIcon.Error);
            this.Focus();
        }
    }
}

In this code, a custom textbox namely, TxtPrincipal is created. The OnTextChanged event is overridden and is raised when the value in the control is changed. The code calculated the interest using the values specified in the control.

Summary

User-defined controls can be created by inheriting the control class. UserControl class, or any windows forms existing control’s class. The HorizontalScroll and VerticalScroll properties of the UserControl class can be used to define custom scroll bars. The GetImage() method of the ToolBoxBitmapAttribute class retrieves the image icon associated with the custom control. Composite controls are user controls that are created using one or more Windows Forns controls. Property-changed events allows the user to send notification whenever the value of the property is changed.

В Windows Forms пользовательские элементы управления (User Controls) позволяют создавать свой собственный, уникальный интерфейс для приложений на C#. В этой статье мы рассмотрим процесс создания нестандартного элемента управления в Windows Forms.

1. Создание новой формы.

Прежде всего, мы должны создать новую форму, на которой будет располагаться наш пользовательский элемент управления. Для этого нажмите правой кнопкой мыши на проект в Solution Explorer и выберите пункт «Add New Item».

Далее в списке шаблонов выберите значок «Windows Form». Введите имя для новой формы и нажмите «Add».

2. Создание пользовательского элемента управления.

Теперь мы можем создать пользовательский элемент управления. Для этого нажмите правой кнопкой мыши на проект в Solution Explorer и выберите пункт «Add New Item».

В списке шаблонов выберите значок «User Control». Введите имя для нового элемента и нажмите «Add».

3. Редактирование пользовательского элемента управления.

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

4. Добавление пользовательского элемента управления на форму.

Перетащите пользовательский элемент управления из Solution Explorer на новую форму, которую мы создали в первом шаге.

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

5. Создание свойства для пользовательского элемента управления.

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

private string _textValue;
public string TextValue
{
get { return _textValue; }
set { label1.Text = value; _textValue = value; }
}

В данном примере мы создаем новое свойство «TextValue», которое возвращает и устанавливает значение строки, содержащейся в лейбле. Мы также сохраняем значение этого свойства в частном поле «_textValue», чтобы мы могли использовать его в других областях кода.

6. Использование пользовательского элемента управления.

Теперь мы можем использовать наш новый пользовательский элемент управления в приложении. Для этого нам нужно обратиться к пользовательскому элементу управления по имени и установить значение для его свойства «TextValue». Пример:

myUserControl1.TextValue = «Hello world!»;

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

Создание пользовательских элементов управления Windows Forms

Платформа .NET предлагает для разработчиков очень простой способ создания пользовательских элементов интерфейса. В отличие от (теперь уже считающихся устаревшими) элементов управления ActiveX, для элементов управления Windows Forms не требуется громоздкая инфраструктура COM или сложное управление памятью. Вместо этого разработчику нужно просто создать новый класс, получающийся из UserControl, и наполнить этот тип любыми подходящими свойствами, методами и событиями. Для иллюстрации этого процесса мы с помощью Visual Studio 2005 построим пользовательский элемент управления, назвав его CarControl.

Замечание. Как и в случае любого .NET-приложения, вы имеете возможность построить любой пользовательский элемент управления Windows Forms «вручную», используя только текстовый редактор и компилятор командной строки. Как вы вскоре убедитесь, элементы управления содержатся в компоновочных блоках *.dll, поэтому вы должны указать опцию /target:dll компилятора csc.exe.

Начните с запуска Visual Studio 2005 и выберите,для нового проекта рабочее пространство Windows Control Library, указав имя CarControlLibrary (рис 21.27).

Рис. 21.27. Создание нового рабочего пространства Windows Control Library

После создания проекта переименуйте исходный C#-класс в CarControl. Как и в случае проекта Windows Application, ваш пользовательский элемент управления будет скомпонован из двух классов. Файл *.Designer.cs содержит программный код, генерируемый инструментами проектирования, а первичный парциальный класс определяет тип, получающийся из System.Windows.Forms.UserControl.

namespace CarControlLibrary {

 public partial class CarControl: UserControl {

  public CarControl() {

   InitializeComponent();

  }

 }

}

Перед тем как двигаться дальше, давайте рассмотрим общую картину того, что мы хотим получить. Тип CarControl отвечает за анимацию серии точечных рисунков, которые будут изменяться в зависимости от внутреннего состояния автомобиля. Если текущая скорость автомобиля значительно ниже предельной скорости, для CarControl циклически будут отображаться три точечных рисунка, представляющие безопасное движение автомобиля. Если текущая скорость всего на 10 км/ч ниже максимальной, для CarControl используется цикл из четырех рисунков, где четвертый рисунок изображает автомобиль, медленно распадающийся на части. Наконец, если автомобиль превысит максимальную скорость, циклы CarControl будет состоять из пяти рисунков, где пятый рисунок изображает «обреченный» автомобиль.