Samouczek: tworzenie testu matematycznego aplikacji WinForms

  • Artykuł

W tej serii czterech samouczków utworzysz test matematyczny. Test zawiera cztery losowe problemy matematyczne, na które test próbuje odpowiedzieć w określonym czasie.

Zintegrowane środowisko projektowe (IDE) programu Visual Studio udostępnia narzędzia potrzebne do utworzenia aplikacji. Aby dowiedzieć się więcej na temat tego środowiska IDE, zobacz Witamy w środowisku IDE programu Visual Studio.

Z tego pierwszego samouczka dowiesz się, jak wykonywać następujące działania:

  • Utwórz projekt programu Visual Studio, który używa formularzy systemu Windows.
  • Dodaj etykiety, przycisk i inne kontrolki do formularza.
  • Ustaw właściwości kontrolek.
  • Zapisz i uruchom projekt.

Wymagania wstępne

Do ukończenia tego samouczka potrzebny jest program Visual Studio. Odwiedź stronę pobierania programu Visual Studio, aby uzyskać bezpłatną wersję.

Tworzenie projektu formularzy systemu Windows

Podczas tworzenia testu matematycznego pierwszym krokiem jest utworzenie projektu aplikacji Windows Forms App.

  1. Otwórz program Visual Studio.

  2. W oknie uruchamiania wybierz pozycję Utwórz nowy projekt.

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

  3. W oknie Tworzenie nowego projektu wyszukaj ciąg Windows Forms. Następnie wybierz pozycję Pulpit z listy Typ projektu.

  4. Wybierz szablon Windows Forms App (.NET Framework) dla języka C# lub Visual Basic, a następnie wybierz przycisk Dalej.

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

    Uwaga

    Jeśli nie widzisz szablonu Aplikacji formularzy systemu Windows (.NET Framework), możesz zainstalować go w oknie Tworzenie nowego projektu . W komunikacie Nie można znaleźć tego, czego szukasz? wybierz pozycję Zainstaluj więcej narzędzi i funkcji.

    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.

    Następnie w Instalator programu Visual Studio wybierz pozycję Programowanie aplikacji klasycznych .NET.

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

    Wybierz pozycję Modyfikuj w Instalator programu Visual Studio. Może zostać wyświetlony monit o zapisanie pracy. Następnie wybierz pozycję Kontynuuj , aby zainstalować obciążenie.

  5. W oknie Konfigurowanie nowego projektu nadaj projektowi nazwę MathQuiz, a następnie wybierz pozycję Utwórz.

  1. Otwórz program Visual Studio.

  2. W oknie uruchamiania wybierz pozycję Utwórz nowy projekt.

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

  3. W oknie Tworzenie nowego projektu wyszukaj ciąg Windows Forms. Następnie wybierz pozycję Pulpit z listy Typ projektu.

  4. Wybierz szablon Windows Forms App (.NET Framework) dla języka C# lub Visual Basic, a następnie wybierz przycisk Dalej.

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

    Uwaga

    Jeśli nie widzisz szablonu Aplikacji formularzy systemu Windows (.NET Framework), możesz zainstalować go w oknie Tworzenie nowego projektu . W komunikacie Nie można znaleźć tego, czego szukasz? wybierz pozycję Zainstaluj więcej narzędzi i funkcji.

    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.

    Następnie w Instalator programu Visual Studio wybierz pozycję Programowanie aplikacji klasycznych .NET.

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

    Wybierz pozycję Modyfikuj w Instalator programu Visual Studio. Może zostać wyświetlony monit o zapisanie pracy. Następnie wybierz pozycję Kontynuuj , aby zainstalować obciążenie.

  5. W oknie Konfigurowanie nowego projektu nadaj projektowi nazwę MathQuiz, a następnie wybierz pozycję Utwórz.

Program Visual Studio tworzy rozwiązanie dla aplikacji. Rozwiązanie to kontener dla wszystkich projektów i plików, których potrzebuje Twoja aplikacja.

Ustawianie właściwości formularza

Po wybraniu szablonu i nazwie pliku program Visual Studio otworzy formularz. W tej sekcji pokazano, jak zmienić niektóre właściwości formularza.

  1. W projekcie wybierz pozycję Windows Forms Projektant. Karta projektanta ma etykietę Form1.cs [Design] dla języka C# lub Form1.vb [Design] for Visual Basic.

  2. Wybierz formularz Form1.

  3. W oknie Właściwości są teraz wyświetlane właściwości formularza. To okno jest zwykle w prawym dolnym rogu programu Visual Studio. Jeśli nie widzisz właściwości, wybierz pozycję Wyświetl>okno właściwości.

  4. Znajdź właściwość Text w oknie Właściwości. W zależności od sposobu sortowania listy może być konieczne przewinięcie w dół. Wprowadź wartość Quiz matematyczny dla wartości Tekstowej, a następnie wybierz klawisz Enter.

    Formularz ma teraz tekst "Math Quiz" na pasku tytułu.

    Uwaga

    Właściwości można wyświetlić według kategorii lub alfabetycznie. Użyj przycisków w oknie Właściwości , aby przełączyć się tam i z powrotem.

  5. Zmień rozmiar formularza na 500 pikseli szerokości o 400 pikseli wysokości.

    Rozmiar formularza można zmienić, przeciągając jego krawędzie lub przeciągając uchwyt do momentu wyświetlenia prawidłowego rozmiaru jako wartości Rozmiar w oknie Właściwości . Uchwyt przeciągania jest małym białym kwadratem w prawym dolnym rogu formularza. Możesz również zmienić rozmiar formularza, zmieniając wartości właściwości Size .

  6. Zmień wartość właściwości FormBorderStyle na Fixed3D i ustaw właściwość MaximizeBox na False.

    Te wartości uniemożliwiają użytkownikom testowym zmianę rozmiaru formularza.

Tworzenie pozostałego pola czasu

Test matematyczny zawiera pole w prawym górnym rogu. To pole pokazuje liczbę sekund, które pozostają w quizie. W tej sekcji pokazano, jak używać etykiety dla tego pola. W dalszej części tej serii dodasz kod czasomierza odliczania.

  1. Po lewej stronie środowiska IDE programu Visual Studio wybierz kartę Przybornik. Jeśli przybornik nie jest widoczny, wybierz pozycję Wyświetl>przybornik na pasku menu lub Ctrl+Alt+X.

  2. Wybierz kontrolkę Label w przyborniku, a następnie przeciągnij ją do formularza.

  3. W polu Właściwości ustaw następujące właściwości etykiety:

    • Ustaw wartość (Nazwa) na timeLabel.
    • Zmień wartość AutoSize na False , aby można było zmienić rozmiar pola.
    • Zmień wartość BorderStyle na FixedSingle, aby narysować linię wokół pola.
    • Ustaw wartość Rozmiar na 200, 30.
    • Wybierz właściwość Text, a następnie wybierz klucz Backspace, aby wyczyścić wartość Tekst.
    • Wybierz znak plus (+) obok właściwości Czcionka , a następnie ustaw wartość Rozmiar na 15,75.

  4. Przenieś etykietę do prawego górnego rogu formularza. Gdy pojawią się niebieskie linie odstępu, użyj ich, aby ustawić kontrolkę na formularzu.

  5. Dodaj kolejną kontrolkę Etykieta z przybornika, a następnie ustaw jej rozmiar czcionki na 15,75.

  6. Ustaw właściwość Text tej etykiety na Wartość Time Left.

  7. Przenieś etykietę tak, aby była w kolejce po lewej stronie etykiety 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.

Dodawanie kontrolek na potrzeby problemu dodawania

Pierwsza część testu jest problemem dodawania. W tej sekcji pokazano, jak używać etykiet do wyświetlania tego problemu.

  1. Dodaj kontrolkę Etykieta z przybornika do formularza.

  2. W polu Właściwości ustaw następujące właściwości etykiety:

    • Ustaw wartość Tekst na ? (znak zapytania).
    • Ustaw wartość AutoSize na Fałsz.
    • Ustaw wartość Rozmiar na 60, 50.
    • Ustaw rozmiar czcionki na 18.
    • Ustaw wartość TextAlign na MiddleCenter.
    • Ustaw pozycję Lokalizacja na 50, 75 , aby umieścić kontrolkę w formularzu.
    • Ustaw wartość (Name) na plusLeftLabel.

  3. W formularzu wybierz utworzoną etykietę plusLeftLabel . Skopiuj etykietę, wybierając pozycję Edytuj>kopię lub Ctrl+C.

  4. Wklej etykietę do formularza trzy razy, wybierając pozycję Edytuj>wklej lub Ctrl+V trzy razy.

  5. Rozmieść trzy nowe etykiety, aby były w wierszu po prawej stronie etykiety plusLeftLabel .

  6. Ustaw właściwość Text drugiej etykiety na + (znak plus).

  7. Ustaw właściwość trzeciej etykiety (Name) na wartość plusRightLabel.

  8. Ustaw właściwość Text czwartej etykiety na = (znak równości).

  9. Dodaj kontrolkę NumericUpDown z przybornika do formularza. Więcej informacji na temat tego rodzaju kontrolki znajdziesz później.

  10. W polu Właściwości ustaw następujące właściwości dla kontrolki NumericUpDown:

    • Ustaw rozmiar czcionki na 18.
    • Ustaw szerokość na 100.
    • Ustaw wartość (Nazwa) na sumę.

  11. Wyrównaj kontrolkę NumericUpDown za pomocą kontrolek Etykieta w celu dodania problemu.

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

Dodawanie kontrolek dla problemów z odejmowaniem, mnożeniem i dzieleniem

Następnie dodaj etykiety do formularza dla pozostałych problemów matematycznych.

  1. Skopiuj cztery kontrolki Etykieta i kontrolkę NumericUpDown utworzoną na potrzeby problemu dodawania. Wklej je w formularzu.

  2. Przenieś nowe kontrolki, aby ustawić wiersz poniżej kontrolek dodawania.

  3. W polu Właściwości ustaw następujące właściwości dla nowych kontrolek:

    • Ustaw wartość (Nazwa) pierwszej etykiety znaku zapytania na minusLeftLabel.
    • Ustaw wartość Tekst drugiej etykiety - na (znak minus).
    • Ustaw wartość (Nazwa) drugiej etykiety znaku zapytania na minusRightLabel.
    • Ustaw wartość (Name) kontrolki NumericUpDown na różnicę.

  4. Skopiuj kontrolki dodawania i wklej je jeszcze dwa razy w formularzu.

  5. W trzecim wierszu:

    • Ustaw wartość (Nazwa) pierwszej etykiety znaku zapytania na timesLeftLabel.
    • Ustaw wartość Tekst drugiej etykiety na × (znak mnożenia). Możesz skopiować znak mnożenia z tego samouczka i wkleić go do formularza.
    • Ustaw wartość (Nazwa) drugiej etykiety znaku zapytania na timesRightLabel.
    • Ustaw wartość (Name) kontrolki NumericUpDown na product.

  6. W czwartym wierszu:

    • Ustaw (nazwa) pierwszej etykiety znaku zapytania na wartość dividedLeftLabel.
    • Ustaw pozycję Tekst drugiej etykiety na ÷ (znak dzielenia). Możesz skopiować znak dzielenia z tego samouczka i wkleić go do formularza.
    • Ustaw wartość (Nazwa) drugiej etykiety znaku zapytania na wartość dividedRightLabel.
    • Ustaw wartość (Name) kontrolki NumericUpDown na wartość quotient.

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

Dodaj przycisk startowy i ustaw kolejność tab-index

W tej sekcji pokazano, jak dodać przycisk uruchamiania. Określisz również kolejność tabulacji kontrolek. To kolejność określa, w jaki sposób użytkownik quizu przenosi się z jednej kontrolki do następnej przy użyciu klawisza Tab .

  1. Dodaj kontrolkę Button z przybornika do formularza.

  2. W polu Właściwości ustaw następujące właściwości przycisku:

    • Ustaw wartość (Name) na startButton.
    • Ustaw pozycję Tekst na Rozpocznij test.
    • Ustaw rozmiar czcionki na 14.
    • Ustaw wartość AutoSize na True, co powoduje, że rozmiar przycisku ma być automatycznie dopasowany do tekstu.
    • Ustaw właściwość TabIndex na 0. Ta wartość sprawia, że przycisk uruchamiania jest pierwszą kontrolką, która ma otrzymać fokus.

  3. Wyśrodkuj przycisk w dolnej części formularza.

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

  4. W polu Właściwości ustaw właściwość TabIndex każdej kontrolki NumericUpDown:

    • Ustaw właściwość TabIndex sumy kontrolki NumericUpDown na 1.
    • Ustaw właściwość TabIndex dla kontrolki NumericUpDown na2.
    • Ustaw właściwość TabIndex kontrolki NumericUpDown produktu na 3.
    • Ustaw właściwość TabIndexkontrolkiNumericUpDown na wartość 4.

Uruchamianie aplikacji

Problemy matematyczne nie działają jeszcze na quizie. Nadal możesz jednak uruchomić aplikację, aby sprawdzić, czy wartości TabIndex działają zgodnie z oczekiwaniami.

  1. Użyj jednej z następujących metod, aby zapisać aplikację:

    • Naciśnij klawisze Ctrl+Shift+S.
    • Na pasku menu wybierz pozycję Plik>Zapisz wszystko.
    • Na pasku narzędzi wybierz przycisk Zapisz wszystko .

  2. Aby uruchomić aplikację, użyj jednej z następujących metod:

    • Wybierz klawisz F5.
    • Na pasku menu wybierz pozycję Debuguj>Rozpocznij debugowanie.
    • Na pasku narzędzi wybierz przycisk Uruchom .

  3. Wybierz klawisz Tab kilka razy, aby zobaczyć, jak fokus przenosi się z jednej kontrolki do następnej.

Następne kroki

Przejdź do następnego samouczka, aby dodać losowe problemy matematyczne i program obsługi zdarzeń do testu matematycznego.

Samouczek, część 2: Dodawanie problemów matematycznych do aplikacji WinForms do testu matematycznego