Учебник. Создание приложения с математическим тестом

  • Статья

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

В интегрированной среде разработки Visual Studio имеются средства, необходимые для создания приложения. Подробнее см. в статье Добро пожаловать в интегрированную среду разработки Visual Studio.

В первом учебнике вы узнаете, как:

  • создавать проект Visual Studio, который использует Windows Forms;
  • добавлять метки, кнопки и другие элементы управления в форму;
  • настраивать свойства для элементов управления;
  • сохранять и запускать проект.

Необходимые компоненты

Для выполнения шагов, описанных в этом учебнике, вам понадобится Visual Studio. Перейдите на страницу загрузки Visual Studio, чтобы получить бесплатную версию.

Создание проекта Windows Forms

Первый шаг в создании математического теста — это создание проекта приложения Windows Forms.

  1. Откройте Visual Studio.

  2. В окне запуска выберите Создание нового проекта.

    Screenshot that shows the Create a new project option in the Visual Studio start window.

  3. В окне Создать проект выполните поиск по фразе Windows Forms. Затем в списке Тип проекта выберите Рабочий стол.

  4. Выберите шаблон Приложение Windows Forms (.NET Framework) для C# или Visual Basic, а затем нажмите Далее.

    Screenshot that shows the Create a new project dialog box. The search box, the Project type list, and two templates are called out.

    Примечание.

    Если шаблон Приложение Windows Forms (.NET Framework) отсутствует, его можно установить из окна Создание проекта. В сообщении Не нашли то, что искали? выберите ссылку Установка других средств и компонентов.

    Screenshot that shows the Install more tools and features link from the Not finding what you're looking for message in the Create new project dialog box.

    После этого выберите пункт Разработка классических приложений .NET в Visual Studio Installer.

    Screenshot that shows the dot NET desktop development workload in Visual Studio Installer.

    В Visual Studio Installer выберите Изменить. Вам может быть предложено сохранить результаты работы. Выберите Продолжить, чтобы установить рабочую нагрузку.

  5. В окне Настроить новый проект назовите проект MathQuiz, а затем выберите Создать.

  1. Откройте Visual Studio.

  2. В окне запуска выберите Создание нового проекта.

    Screenshot that shows the Create a new project option in the Visual Studio start window.

  3. В окне Создать проект выполните поиск по фразе Windows Forms. Затем в списке Тип проекта выберите Рабочий стол.

  4. Выберите шаблон Приложение Windows Forms (.NET Framework) для C# или Visual Basic, а затем нажмите Далее.

    Screenshot that shows the Create a new project dialog box. The search box, the Project type list, and two templates are called out.

    Примечание.

    Если шаблон Приложение Windows Forms (.NET Framework) отсутствует, его можно установить из окна Создание проекта. В сообщении Не нашли то, что искали? выберите ссылку Установка других средств и компонентов.

    Screenshot that shows the Install more tools and features link from the Not finding what you're looking for message in the Create new project dialog box.

    После этого выберите пункт Разработка классических приложений .NET в Visual Studio Installer.

    Screenshot that shows the dot NET desktop development workload in Visual Studio Installer.

    В Visual Studio Installer выберите Изменить. Вам может быть предложено сохранить результаты работы. Выберите Продолжить, чтобы установить рабочую нагрузку.

  5. В окне Настроить новый проект назовите проект MathQuiz, а затем выберите Создать.

Visual Studio создает решение для приложения. Решение является контейнером для всех проектов и файлов, необходимых приложению.

Задание свойств формы

Когда вы выберете шаблон и зададите имя файла, Visual Studio откроет форму. В этом разделе показано, как изменить некоторые свойства формы.

  1. В проекте выберите конструктор Windows Forms. На вкладке конструктора для C# считывается файл Form1.cs [Design], а для Visual Basic — Form1.vb [Design].

  2. Выберите форму Form1.

  3. В окне Свойства теперь отображаются свойства формы. Это окно обычно находится в правом нижнем углу окна Visual Studio. Если окно Свойства не отображается, выберите Вид>Окно свойств.

  4. В окне Свойства найдите свойство Text. В зависимости от того, как отсортирован список, может потребоваться прокрутить вниз. Введите значение Математический тест для значения Текст и нажмите клавишу ВВОД.

    Форма теперь содержит текст "Математический тест" в заголовке окна.

    Примечание.

    Свойства можно отображать по категориям или по алфавиту. Для переключения между свойствами в окне Свойства используйте соответствующие кнопки.

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

    Можно изменить размер формы, перетаскивая ее края или маркер перетаскивания, пока в окне Свойства не отобразится верное значение Размер. Этот маркер представляет собой небольшой белый квадрат в правом нижнем углу формы. Для изменения размера формы также можно использовать свойство Size.

  6. Измените значение свойства FormBorderStyle на Fixed3D, а свойству MaximizeBox установите значение False.

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

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

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

  1. В левой части интегрированной среды разработки Visual Studio выберите вкладку Панель элементов. Если вы ее не видите, выберите пункт Представление>Панель элементов в строке меню или воспользуйтесь комбинацией клавиш CTRL+ALT+X.

  2. Выберите элемент управления Label в окне Панель элементов, а затем перетащите его на форму.

  3. В поле Свойства задайте следующие свойства метки:

    • Задайте для параметра (Name) значение timeLabel.
    • Измените значение свойства AutoSize на False, чтобы можно было изменить размер поля.
    • Измените значение свойства BorderStyle на FixedSingle для отрисовки линии вокруг поля.
    • Задайте для свойства Size значение 200, 30.
    • Выберите свойство Text, а затем щелкните клавишу BACKSPACE, чтобы очистить значение Text.
    • Щелкните знак плюса (+) рядом со свойством Font, а затем установите для свойства Size значение 15,75.

  4. Переместите метку в правый верхний угол формы. Используйте синие направляющие линии для размещения элемента управления в форме.

  5. Добавьте еще один элемент управления Label из панели элементов и установите для его размера шрифта значение 15,75.

  6. Задайте свойству Text значение Оставшееся время.

  7. Переместите метку так, чтобы она находилась левее метки timeLabel.

    Screenshot that shows the Time Left label and the remaining time label. The controls are lined up next to each other in the upper-right corner of the form.

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

Первая часть теста — пример на сложение. В этом разделе показано, как использовать метки для отображения этого примера.

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

  2. В поле Свойства задайте следующие свойства метки:

    • Задайте для текста значение ? (вопросительный знак).
    • Задайте для параметра AutoSize значение False.
    • Задайте для свойства Size значение 60, 50.
    • Установите размер шрифта равным 18.
    • Установите для свойства TextAlign значение MiddleCenter.
    • Установите для свойства Location значение 50, 75, чтобы поместить элемент управления в нужное место в форме.
    • Установите для свойства (Name) значение plusLeftLabel.

  3. В форме выберите созданную метку plusLeftLabel. Скопируйте метку, выбрав пункт Изменить>Копировать или CTRL+C.

  4. Вставьте метку в форму три раза, выбрав пункт Изменить>Вставить или CTRL+V три раза.

  5. Разместите три новые метки так, чтобы они располагались в ряд справа от метки plusLeftLabel.

  6. Установите для свойства Text второй метки значение + (знак плюса).

  7. Установите для свойства (Name) третьей метки значение plusRightLabel.

  8. Установите для свойства Text четвертой метки значение = (знак равенства).

  9. Добавьте элемент управления NumericUpDown из области элементов в форму. Подробнее этот вид элементов управления мы рассмотрим позже.

  10. В поле Свойства задайте следующие свойства метки NumericUpDown:

    • Установите размер шрифта равным 18.
    • Установите ширину 100.
    • Задайте для параметра (Name) значение sum.

  11. Выровняйте элемент управления NumericUpDown по элементам управления Label для задачи на сложение.

    Screenshot that shows the first row of the math quiz. Labels are visible, and a control with arrow keys displays a zero.

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

Затем добавьте метки в форму для оставшихся арифметических примеров.

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

  2. Переместите новые элементы управления на следующую строку под элементами управления для сложения.

  3. В поле Свойства задайте следующие свойства для новых элементов управления:

    • Задайте для свойства (Name) первой метки со знаком вопроса значение minusLeftLabel.
    • Установите для свойства Text второй метки значение - (знак минуса).
    • Задайте для свойства (Name) второй метки со знаком вопроса значение minusRightLabel.
    • Задайте для свойства (Name) элемента управления the NumericUpDown значение difference.

  4. Скопируйте элементы управления для сложения и вставьте их в форму еще два раза.

  5. Для третьей строки:

    • Задайте для свойства (Name) первой метки со знаком вопроса значение timesLeftLabel.
    • Установите для свойства Text второй метки значение × (знак умножения). Вы можете скопировать знак умножения из этого учебника и вставить его в форму.
    • Задайте для свойства (Name) второй метки со знаком вопроса значение timesRightLabel.
    • Задайте для свойства (Name) элемента управления NumericUpDown значение product.

  6. Для четвертой строки:

    • Задайте для свойства (Name) первой метки со знаком вопроса значение dividedLeftLabel.
    • Установите для свойства Text второй метки значение ÷ (знак деления). Вы можете скопировать знак деления из этого учебника и вставить его в форму.
    • Задайте для свойства (Name) второй метки со знаком вопроса значение dividedRightLabel.
    • Задайте для свойства (Name) элемента управления NumericUpDown значение quotient.

Screenshot that shows a math quiz with four rows of problems. Labels and controls with arrow keys are visible.

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

В этом разделе показано, как добавить кнопку запуска. Также необходимо указать последовательность перехода для элементов управления. Этот порядок определяет, как в тесте осуществляется переход от одного элемента управления к другому с помощью клавиши TAB.

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

  2. В поле Свойства задайте следующие свойства для элемента управления Button:

    • Задайте для свойства (Name) значение startButton.
    • Задайте свойству Text значение Начать тест.
    • Установите размер шрифта равным 14.
    • Установите для свойства AutoSize значение True, которое вызывает автоматическое изменение размера кнопки в зависимости от размера текста.
    • Установите для TabIndex значение 0. При этом значении кнопка запуска первой появляется в фокусе.

  3. Разместите кнопку по центру в нижней части формы.

    Screenshot that shows a math quiz with four rows of problems and a start button.

  4. В поле Свойства задайте свойство TabIndex для каждого элемента управления NumericUpDown:

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

Запустите приложение.

Арифметические примеры пока не работают в тесте. Но вы по-прежнему можете запустить приложение, чтобы проверить, работает ли значение TabIndex должным образом.

  1. Для сохранения приложения используйте один из указанных ниже методов:

    • Нажмите клавиши CTRL+SHIFT+S.
    • В строке меню выберите Файл>Сохранить все.
    • На панели инструментов нажмите кнопку Сохранить все.

  2. Для запуска приложения используйте один из следующих методов:

    • Нажмите клавишу F5.
    • В строке меню выберите Отладка>Начать отладку.
    • На панели инструментов нажмите кнопку Запустить.

  3. Дважды щелкните клавишу TAB, чтобы увидеть, как фокус перемещается от одного элемента управления к другому.

Следующие шаги

Перейдите к следующему учебнику, чтобы добавить случайные арифметические примеры и обработчик событий в математический тест.

Учебник. Часть 2. Добавление арифметических примеров в приложение WinForms с математическим тестом