Zelfstudie: Een WinForms-app voor wiskundige toetsen maken

In deze reeks van vier zelfstudies bouwt u een wiskundige toets. De toets bevat vier willekeurige wiskundige problemen die een toetsnemer probeert te beantwoorden binnen een opgegeven tijd.

De Integrated Development Environment (IDE) van Visual Studio biedt de hulpprogramma's die u nodig hebt om de app te maken. Zie Welkom bij de Visual Studio IDE voor meer informatie over deze IDE.

In deze eerste zelfstudie leert u het volgende:

• Maak een Visual Studio-project dat gebruikmaakt van Windows Forms.
• Voeg labels, een knop en andere besturingselementen toe aan een formulier.
• Eigenschappen voor de besturingselementen instellen.
• Sla uw project op en voer het uit.

Vereiste voorwaarden

U hebt Visual Studio nodig om deze zelfstudie te voltooien. Ga naar de downloadpagina van Visual Studio voor een gratis versie.

Opmerking

Voor deze zelfstudie is de projectsjabloon Windows Forms App (.NET Framework) vereist. Selecteer tijdens de installatie de workload voor .NET-desktopontwikkeling :

Als u Visual Studio al hebt geïnstalleerd en u moet extra functies toevoegen, selecteert u in het menu Extra's>Hulpprogramma's en functies ophalen of selecteert u in het venster Een nieuw project maken de koppeling Meer hulpprogramma's en functies installeren.

Uw Windows Forms-project maken

Wanneer u een wiskundige toets maakt, is de eerste stap het maken van een Windows Forms App-project.

1. Open Visual Studio.

2. Selecteer een nieuw project maken in het startvenster.

   

3. Zoek in het venster Een nieuw project maken naar Windows Forms. Selecteer Vervolgens Desktop in de lijst met projecttypen .

4. Selecteer de Windows Forms-appsjabloon (.NET Framework) voor C# of Visual Basic en selecteer Vervolgens Volgende.

   Schermopname van het dialoogvenster "Een nieuw project maken" met het zoekvak, de lijst met projecttypen en waarbij twee sjablonen zijn uitgelicht.

5. Geef in het venster Uw nieuwe project configureren de naam MathQuiz van uw project en selecteer vervolgens Maken.

Visual Studio maakt een oplossing voor uw app. Een oplossing is een container voor alle projecten en bestanden die uw app nodig heeft.

Formuliereigenschappen instellen

Nadat u de sjabloon hebt geselecteerd en uw bestand een naam hebt gekozen, wordt in Visual Studio een formulier voor u geopend. In deze sectie ziet u hoe u bepaalde formuliereigenschappen kunt wijzigen.

1. Selecteer Windows Forms Designer in uw project. Het tabblad Designer is gelabeld Form1.cs [Ontwerp] voor C# of Form1.vb [Ontwerp] voor Visual Basic.

2. Selecteer het formulier, Form1.

3. In het venster Eigenschappen worden nu eigenschappen voor het formulier weergegeven. Dit venster bevindt zich meestal in de rechterbenedenhoek van Visual Studio. Als u Eigenschappen niet ziet, selecteert uhet venster Eigenschappen weergeven>.

4. Zoek de eigenschap Tekst in het venster Eigenschappen . Afhankelijk van hoe de lijst is gesorteerd, moet u mogelijk omlaag schuiven. Voer de waarde Wiskundetoets in voor de tekstwaarde en selecteer Vervolgens Enter.

   Het formulier bevat nu de tekst 'Wiskundetoets' in de titelbalk.

   Opmerking

   U kunt eigenschappen weergeven op categorie of alfabetisch. Gebruik de knoppen in het venster Eigenschappen om heen en weer te schakelen.

5. Wijzig de grootte van het formulier in 500 pixels breed met 400 pixels hoog.

   U kunt het formaat van het formulier wijzigen door de randen ervan te slepen of de greep te slepen totdat de juiste grootte wordt weergegeven als de waarde Grootte in het venster Eigenschappen . De sleepgreep is een klein wit vierkant in de rechterbenedenhoek van het formulier. U kunt ook het formaat van het formulier wijzigen door de waarden van de eigenschap Grootte te wijzigen.

6. Wijzig de waarde van de eigenschap FormBorderStyle in Fixed3D en stel de eigenschap MaximizeBox in op False.

   Met deze waarden voorkomt u dat quizdeelnemers het formulier kunnen aanpassen.

Het resterende tijdvak maken

De wiskundige toets bevat een vak in de rechterbovenhoek. In dat vak wordt het aantal seconden weergegeven dat overblijft in de quiz. In deze sectie wordt beschreven hoe u een label voor dat vak gebruikt. U voegt code toe voor de afteltimer in een latere zelfstudie in deze reeks.

1. Selecteer aan de linkerkant van de Visual Studio IDE het tabblad Werkset. Als u de werkset niet ziet, selecteert u Werkset weergeven> in de menubalk of Ctrl++.

2. Selecteer het Labelbesturingselement in de werkset en sleep het naar het formulier.

3. Stel in het vak Eigenschappen de volgende eigenschappen voor het label in:

   • Stel de (naam) in op timeLabel.
   • Wijzig AutoSize in False zodat u het formaat van het vak kunt wijzigen.
   • Wijzig de BorderStyle in FixedSingle om een lijn rond het vak te tekenen.
   • Stel de grootte in op 200, 30.
   • Selecteer de eigenschap Tekst en selecteer vervolgens de Toets Backspace om de tekstwaarde te wissen.
   • Selecteer het plusteken (+) naast de eigenschap Lettertype en stel de grootte in op 15,75.

4. Verplaats het label naar de rechterbovenhoek van het formulier. Wanneer blauwe afstandslijnen worden weergegeven, gebruikt u deze om het besturingselement op het formulier te plaatsen.

5. Voeg nog een label besturingselement uit de werkset toe en stel de tekengrootte vervolgens in op 15,75.

6. Stel de Tekst eigenschap van dit label in op Resterende Tijd.

7. Verplaats het label zo dat het links van het label TimeLabel wordt uitgelijnd.

   

Besturingselementen toevoegen voor het optellen probleem

Het eerste deel van de toets is een optellend probleem. In deze sectie wordt beschreven hoe u labels gebruikt om dat probleem weer te geven.

1. Voeg een labelbesturingselement vanuit de werkset toe aan het formulier.

2. Stel in het vak Eigenschappen de volgende eigenschappen voor het label in:

   • Stel de tekst in op ? (vraagteken).
   • Stel AutoSize in op de waarde False.
   • Stel de grootte in op 60, 50.
   • Stel de tekengrootte in op 18.
   • Stel TextAlign in op MiddleCenter.
   • Stel de locatie in op 50, 75 om het besturingselement op het formulier te plaatsen.
   • Stel de (naam) in op plusLeftLabel.

3. Selecteer in het formulier het plusLeftLabel-label dat u hebt gemaakt. Kopieer het label doorKopiëren> of Ctrl+C te selecteren.

4. Plak het label drie keer in het formulier door te kiezen voor Bewerken>Plakken of door drie keer Ctrl+V te gebruiken.

5. Rangschik de drie nieuwe labels zodat ze zich in een rij rechts van het plusLeftLabel-label bevinden .

6. Stel de eigenschap Text van het tweede label in op + (plusteken).

7. Stel de eigenschap (Name) van het derde label in op plusRightLabel.

8. Stel de eigenschap Text van het vierde label in op = (gelijkteken).

9. Voeg een NumericUpDown besturingselement vanuit de werkset toe aan het formulier. U leert later meer over dit soort besturingselementen.

10. Stel in het vak Eigenschappen de volgende eigenschappen in voor het besturingselement NumericUpDown :

    • Stel de tekengrootte in op 18.
    • Stel onder MaximumGrootte de breedte in op 100.
    • Stel de som van de (naam)in.

11. Regel het besturingselement NumericUpDown met de labelbesturingselementen voor het optelprobleem.

    

Besturingselementen toevoegen voor problemen met aftrekken, vermenigvuldigen en delen

Voeg vervolgens labels toe aan het formulier voor de resterende wiskundige problemen.

1. Kopieer de vier labelbesturingselementen en het besturingselement NumericUpDown dat u hebt gemaakt voor het optelprobleem. Plak ze in het formulier.

2. Verplaats de nieuwe besturingselementen naar boven onder de toevoegingsbesturingselementen.

3. Stel in het vak Eigenschappen de volgende eigenschappen in voor de nieuwe besturingselementen:

   • Stel de (naam) van het eerste vraagtekenlabel in op minusLeftLabel.
   • Stel de tekst van het tweede label in op - (minteken).
   • Stel de (naam) van het tweede vraagtekenlabel in op minusRightLabel.
   • Stel de (Naam) van het besturingselement NumericUpDown in op verschil.

4. Kopieer de besturingselementen voor optellen en plak ze nog twee keer in het formulier.

5. Voor de derde rij:

   • Stel de (naam) van het eerste vraagtekenlabel in op timesLeftLabel.
   • Stel de tekst van het tweede label in op × (vermenigvuldigingsteken). U kunt het vermenigvuldigingsteken uit deze zelfstudie kopiëren en in het formulier plakken.
   • Stel de (naam) van het tweede vraagtekenlabel in op timesRightLabel.
   • Stel de (Naam) van de NumericUpDown control in op product.

6. Voor de vierde rij:

   • Stel de (naam) van het eerste vraagtekenlabel in op dividedLeftLabel.
   • Stel de tekst van het tweede label in op ÷ (scheidingsteken). U kunt het deelteken uit deze zelfstudie kopiëren en in het formulier plakken.
   • Stel de (naam) van het tweede vraagtekenlabel in op dividedRightLabel.
   • Stel de (naam) van het besturingselement NumericUpDown in op quotient.

Een startknop toevoegen en de volgorde van de tabindex instellen

In deze sectie ziet u hoe u een startknop toevoegt. U geeft ook de tabvolgorde van de besturingselementen op. Met deze volgorde bepaalt u hoe de deelnemer aan de quiz zich van het ene element naar het andere verplaatst met de Tab-toets.

1. Voeg een Button besturingselement vanuit de werkset toe aan het formulier.

2. Stel in het vak Eigenschappen de volgende eigenschappen van de knop in:

   • Stel de (naam) in op startButton.
   • Stel de tekst in op De toets starten.
   • Stel de tekengrootte in op 14.
   • Stel AutoSize in op True, waardoor de grootte van de knop automatisch wordt aangepast aan de tekst.
   • Stel tabindex in op 0. Deze waarde maakt de startknop het eerste besturingselement om de focus te ontvangen.

3. Centreer de knop vlakbij de onderkant van het formulier.

   

4. Stel in het vak Eigenschappen de eigenschap TabIndex van elk besturingselement NumericUpDown in:

   • Verander de TabIndex van het som-besturingselement naar 1.
   • Stel de TabIndex van het verschil besturingselement in op 2.
   • Stel de TabIndex van het productbeheer in op 3.
   • Stel de TabIndex van het quotientbesturingselement in op 4.

Voer uw app uit

De rekenproblemen werken nog niet op je toets. Maar u kunt uw app nog steeds uitvoeren om te controleren of de TabIndex-waarden werken zoals verwacht.

1. Gebruik een van de volgende methoden om uw app op te slaan:

   • Selecteer Ctrl+Shift+S.
   • Selecteer Alles>opslaan op de menubalk.
   • Selecteer op de werkbalk de knop Alles opslaan .

2. Gebruik een van de volgende methoden om uw app uit te voeren:

   • Selecteer F5.
   • Selecteer in de menubalk de foutopsporing>starten.
   • Selecteer op de werkbalk de knop Start .

3. Selecteer de Tab-toets een paar keer om te zien hoe de focus van het ene besturingselement naar het volgende wordt verplaatst.

Volgende stap

Ga naar de volgende les om willekeurige rekensommen en een event handler toe te voegen aan uw wiskundige quiz.

Zelfstudie deel 2: Wiskundige problemen toevoegen aan een WinForms-app voor wiskundige toetsen