Lernprogramm: Erstellen einer WinForms-App für mathematische Tests

In dieser Reihe von vier Lernprogrammen erstellen Sie ein mathematisches Quiz. Das Quiz enthält vier zufällige mathematische Probleme, die ein Quiz taker innerhalb eines bestimmten Zeitraums beantworten möchte.

Die integrierte Entwicklungsumgebung (Integrated Development Environment, IDE) von Visual Studio stellt die Tools bereit, die Sie zum Erstellen der App benötigen. Weitere Informationen zu dieser IDE finden Sie unter Willkommen bei der Visual Studio IDE.

In diesem ersten Lernprogramm erfahren Sie, wie Sie:

• Erstellen Sie ein Visual Studio-Projekt, das Windows Forms verwendet.
• Hinzufügen von Beschriftungen, einer Schaltfläche und anderen Steuerelementen zu einem Formular.
• Legen Sie Eigenschaften für die Steuerelemente fest.
• Speichern und ausführen Sie Ihr Projekt.

Voraussetzungen

Sie benötigen Visual Studio, um dieses Lernprogramm abzuschließen. Besuchen Sie die Visual Studio-Downloadseite für eine kostenlose Version.

Anmerkung

Dieses Tutorial erfordert die Windows Forms App (.NET Framework)-Projektvorlage. Wählen Sie während der Installation die .NET-Desktopentwicklung-Workload aus:

Wenn Sie Visual Studio bereits installiert haben und sie hinzufügen müssen, wählen Sie im Menü Tools>Tools und Features abrufenaus, oder wählen Sie im Fenster Erstellen eines neuen Projekts den Link Weitere Tools und Features installieren Link aus.

Erstellen Ihres Windows Forms-Projekts

Wenn Sie ein mathematisches Quiz erstellen, besteht der erste Schritt darin, ein Windows Forms-App-Projekt zu erstellen.

1. Öffnen Sie Visual Studio.

2. Wählen Sie im Startfenster Neues Projekt erstellenaus.

   

3. Suchen Sie im Fenster Erstellen eines neuen Projekts nach Windows Forms. Wählen Sie dann in der Liste Projekttyp die Option Desktop aus.

4. Wählen Sie die Windows Forms App (.NET Framework) Vorlage für C# oder Visual Basic aus, und wählen Sie dann Nextaus.

   

5. Geben Sie im Fenster Konfigurieren des neuen Projekts Ihrem Projekt den Namen MathQuizund wählen Sie dann Erstellenaus.

Visual Studio erstellt eine Lösung für Ihre App. Eine Lösung ist ein Container für alle Projekte und Dateien, die Ihre App benötigt.

Festlegen von Formulareigenschaften

Nachdem Sie Ihre Vorlage ausgewählt und die Datei benannt haben, öffnet Visual Studio ein Formular für Sie. In diesem Abschnitt erfahren Sie, wie Sie einige Formulareigenschaften ändern.

1. Wählen Sie in Ihrem Projekt Windows Forms Designeraus. Die Registerkarte "Designer" wird Form1.cs [Entwurf] für C# oder Form1.vb [Entwurf] für Visual Basic bezeichnet.

2. Wählen Sie das Formular Form1aus.

3. Im Fenster Eigenschaften werden nun Eigenschaften für das Formular angezeigt. Dieses Fenster befindet sich in der Regel in der unteren rechten Ecke von Visual Studio. Wenn Eigenschaften nicht angezeigt wird, wählen Sie Anzeigen>Eigenschaftenfenster aus.

4. Suchen Sie die eigenschaft Text im Fenster Eigenschaften. Je nachdem, wie die Liste sortiert ist, müssen Sie möglicherweise nach unten scrollen. Geben Sie den Wert Math Quiz (Mathequiz) für den Text-Wert ein, und drücken Sie dann die EINGABETASTE.

   Ihr Formular enthält nun den Text "Mathematisches Quiz" in der Titelleiste.

   Anmerkung

   Sie können Eigenschaften nach Kategorie oder alphabetisch anzeigen. Verwenden Sie die Schaltflächen im Fenster Eigenschaften, um zwischen und zurück zu wechseln.

5. Ändern Sie die Größe des Formulars auf 500 Pixel breit um 400 Pixel hoch.

   Sie können die Größe des Formulars ändern, indem Sie die Ecken oder den Ziehpunkt ziehen, bis die gewünschte Größe als Größe-Wert im Fenster Eigenschaften angezeigt wird. Der Ziehgriff ist ein kleines weißes Quadrat in der unteren rechten Ecke des Formulars. Sie können auch die Größe des Formulars ändern, indem Sie die Werte der eigenschaft Size ändern.

6. Ändern Sie den Wert der FormBorderStyle--Eigenschaft in Fixed3D-, und legen Sie die eigenschaft MaximizeBox auf Falsefest.

   Mit diesen Werte wird verhindert, dass Quizteilnehmende die Größe des Formulars ändern.

Erstellen Sie das Feld mit der verbleibenden Zeit

Das mathematische Quiz enthält ein Feld in der oberen rechten Ecke. In diesem Feld wird die Anzahl der Sekunden angezeigt, die im Quiz verbleiben. In diesem Abschnitt wird gezeigt, wie Sie eine Beschriftung für dieses Feld verwenden. Sie fügen Code für den Countdown-Timer in einem späteren Lernprogramm in dieser Reihe hinzu.

1. Wählen Sie auf der linken Seite der Visual Studio-IDE die Registerkarte Toolbox aus. Wenn die Toolbox nicht angezeigt wird, wählen Sie Ansicht>Toolbox in der Menüleiste oder STRG+ALT-+X-aus.

2. Wählen Sie das Steuerelement Label in der Toolbox aus und ziehen Sie es dann auf das Formular.

3. Legen Sie im Feld Eigenschaften die folgenden Eigenschaften für die Bezeichnung fest:

   • Legen Sie (Name) auf timeLabel fest.
   • Ändern Sie AutoSize- in False-, sodass Sie die Größe des Felds ändern können.
   • Ändern Sie den BorderStyle auf FixedSingle, um eine Linie um die Box zu ziehen.
   • Legen Sie die Größe auf 200, 30fest.
   • Wählen Sie die Text-Eigenschaft aus, und drücken Sie dann auf die RÜCKTASTE, um den Text-Wert zu löschen.
   • Klicken Sie auf das Pluszeichen (+) neben der Eigenschaft Schriftart, und legen Sie dann die Größe auf 15,75 fest.

4. Verschieben Sie die Beschriftung in die obere rechte Ecke des Formulars. Wenn blaue Abstandslinien angezeigt werden, verwenden Sie diese, um das Steuerelement im Formular zu positionieren.

5. Fügen Sie ein weiteres Label Steuerelement aus der Toolboxhinzu, und legen Sie dann den Schriftgrad auf 15,75fest.

6. Legen Sie die Text-Eigenschaft dieser Bezeichnung auf Time Left (Verbleibende Zeit) fest.

7. Verschieben Sie die Beschriftung so, dass sie links neben der timeLabel- Beschriftung angezeigt wird.

   

Hinzufügen von Steuerelementen für das Additionsproblem

Der erste Teil des Quiz ist ein Zusatzproblem. In diesem Abschnitt erfahren Sie, wie Sie mit Bezeichnungen das Problem anzeigen können.

1. Fügen Sie dem Formular ein Label-Steuerelement aus der Toolbox hinzu.

2. Legen Sie im Feld Eigenschaften die folgenden Eigenschaften für die Bezeichnung fest:

   • Setzen Sie den Text auf ? (Fragezeichen).
   • Legen Sie AutoSize auf FALSE fest.
   • Legen Sie die Größe auf 60, 50fest.
   • Legen Sie den Schriftgrad auf 18fest.
   • Legen Sie TextAlign- auf MiddleCenter-fest.
   • Legen Sie die Position auf 50, 75 fest, um das Steuerelement im Formular zu positionieren.
   • Legen Sie (Name) auf plusLeftLabel fest.

3. Wählen Sie im Formular das Label "plusLeftLabel" aus, das Sie erstellt haben. Kopieren Sie die Beschriftung, indem Sie entweder Bearbeiten>Kopieren oder Strg+Causwählen.

4. Fügen Sie die Beschriftung dreimal in das Formular ein, indem Sie entweder Bearbeiten>Einfügen oder STRG+V dreimal auswählen.

5. Ordnen Sie die drei neuen Etiketten so an, dass sie sich rechts von dem Etikett plusLeftLabel befinden.

6. Legen Sie die Text-Eigenschaft der zweiten Bezeichnung auf + (Pluszeichen) fest.

7. Legen Sie die (Name)-Eigenschaft der dritten Bezeichnung auf plusRightLabel fest.

8. Legen Sie die Text-Eigenschaft der vierten Bezeichnung auf = (Gleichheitszeichen) fest.

9. Fügen Sie dem Formular ein NumericUpDown-Steuerelement aus der Toolbox hinzu. Sie erfahren später mehr über diese Art von Steuerelement.

10. Legen Sie im Feld Eigenschaften die folgenden Eigenschaften für das NumericUpDown-Steuerelement fest:

    • Legen Sie den Schriftgrad auf 18fest.
    • Legen Sie unter MaximumSize-die Breite auf 100fest.
    • Legen Sie (Name) auf sum (Summe) fest.

11. Richten Sie das Steuerelement NumericUpDown an den Label-Steuerelementen für die Additionsaufgabe aus.

    

Hinzufügen von Steuerelementen für Subtraktions-, Multiplikations- und Divisionsprobleme

Als Nächstes fügen Sie dem Formular Beschriftungen für die verbleibenden mathematischen Probleme hinzu.

1. Kopieren Sie die vier Label--Steuerelemente und das NumericUpDown Steuerelement, das Sie für das Additionsproblem erstellt haben. Fügen Sie sie in das Formular ein.

2. Verschieben Sie die neuen Steuerelemente so, dass sie unterhalb der Additionssteuerelemente aufgereiht werden.

3. Legen Sie im Feld Eigenschaften die folgenden Eigenschaften für die neuen Steuerelemente fest:

   • Legen Sie die (Name)-Eigenschaft der ersten Fragezeichenbezeichnung auf minusLeftLabel fest.
   • Legen Sie Text der zweiten Bezeichnung auf - (Minuszeichen) fest.
   • Legen Sie die (Name)-Eigenschaft der zweiten Fragezeichenbezeichnung auf minusRightLabel fest.
   • Legen Sie die (Name)-Eigenschaft des NumericUpDown-Steuerelements auf difference (Differenz) fest.

4. Kopieren Sie die Additionssteuerelemente, und fügen Sie sie noch zweimal in das Formular ein.

5. Für die dritte Zeile:

   • Legen Sie die (Name)-Eigenschaft der ersten Fragezeichenbezeichnung auf timesLeftLabel fest.
   • Legen Sie Text der zweiten Bezeichnung auf × (Multiplikationszeichen) fest. Sie können das Multiplikationszeichen aus diesem Lernprogramm kopieren und in das Formular einfügen.
   • Legen Sie die (Name)-Eigenschaft der zweiten Fragezeichenbezeichnung auf timesRightLabel fest.
   • Legen Sie die (Name)-Eigenschaft des NumericUpDown-Steuerelements auf product (Produkt) fest.

6. Für die vierte Zeile:

   • Legen Sie die (Name)-Eigenschaft der ersten Fragezeichenbezeichnung auf dividedLeftLabel fest.
   • Setzen Sie den Text des zweiten Labels auf ÷ (Divisionszeichen) fest. Sie können das Divisionszeichen aus diesem Lernprogramm kopieren und in das Formular einfügen.
   • Legen Sie die (Name)-Eigenschaft der zweiten Fragezeichenbezeichnung auf dividedRightLabel fest.
   • Legen Sie die (Name)-Eigenschaft des NumericUpDown-Steuerelements auf quotient (Quotient) fest.

Hinzufügen einer Starttaste und Festlegen der Reihenfolge mit dem TAB-Index

In diesem Abschnitt wird gezeigt, wie Sie eine Startschaltfläche hinzufügen. Außerdem geben Sie die Registerkartenreihenfolge der Steuerelemente an. Diese Reihenfolge bestimmt, wie Quizteilnehmende unter Verwendung der TAB-TASTE von einem Steuerelement zum nächsten wechseln.

1. Fügen Sie dem Formular ein Button-Steuerelement aus dem Werkzeugkasten hinzu.

2. Legen Sie im Feld Eigenschaften die folgenden Eigenschaften der Schaltfläche fest:

   • Legen Sie die (Name)-Eigenschaft auf startButton fest.
   • Setzen Sie den Text auf Starten Sie das Quiz.
   • Legen Sie den Schriftgrad auf 14fest.
   • Legen Sie AutoSize- auf Truefest, wodurch die Größe der Schaltfläche automatisch an den Text angepasst wird.
   • Legen Sie den TabIndex auf 0fest. Dieser Wert macht die Startschaltfläche zum ersten Steuerelement, um den Fokus zu erhalten.

3. Zentrieren Sie die Schaltfläche am unteren Rand des Formulars.

   

4. Legen Sie im Feld Eigenschaften die TabIndex-Eigenschaft jedes NumericUpDown-Steuerelements fest:

   • Legen Sie TabIndex des sum-Steuerelements auf 1 fest.
   • Legen Sie TabIndex des difference-Steuerelements auf 2 fest.
   • Legen Sie TabIndex des product-Steuerelements auf 3 fest.
   • Legen Sie TabIndex des quotient-Steuerelements auf 4 fest.

Ausführen der App

Die Mathe-Aufgaben funktionieren noch nicht in deinem Quiz. Sie können ihre App jedoch weiterhin ausführen, um zu überprüfen, ob die TabIndex- Werte wie erwartet funktionieren.

1. Verwenden Sie eine der folgenden Methoden, um Ihre App zu speichern:

   • Drücken Sie STRG+UMSCHALTTASTE+S.
   • Klicken Sie auf der Menüleiste auf Datei>Alle speichern.
   • Klicken Sie auf der Symbolleiste auf die Schaltfläche Alle speichern.

2. Verwenden Sie eine der folgenden Methoden, um Ihre App auszuführen:

   • Wählen Sie F5-aus.
   • Wählen Sie auf der Menüleiste Debug>Start Debuggingaus.
   • Wählen Sie auf der Symbolleiste die Schaltfläche Start aus.

3. Wählen Sie die Tabulatortaste ein paar Mal aus, um zu sehen, wie sich der Fokus von einem Steuerelement zum nächsten bewegt.

Nächster Schritt

Wechseln Sie zum nächsten Lernprogramm, um ihrem mathematischen Quiz zufällige mathematische Probleme und einen Ereignishandler hinzuzufügen.

Lernprogramm Teil 2: Hinzufügen mathematischer Probleme zu einer WinForms-App für mathematische Tests