Курс по 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 и т.д.) Это немного костыль, но это не страшно.
Конец урока
Я думаю на этом пора закончить урок, и так он вышел долгим и задержался. Пока что всё что умеет наш калькулятор - водить число и выбирать операцию. Ждите следующую часть, она выйдет уже совсем скоро!