Диалоговое окно ввода цифр кликом мышки

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

Создадим новый проект по шаблону «Приложение Windows Forms (.NET Framework)», добавим в конструкторе 3 стандартных элемента: 2 метки и поле текстового ввода, как на рис. 2 ниже.

В окне «Свойства» для поля текстового ввода назначим обработчик события «MouseClick». Добавим в проект новую форму и назовём её, например, «FormNumEntering», в которой объявим переменную: «public string s_num;» для хранения строки значения вводимого числа. В обработчике события «MouseClick» создадим диалоговое окно на основе нашей новой формы, покажем его и если будет возвращено значение «DialogResult.OK», т.е. число введено в нашем случае, используем введенное значение в нашей основной форме для вывода в её элементы. Код ниже :

namespace SimpleNumbersWindows
{
    public partial class MainForm : Form
    {
        public MainForm()
        {
            InitializeComponent();
        }

        private void textBox1_MouseClick(object sender, MouseEventArgs e)
        {
            FormNumEntering fne = new FormNumEntering();
            if (fne.ShowDialog() == DialogResult.OK)
            {
                label1.Text = "Введено число : " + fne.s_num;
                textBox1.Text = fne.s_num;
            }
        }
    }
}

Далее наполним «FormNumEntering» стандартными элементами в соответствии с шаблоном на рис. 1, настроим форму, цвета текста и фона кнопок, цвет фона элемента вывода рисунка «PictureBox». В окне «Свойства» для pictureBoxNum назначим обработчик события перерисовки окна «Paint», а также добавим обработчики событий «Click» для всех кнопок. Для кнопки «OK» установим значение свойства «DialogResult» в «OK».

Напишем реализации только что добавленных обработчиков событий в соответствии с кодом ниже:

namespace SimpleNumbersWindows
{
    public partial class FormNumEntering : Form
    {
        public string s_num;
        public FormNumEntering()
        {
            InitializeComponent();
            s_num = "_";
        }

        private void pictureBoxNum_Paint(object sender, PaintEventArgs e)
        {
            if ((s_num.Length > 1) && (s_num[0] == '_'))
            {
                s_num = s_num.Substring(1, s_num.Length - 1);
            }
            Bitmap picGr = new Bitmap(pictureBoxNum.Width, pictureBoxNum.Height);
            Graphics g = Graphics.FromImage(picGr);
            Font fN = new Font(FontFamily.GenericSansSerif, 20.0F, FontStyle.Bold);
            SolidBrush brGR = new SolidBrush(Color.Green);

            g.Clear(pictureBoxNum.BackColor);

            Point p1 = new Point(5, 5);
            g.DrawString(s_num, fN, brGR, p1);

            e.Graphics.DrawImage(picGr, new Point(0, 0));

            brGR.Dispose();
            fN.Dispose();
            g.Dispose();
            picGr.Dispose();
        }
        private void but_C_Click(object sender, EventArgs e)
        {
            s_num = "_";
            pictureBoxNum.Refresh();
        }

        private void but_back_Click(object sender, EventArgs e)
        {
            if (s_num.Length > 0) s_num = s_num.Substring(0, s_num.Length - 1);
            pictureBoxNum.Refresh();
        }

        private void but_0_Click(object sender, EventArgs e)
        {
            s_num += "0";
            pictureBoxNum.Refresh();
        }

        private void but_1_Click(object sender, EventArgs e)
        {
            s_num += "1";
            pictureBoxNum.Refresh();
        }
...
}

Большинство функций реализованы достаточно тривиально. Подробнее остановлюсь на методе «pictureBoxNum_Paint». Кликая по кнопкам цифр, мы добавляем цифры в число s_num. В начале удалим ‘_’ из строки, устанавливаемое при инициализации — блок if. Создадим в памяти область для рисования «Bitmap picGr» по размерам окна «pictureBoxNum» и получим ссылку на его объект «Graphics» — g. Создадим экземпляры классов для шрифта fN и кисть с цветом его вывода brGR. Далее очистим область рисования заполнив её цветом фона, и выведем текст s_num в позицию p1: «g.DrawString(s_num, fN, brGR, p1);»

. Можно для рисования в памяти использовать и другие функции графической библиотеки, перерисовка окна формы при этом не происходит. Функций может быть много, перерисовка окна после выполнения каждой приводит к мерцанию этого элемента. В нашем случае мы выводим уже полностью нарисованный в памяти элемент в форму командой «e.Graphics.DrawImage(picGr, new Point(0, 0));». Осталось освободить память принудительно от созданных при перерисовке экземпляров классов ( .Dispose() ). Запустим наш проект на компиляцию и выполнение, и протестируем то, что получилось:

На главной форме кликнем в пустое поле для ввода числа — появится наш диалог графического ввода. Введём число кликая по кнопкам цифр и нажмём «OK» (рис. 3). В соответствии с нашим кодом для главного окна введённое число будет выведено как на рис. 4.

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