Курс по Windows Forms. Урок третий. Калькулятор.

В прошлом уроке мы прошлись по интерфейсу Visual Studio (сейчас 2017). Сегодня мы сделаем первую программу. Как вы помните, я выбрал просто калькулятор. Т.е. в этом уроке мы разберем как использовать события, свойства, будем использовать Button и Label. Погнали!

Изменение формы. Интерфейс калькулятора.

В прошлом уроке мы уже создали проект. Ссылка на него, если вам нужно, будет в конце урока.

Так, посмотрим на обозреватель решений. Там вы увидите Form1.cs. Откройте его, (двойным нажатием) если он ещё не открыт или вы его зачем-то закрыли.

Теперь зайдите в панель элементов и найдите там элемент Button и Label и перетащите на форму с помощью Drag-n-drop. Это просто.

Теперь нажмите на один из элементов и зайдите посмотрите в панель свойств. Посмотрите что делает каждое свойство. Только осторожней там :)

Теперь, когда вы поигрались можем перейти к делу. Нажмите на нашу кнопку и выберите свойство (Name) (оно находится в категории разработка) Впишите туда значение btn0 (как на рисунке) Это имя - это имя класса, к которому мы обращаемся, изменяя свойства в коде. Это нужно лишь для удобства написания кода. Как вы уже поняли, это кнопка 0 на нашем калькуляторе.

Теперь переходим к свойству Text и вписываем туда 0 и находим свойство Font и вписываем где размер шрифта (после названия шрифта) значение 15pt т.е. размер шрифта 15. Однако теперь буквы находятся за пределами кнопки. Значит надо увеличить кнопку белыми квадратиками (да, я знаю что это все знают, но надо охватить всё)

Повторяем действия делая также и с другими кнопками (0, 1, 2, 3, 4, 5, 6, 7, 8, 9) Вы можете просто скопировать кнопку, чтобы не мучится с размером и шрифтом.

У вас должно получиться примерно так. Советую сделать кнопки вытянутыми вертикально.

Далее берем наш Label и также у него изменяем размер шрифта на 15pt, а свойство Text на Введите данные для подсчета... Или что-то своё, тут уже нужно воображение. Нам нужно еще два Label - один будет показывать активный алгебраический оператор, а другой другой операнд. Также уменьшите размер формы.

Конечно, UX у нас просто ужасен, но мы тут практикуемся, так что уберите своих UX дизайнеров от экрана, если таковые есть. Теперь добавим кнопки подсчета (равно/результат), суммы и разности. Их делать идентично остальным кнопкам, но давайте поиграемся с размером, раз есть место.

Теперь давайте наконец приступим к коду.

Свойства. Присваиваем значения

В коде чтобы использовать/изменять свойства, нам нужно к ним обратиться, как к полям класса. Чтобы обратиться к свойствам компонента нам нужно узнать название этого свойства (слева от значения в панели свойств) и обратиться к нему с помощью названия компонента (свойство (Name) о котором мы говорили на прошлом уроке). Название - имя класса. Т.е. если мы хотим обратиться, например, к свойству Text компонента Label и присвоить ему значение Hello World!,то мы должны написать следующее:

Label.Text = "Hello World!";

Заметьте, что у каждого свойства свой тип данных, т.е. это переменная (или поле класса) Например, у свойства Text тип String.

События

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

Выбираем любую из кнопок, например, сумму и в панели свойств зайдем в вкладку события. Там мы выбираем какой метод (или функция) будет выполняться при этом событии. В можете также и создать новый метод, для этого нам следует просто вписать название нового метода (в нашем случае путь будет Summ) и нажимаем Enter. Событие само появится в коде Form1.cs. Также надо упомянуть, что можно выбирать только методы из Form1.cs!

Теперь заходим в код Form1.cs, чтобы выбрать что именно будет выполняться при нажатии. Для этого нажмите ПКМ по Form1.cs в обозревателе решений и выберите Перейти к коду. Теперь проявляем то, чему вы учились - кодить!

Пишем в методе Summ следующее: (не бойтесь, я объясню всё, что буду писать)

    public partial class Form1 : Form
    {
        string MathOper; //здесь будут вписаны наши операторы
        bool IsThereFirstNumber = false; //для проверки на "пустоту". Если чисел нет, то ставим 0 (это для дробных)
        bool Start = false; //нужно, чтобы мы знали, ушло ли значение "введите данные" с дисплея

        public Form1()
        {
            InitializeComponent();
        }

        private void Summ(object sender, EventArgs e)
        {
            MathOper = "+"; //говорим, что теперь активная операция - это сумма
            label1.Text = Convert.ToString(MathOper); //присваиваем label1 (активной операции) значение +
        }
    }

Далее будем опираться на данном коде для остальных операторов.

Повторяем создание метода для события с разницей, но вписываем следующий код:

private void Sub(object sender, EventArgs e)
        {
            MathOper = "-"; //тут код единтичен предыдущему, и комментарии не требуются
            label1.Text = Convert.ToString(MathOper);
        }

С плюсом и минусом разобрались, но что насчет чисел? К сожалению с событиями не получиться использовать один метод, но изменять переменную. В событиях почему-то это не работает (ждём от WPF обратного ;D ) но мне предложили один интересный выход:

в конструкторе можно запихнуть пользовательские данные (свойство Tag) а потом в общем обработчике через Sender их вытягивать.

Будем поступать именно так:

        private void NumberChange(object sender, EventArgs e)
        {
            var button = sender as Button; //берем Tag как носитель числа
            var num = button.Tag;
            if (Start)
            {
                Start = true; //показываем, что мы начали
                IsThereFirstNumber = true; //показываем, что теперь первое число есть
                label.Text += num; //добавляем число
            }
            else
            {
                label.Text = Convert.ToString(num);
                Start = true;
                IsThereFirstNumber = true;
            }
        }

Также вы должны найти свойство Tag у кнопок цифр и присвоить ему значение цифры кнопки (0, 1, 2, 3 и т.д.) Это немного костыль, но это не страшно.

Конец урока

Я думаю на этом пора закончить урок, и так он вышел долгим и задержался. Пока что всё что умеет наш калькулятор - водить число и выбирать операцию. Ждите следующую часть, она выйдет уже совсем скоро!