Tutorial: Erstellen einer WinForms-App für ein Mathequiz

In dieser Reihe von vier Tutorials erstellen Sie ein Mathequiz. Das Quiz enthält vier zufällige mathematische Probleme, die Quizteilnehmer*innen innerhalb einer angegebenen Zeit zu beantworten versuchen.

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

In diesem ersten Tutorial lernen Sie Folgendes:

• Erstellen eines Visual Studio-Projekts, das Windows Forms verwendet.
• Hinzufügen von Bezeichnungen, einer Schaltfläche und anderen Steuerelementen zu einem Formular
• Festlegen von Eigenschaften für das Steuerelement
• Speichern und Ausführen des Projekts

Voraussetzungen

Für dieses Tutorial benötigen Sie Visual Studio. Besuchen Sie die Seite Visual Studio-Downloads, um eine kostenlose Version zu erhalten.

Erstellen Ihres Windows Forms-Projekts

Wenn Sie ein Mathequiz erstellen, besteht der erste Schritt in der Erstellung eines Windows Forms-App-Projekts.

1. Öffnen Sie Visual Studio.

2. Klicken Sie im Startfenster auf Neues Projekt erstellen.

   

3. Suchen Sie im Fenster Neues Projekt erstellen nach Windows Forms. Wählen Sie dann in der Liste Projekttyp die Option Desktop aus.

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

   

   Hinweis

   Wenn die Vorlage Windows Forms-App (.NET Framework) nicht angezeigt wird, können Sie sie über das Fenster Neues Projekt erstellen installieren. Klicken Sie in der Meldung Sie finden nicht, wonach Sie suchen? auf den Link Weitere Tools und Features installieren.

   

   Wählen Sie dann im Visual Studio-Installer .NET-Desktopentwicklung aus.

   

   Klicken Sie im Visual Studio-Installer auf Ändern. Möglicherweise werden Sie aufgefordert, Ihre Arbeit zu speichern. Wählen Sie als Nächstes Weiter aus, um die Arbeitsauslastung zu installieren.

5. Geben Sie ihrem Projekt im Fenster Neues Projekt konfigurieren den Namen MathQuiz, und klicken Sie dann auf Erstellen.

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

Festlegen von Formulareigenschaften

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

1. Klicken Sie in Ihrem Projekt auf den Windows Forms-Designer. Die Designer-Registerkarte hat die Bezeichnung Form1.cs [Design] für C# oder Form1.vb [Design] für Visual Basic.

2. Wählen Sie das Formular Form1 aus.

3. Im Eigenschaftenfenster 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 Ansicht>Eigenschaftenfenster aus.

4. Suchen Sie die Text-Eigenschaft im Eigenschaftenfenster. Je nachdem, wie die Liste sortiert wird, müssen Sie möglicherweise einen Bildlauf nach unten durchführen. 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 „Math Quiz“ (Mathequiz) in der Titelleiste.

   Hinweis

   Sie können Eigenschaften nach Kategorie oder alphabetisch anzeigen. Verwenden Sie die Schaltflächen im Eigenschaftenfenster, um hin- und herzuwechseln.

5. Ändern Sie die Größe des Formulars in eine Breite von 500 Pixeln und eine Höhe von 400 Pixeln.

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

6. Ändern Sie den Wert der Eigenschaft FormBorderStyle in Fixed3D, und legen Sie die Eigenschaft MaximizeBox auf False fest.

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

Erstellen des Felds für die verbleibende Zeit

Das Mathequiz enthält ein Feld in der oberen rechten Ecke. In diesem Feld wird die Anzahl der Sekunden angezeigt, die für das Quiz verbleiben. In diesem Abschnitt erfahren Sie, wie Sie eine Bezeichnung für dieses Feld verwenden. In einem späteren Tutorial dieser Reihe fügen Sie Code für den Countdowntimer hinzu.

1. Klicken Sie auf der linken Seite der Visual Studio-IDE auf die Registerkarte Toolbox. Wenn die Toolbox nicht angezeigt wird, klicken Sie auf der Menüleiste auf Ansicht>Toolbox, oder drücken Sie STRG+ALT+X.

2. Wählen Sie im Fenster Toolbox das Label-Steuerelement aus, und ziehen Sie es dann in 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, damit Sie die Größe des Felds ändern können.
   • Ändern Sie den BorderStyle-Wert in FixedSingle, um eine Linie um das Feld zu zeichnen.
   • Legen Sie die Größe auf 200, 30 fest.
   • 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 die Größe auf 15,75 fest.

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

5. Fügen Sie ein weiteres Label-Steuerelement aus der Toolbox hinzu, und legen Sie dessen Schriftgrad auf 15,75 fest.

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

7. Verschieben Sie die Bezeichnung, sodass sie links von der Bezeichnung timeLabel platziert ist.

   

Hinzufügen von Steuerelementen für die Additionsaufgabe

Der erste Teil des Quiz ist eine Additionsaufgabe. In diesem Abschnitt erfahren Sie, wie Sie Bezeichnungen verwenden, um diese Aufgabe anzuzeigen.

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:

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

3. Klicken Sie im Formular auf die erstellte plusLeftLabel-Bezeichnung. Kopieren Sie die Bezeichnung, indem Sie auf Bearbeiten>Kopieren klicken oder STRG+C drücken.

4. Fügen Sie die Bezeichnung dreimal in das Formular ein, indem Sie dreimal auf Bearbeiten>Einfügen klicken oder STRG+V drücken.

5. Ordnen Sie die drei neuen Bezeichnungen so an, dass sie in einer Zeile auf der rechten Seite der Bezeichnung plusLeftLabel stehen.

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. Später erfahren Sie mehr über diese Art Steuerelement.

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

    • Legen Sie den Schriftgrad auf 18 fest.
    • Legen Sie die Breite auf 100 fest.
    • 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 Divisionsaufgaben

Fügen Sie dem Formular als Nächstes Bezeichnungen für die verbleibenden mathematischen Aufgaben hinzu.

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

2. Verschieben Sie die neuen Steuerelemente so, dass sie unterhalb der Additionssteuerelemente angezeigt 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 den 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 zweimal in das Formular ein.

5. Für die dritte Zeile:

   • Legen Sie die (Name) -Eigenschaft der ersten Fragezeichenbezeichnung auf timesLeftLabel fest.
   • Legen Sie den Text der zweiten Bezeichnung auf × (Malzeichen) fest. Sie können das Malzeichen aus diesem Tutorial 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.
   • Legen Sie den Text der zweiten Bezeichnung auf ÷ (Divisionszeichen) fest. Sie können das Divisionszeichen aus diesem Tutorial 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 Startschaltfläche und Festlegen der Reihenfolge zum Wechseln zwischen Steuerelementen mithilfe der TAB-TASTE

In diesem Abschnitt erfahren Sie, wie Sie eine Startschaltfläche hinzufügen. Sie geben auch die Aktivierreihenfolge der Steuerelemente an. Diese Reihenfolge bestimmt, wie Quizteilnehmer*innen unter Verwendung der TAB-TASTE von einem Steuerelement zum nächsten wechseln.

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

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

   • Legen Sie die (Name) -Eigenschaft auf startButton fest.
   • Legen Sie den Text auf Start the quiz (Quiz starten) fest.
   • Legen Sie den Schriftgrad auf 14 fest.
   • Legen Sie AutoSize auf true fest. Dies bewirkt, dass die Größe der Schaltfläche automatisch an die Textlänge angepasst wird.
   • Legen Sie TabIndex auf 0 fest. Durch diesen Wert wird die Startschaltfläche zum ersten Steuerelement, das den Fokus erhält.

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 NumericUpDown-Steuerelements sum (Summe) auf 1 fest.
   • Legen Sie TabIndex des NumericUpDown-Steuerelements difference (Differenz) auf 2 fest.
   • Legen Sie TabIndex des NumericUpDown-Steuerelements product (Produkt) auf 3 fest.
   • Legen Sie TabIndex des NumericUpDown-Steuerelements quotient (Quotient) auf 4 fest.

Ausführen der App

Die mathematischen Aufgaben im Quiz funktionieren noch nicht. Sie können Ihre App jedoch trotzdem 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+UMSCHALT+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:

   • Drücken Sie F5.
   • Klicken Sie in der Menüleiste auf Debuggen>Debuggen starten.
   • Wählen Sie auf der Symbolleiste die Schaltfläche Start aus.

3. Drücken Sie mehrmals die TAB-TASTE, um herauszufinden, wie sich der Fokus von einem Steuerelement zum nächsten verschiebt.

Nächste Schritte

Im nächsten Tutorial erfahren Sie, wie Sie Ihrem Mathequiz zufällige mathematische Aufgaben und einen Ereignishandler hinzufügen.

Tutorial Teil 2: Hinzufügen mathematischer Aufgaben zu einer WinForms-App für ein Mathequiz