Dela via

Självstudie: Skapa en WinForms-app för matematikquiz

I den här serien med fyra handledningar skapar du en mattequiz. Testet innehåller fyra slumpmässiga matematiska problem som en testtagare försöker besvara inom en angiven tid.

Visual Studio Integrated Development Environment (IDE) innehåller de verktyg som du behöver för att skapa appen. Mer information om denna IDE finns i Välkommen till Visual Studio IDE-.

I den här första handledningen lär du dig hur du:

  • Skapa ett Visual Studio-projekt som använder Windows Forms.
  • Lägg till etiketter, en knapp och andra kontroller i ett formulär.
  • Ange egenskaper för kontrollerna.
  • Spara och kör projektet.

Förutsättningar

Du behöver Visual Studio för att slutföra den här självstudien. Besök Visual Studio-nedladdningssidan för en kostnadsfri version.

Not

Den här handledningen kräver projektmallen Windows Forms App (.NET Framework). Under installationen väljer du arbetsbelastningen .NET-skrivbordsutveckling:

Skärmbild som visar arbetsbelastningen för NET-skrivbordsutveckling i Visual Studio Installer.

Om du redan har Installerat Visual Studio och behöver lägga till det väljer du Verktyg>Hämta verktyg och funktioner, eller i fönstret Skapa ett nytt projekt väljer du länken Installera fler verktyg och funktioner.

Skärmbild som visar länken Installera fler verktyg och funktioner från meddelandet Hitta inte det du letar efter i dialogrutan Skapa nytt projekt.

Skapa ditt Windows Forms-projekt

När du skapar ett matematiskt test är det första steget att skapa ett Windows Forms App-projekt.

  1. Öppna Visual Studio.

  2. I startfönstret väljer du Skapa ett nytt projekt.

    Skärmbild som visar alternativet Skapa ett nytt projekt i Visual Studio-startfönstret.

  3. I fönstret Skapa ett nytt projekt söker du efter Windows Forms. Välj sedan Desktop i listan projekttyp.

  4. Välj mallen Windows Forms App (.NET Framework) för C# eller Visual Basic och välj sedan Nästa.

    Skärmbild som visar dialogrutan Skapa ett nytt projekt med sökrutan, listan Projekttyp och två mallar framhävd.

  5. I fönstret Konfigurera det nya projektet ger du projektet namnet MathQuizoch väljer sedan Skapa.

  1. Öppna Visual Studio.

  2. I startfönstret väljer du Skapa ett nytt projekt.

    Skärmbild som visar alternativet Skapa ett nytt projekt i Visual Studio-startfönstret.

  3. I fönstret Skapa ett nytt projekt söker du efter Windows Forms. Välj sedan Desktop från listan över Projekttyp.

  4. Välj mallen Windows Forms App (.NET Framework) för C# eller Visual Basic och välj sedan Nästa.

    Skärmbild som visar dialogrutan Skapa ett nytt projekt med sökrutan, listan Projekttyp och två mallar framhävd.

  5. I fönstret Konfigurera det nya projektet ger du projektet namnet MathQuizoch väljer sedan Skapa.

Visual Studio skapar en lösning för din app. En lösning är en container för alla projekt och filer som din app behöver.

Ange formuläregenskaper

När du har valt mallen och namn på filen öppnar Visual Studio ett formulär åt dig. Det här avsnittet visar hur du ändrar vissa formuläregenskaper.

  1. I projektet väljer du Windows Forms Designer. Fliken Designer är märkt Form1.cs [Design] för C# eller Form1.vb [Design] för Visual Basic.

  2. Välj formuläret Form1.

  3. Fönstret Egenskaper visar nu egenskaper för formuläret. Det här fönstret finns vanligtvis i det nedre högra hörnet i Visual Studio. Om du inte ser Egenskaper, väljer du Visa>Egenskapsfönster.

  4. Leta upp egenskapen Text i fönstret Egenskaper. Beroende på hur listan sorteras kan du behöva rulla nedåt. Ange värdet Math Quiz för värdet Text och välj sedan Enter.

    Formuläret har nu texten "Math Quiz" i namnlisten.

    Notera

    Du kan visa egenskaper efter kategori eller alfabetiskt. Använd knapparna i fönstret Egenskaper för att växla fram och tillbaka.

  5. Ändra storleken på formuläret till 500 bildpunkter brett med 400 bildpunkter högt.

    Du kan ändra storlek på formuläret genom att dra dess kanter eller dra handtaget tills rätt storlek visas som värdet Storlek i fönstret Egenskaper. Draghandtaget är en liten vit fyrkant i formulärets nedre högra hörn. Du kan också ändra storlek på formuläret genom att ändra värdena för egenskapen Size.

  6. Ändra värdet för egenskapen FormBorderStyle till Fixed3Doch ange egenskapen MaximizeBox till False.

    Dessa värden förhindrar att testtagare ändrar storlek på formuläret.

Skapa rutan för återstående tid

Matematiktestet innehåller en ruta i det övre högra hörnet. Den rutan visar antalet sekunder som finns kvar i frågesporten. Det här avsnittet visar hur du använder en etikett för den rutan. Du lägger till kod för nedräkningstimern i en senare handledning i den här serien.

  1. Till vänster i Visual Studio IDE väljer du fliken Toolbox. Om du inte ser verktygslådan väljer du Visa>Verktygslåda i menyraden eller Ctrl+Alt+X.

  2. Välj kontrollen Label i Toolboxoch dra den sedan till formuläret.

  3. I rutan Egenskaper anger du följande egenskaper för etiketten:

    • Ange (namn) till timeLabel.
    • Ändra Autosize till Falskt så att du kan ändra storlek på rutan.
    • Ändra BorderStyle- till FixedSingle för att rita en linje runt rutan.
    • Ange Storlek till 200, 30.
    • Välj egenskapen Text och välj sedan nyckeln Backspace för att rensa värdet Text.
    • Välj plustecknet (+) bredvid egenskapen Font och ange sedan Storlek till 15,75.

  4. Flytta etiketten till formulärets övre högra hörn. När blå mellanrumslinjer visas använder du dem för att placera kontrollen på formuläret.

  5. Lägg till ytterligare en etikett kontroll från Toolboxoch ange sedan teckenstorleken till 15,75.

  6. Ange egenskapen Text för den här etiketten till time left.

  7. Flytta etiketten så att den visas till vänster om etiketten timeLabel.

    Skärmbild som visar tidsetiketten För vänster och återstående tid med kontroller uppradade bredvid varandra i formulärets övre högra hörn.

Lägga till kontroller för tilläggsproblemet

Den första delen av provet är ett adderingsproblem. Det här avsnittet visar hur du använder etiketter för att visa det problemet.

  1. Lägg till en etikettkontroll från verktygslådan till formuläret.

  2. I rutan Egenskaper anger du följande egenskaper för etiketten:

    • Ange Text till (frågetecken).
    • Ställ in AutoSize till False.
    • Ange Storlek till 60, 50.
    • Ange teckenstorleken till 18.
    • Ange TextAlign till MiddleCenter.
    • Ange platsinställning till 50, 75 för att placera kontrollen på formuläret.
    • Ange (namn) till plusLeftLabel.

  3. I formuläret väljer du etiketten plusLeftLabel som du skapade. Kopiera etiketten genom att välja antingen Redigera>Kopiera eller Ctrl+C.

  4. Klistra in etiketten i formuläret tre gånger genom att välja antingen Redigera>Klistra in eller Ctrl+V tre gånger.

  5. Ordna de tre nya etiketterna så att de finns i en rad till höger om plusLeftLabel etikett.

  6. Ange den andra etikettens egenskap Text till + (plustecken).

  7. Ange den tredje etikettens egenskap (namn) till plusRightLabel.

  8. Ange den fjärde etikettens egenskap Text till = (likhetstecken).

  9. Lägg till en NumericUpDown-kontroll från Toolbox- i formuläret. Du lär dig mer om den här typen av kontroll senare.

  10. I rutan Egenskaper anger du följande egenskaper för kontrollen NumericUpDown:

    • Ange teckenstorleken till 18.
    • Under MaximumSizeanger du bredden till 100.
    • Ange (namn) till summa.

  11. Justera kontrollen NumericUpDown med kontrollerna Label för additionsproblemet.

    Skärmbild som visar den första raden i matematiktestet, med synliga etiketter och en kontroll med piltangenterna som visar en nolla.

Lägga till kontroller för problem med subtraktion, multiplikation och division

Lägg sedan till etiketter i formuläret för återstående matematiska problem.

  1. Kopiera de fyra Label-kontrollerna och NumericUpDown- kontroll som du skapade för tilläggsproblemet. Klistra in dem i formuläret.

  2. Flytta de nya kontrollerna så att de hamnar under tilläggskontrollerna.

  3. I rutan Egenskaper anger du följande egenskaper för de nya kontrollerna:

    • Ange (namn) för den första frågemärkesetiketten till minusLeftLabel.
    • Ange Text för den andra etiketten till - (minustecken).
    • Ange (namn) på den andra frågeteckenetiketten till minusRightLabel.
    • Ange (namn) för kontrollen NumericUpDown till värdet differens.

  4. Kopiera tilläggskontrollerna och klistra in dem två gånger till i formuläret.

  5. För den tredje raden:

    • Ange (Namn) för den första etiketten med frågetecken till timesLeftLabel.
    • Ange Text för den andra etiketten till × (multiplikationstecken). Du kan kopiera multiplikationstecknet från den här guiden och klistra in det i formuläret.
    • Ange (namn) för den andra frågemärkesetiketten till timesRightLabel.
    • Ange (namn) för kontrollen NumericUpDown till produkt.

  6. För den fjärde raden:

    • Ange (namn) för den första frågemärkesetiketten till dividedLeftLabel.
    • Ange Text för den andra etiketten till ÷ (divisionstecken). Du kan kopiera divisionstecknet från den här handledningen och klistra in det i formuläret.
    • Ställ in (namn) för den andra frågeteckenetiketten till dividedRightLabel.
    • Ange (namn) för kontrollen NumericUpDown till kvot.

Skärmbild som visar en matematisk frågesport med fyra rader med problem, med etiketter och kontroller med piltangenterna synliga.

Lägg till en startknapp och ange tab-indexordningen

Det här avsnittet visar hur du lägger till en startknapp. Du kan också ange tabbordningen för kontrollerna. Den här ordningen avgör hur frågetesttagaren flyttas från en kontroll till en annan med hjälp av -fliken nyckel.

  1. Lägg till en Button-kontroll från Toolbox- i formuläret.

  2. I rutan Egenskaper anger du följande egenskaper för knappen:

    • Ställ in (namn) till startknapp.
    • Ställ in Text till och starta frågesporten.
    • Ange teckenstorleken till 14.
    • Ange Ändra storlek på automatiskt till True, vilket gör att knappen automatiskt ändrar storlek så att den passar texten.
    • Ange TabIndex till 0. Det här värdet gör startknappen till den första kontrollen för att ta emot fokus.

  3. Centrera knappen nära formulärets nederkant.

    Skärmbild som visar en matematisk frågesport med fyra rader med problem och en startknapp.

  4. I rutan Egenskaper anger du egenskapen TabIndex för varje NumericUpDown-kontroll:

    • Ange TabIndex för summa-kontrollen till 1.
    • Ange TabIndex för kontrollen skillnad till 2.
    • Ange TabIndex för produktkontrollen till 3.
    • Ange TabIndex för kvotkontrollen till 4.

Kör din app

De matematiska problemen fungerar fortfarande inte i din frågesport. Men du kan fortfarande köra appen för att kontrollera om TabIndex värden fungerar som förväntat.

  1. Använd någon av följande metoder för att spara din app:

    • Välj Ctrl+Skift+S.
    • På menyraden väljer du Arkiv>Spara Alla.
    • I verktygsfältet väljer du knappen Spara alla.

  2. Använd någon av följande metoder för att köra din app:

    • Välj F5.
    • På menyraden väljer du Felsök>Starta felsökning.
    • I verktygsfältet väljer du knappen Starta.

  3. Välj fliken några gånger för att se hur fokus flyttas från en kontroll till en annan.

Nästa steg

Gå vidare till nästa handledning för att lägga till slumptal och en händelsehanterare i din frågesport.

Självstudie del 2: Lägg till matematiska problem i en WinForms-app för matematikquiz