Шаг 1. Создание проекта и добавление в форму элементов управления Label

Статья
06/10/2015

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

Примечание
Этот раздел входит в серию учебников, посвященных основам написания кода.Общие сведения об учебнике см. в разделе Учебное руководство 2. Создание ограниченной по времени математической головоломки.

Создание проекта и задание свойств для формы

В строке меню выберите Файл, Создать, Проект.
В списке Установленные шаблоны выберите C# или Visual Basic.
В списке шаблонов выберите шаблон Приложение Windows Forms, назовите его "Математическая головоломка", а затем нажмите кнопку ОК.

Появится форма с именем Form1.cs или Form1.vb, в зависимости от выбранного языка программирования.
Выберите форму и измените значение свойства Text на Математическая головоломка.

Окно Свойства содержит свойства формы.
Измените размер формы на 500 пикселей в ширину и 400 пикселей в высоту.

Изменить размер формы можно, перетаскивая ее границы до тех пор, пока в левом нижнем углу интегрированной среды разработки не появится нужный размер.Другой вариант — изменить значения свойства Size.
Измените значение свойства FormBorderStyle на Fixed3D, а свойству MaximizeBox установите значение False.

Эти значения не позволят игрокам изменять размеры формы.

Создание поля "Осталось времени"

Добавьте элемент управления Label из панели элементов, затем установите для его свойства (Name) значение timeLabel.

Эта метка станет полем в правом верхнем углу формы, в котором будет отображаться количество секунд, оставшихся на решение головоломки.
Измените значение свойства AutoSize на False, чтобы можно было изменить размер поля.
Измените значение свойства BorderStyle на FixedSingle для отрисовки линии вокруг поля.
Установите значение свойства Size равным 200, 30.
Переместите метку в правый верхний угол формы, где при этом появятся синие линии-разделители.

Эти линии помогают выравнивать элементы управления в форме.
В окне Свойства выберите свойство Text и нажмите клавишу BACKSPACE, чтобы удалить его значение.
Нажмите знак плюса (+) рядом со свойством Font и измените значение свойства Size на 15,75.

Можно изменить несколько свойств шрифта, как показано на следующем рисунке.

Окно свойств с размером шрифта
Добавьте еще один элемент управления Label из панели элементов и установите ее размер шрифта равным 15,75.
Задайте свойству Text значение равное Оставшееся время.
Переместите метку так, чтобы она находилась чуть левее метки timeLabel.

Добавление элементов управления для задачи на сложение

Добавьте элемент управления Label из панели элементов и установите для его свойства Text значение ? (вопросительный знак).
Задайте свойству AutoSize значение False.
Установите значение свойства Size равным 60, 50.
Установите размер шрифта равным 18.
Установите для свойства TextAlign значение MiddleCenter.
Установите для свойства Location значение 50, 75, чтобы поместить элемент управления в нужное место в форме.
Установите для свойства (Name) значение plusLeftLabel.
Выберите метку plusLeftLabel, а затем либо нажмите сочетание клавиш CTRL+C, либо выберите пункт Копировать в меню Правка.
Вставьте метку три раза, либо нажимая сочетание клавиш CTRL+V, либо выбирая пункт Вставить в меню Правка.
Разместите три новые метки так, чтобы они располагались в ряд справа от метки plusLeftLabel.

Для выравнивания меток и регулировки промежутков между ними можно пользоваться линиями-разделителями.
Установите для свойства Text второй метки значение + (знак плюса).
Установите для свойства (Name) третьей метки значение plusRightLabel.
Установите для свойства Text четвертой метки значение = (знак равенства).
Добавьте элемент управления NumericUpDown из панели элементов, установите его размер шрифта равным 18, а его ширину — равной 100.

Подробнее этот вид элементов управления мы рассмотрим позже.
Выровняйте элемент управления NumericUpDown по элементам-меткам для задачи на сложение.
Измените значение свойства (Name) элемента управления NumericUpDown на sum.

Первая строка создана, как показано на следующем рисунке.

Первая строка математической головоломки

Добавление элементов управления для задач на вычитание, умножение и деление

Скопируйте все пять элементов управления для задачи на сложение (четыре элемента управления Label и элемент управления NumericUpDown) и вставьте их.

Теперь форма содержит пять новых элементов управления, которые все еще выбраны.
Переместите все элементы управления так, чтобы выровнять их под элементами управления для сложения.

Для обеспечения достаточного расстояния между строками можно пользоваться линиями-разделителями.
Измените значение свойства Text второй метки на – (знак минуса).
Назовите первую метку с вопросительным знаком minusLeftLabel.
Назовите вторую метку с вопросительным знаком minusRightLabel.
Назовите элемент управления NumericUpDown как difference.
Вставьте эти пять элементов управления еще два раза.
В третьей строке назовите первую метку timesLeftLabel, у второй метки измените значение свойства Text на × (знак умножения), третью метку назовите timesRightLabel, а элемент управления NumericUpDown назовите product.

В четвертой строке назовите первую метку dividedLeftLabel, у второй метки измените значение свойства Text на ÷ (знак деления), третью метку назовите dividedRightLabel, а элемент управления NumericUpDown назовите quotient.

Примечание
Знак умножения × и знак деления ÷ можно скопировать из этого руководства и вставить их в форму.

Добавление кнопки запуска и задание порядка перехода по клавише TAB

Добавьте элемент управления Кнопка из панели элементов и установите для его свойства (Name) значение startButton.
Задайте свойству Text значение Запуск головоломки.
Установите размер шрифта равным 14.
Установите для свойства AutoSize значение True, которое вызывает автоматическое изменение размера кнопки в зависимости от размера текста.
Разместите кнопку по центру в нижней части формы.

Установите значение свойства TabIndex элемента управления startButton равным 1.

Примечание
Свойство TabIndex задает порядок перехода по элементам управления при нажатии клавиши TAB.Чтобы увидеть, как это работает, откройте любое диалоговое окно (например, в строке меню выберите Файл, Открыть), а затем несколько раз нажмите клавишу TAB.Понаблюдайте за тем, как при каждом нажатии клавиши TAB курсор перемещается от одного элемента управления к другому.Порядок этих переходов был задан программистом при создании формы.

Свойство TabIndex задает порядок перехода по элементам управления при нажатии клавиши TAB.Чтобы увидеть, как это работает, откройте любое диалоговое окно (например, в строке меню выберите Файл, Открыть), а затем несколько раз нажмите клавишу TAB.Понаблюдайте за тем, как при каждом нажатии клавиши TAB курсор перемещается от одного элемента управления к другому.Порядок этих переходов был задан программистом при создании формы.

Установите значение свойства TabIndex для элемента управления NumericUpDown с именем sum равным 2, для элемента управления difference равным 3, для элемента управления product равным 4, а для элемента управления quotient равным 5.

Форма должна выглядеть так, как показано на следующем рисунке.

Исходная форма математической головоломки
Чтобы проверить, работает ли свойство TabIndex так, как ожидалось, сохраните программу и запустите ее, нажав клавишу F5 или выбрав пункты Отладка, Начать отладку в строке меню, а затем несколько раз нажмите клавишу TAB.

Продолжить или повторить пройденный материал

Следующий шаг руководства см. в разделе Шаг 2. Создание задачи на сложение случайных чисел.
Общие сведения см. в разделе Учебное руководство 2. Создание ограниченной по времени математической головоломки.

Поделиться через