Hoe u uw eerste Windows Forms-toepassing (Winforms) kunt maken in Visual Studio

Windows Forms is een raamwerk dat beschikbaar is in Visual Studio en waarmee u desktoptoepassingen kunt bouwen met behulp van een grafische gebruikersinterface. Hiermee kunt u widgets zoals knoppen of labels rechtstreeks op een canvas klikken en slepen, en de eigenschappen van elke widget manipuleren, zoals de lettergrootte, kleur of rand.

In dit artikel wordt een eenvoudige Celsius naar Fahrenheit-converter als voorbeeld gebruikt om de basisprincipes van het opzetten van een Windows-formuliertoepassing door te nemen. Visual Studio 2019 Community Edition is de editie die voor deze zelfstudie wordt gebruikt.

Het Windows Forms-project maken in Visual Studio

Maak eerst het project in Visual Studio.

1. Open Visual Studio en selecteer Een nieuw project maken.
2. Visual Studio geeft u een lijst met projectsjablonen waaruit u kunt kiezen.
3. Om een ​​Windows Forms-toepassing te maken, zoekt u naar: Windows Form-app en selecteer het in de lijst met sjablonen. Zodra dit is geselecteerd, klikt u op Volgende
   instagram viewer
   .

   Als de Windows Form-app optie is niet beschikbaar in de lijst, wijzig uw geïnstalleerde versie van Visual Studio. Voeg in Visual Studio Installer de .NET-werklast voor desktopontwikkeling voor desktop en mobiel toe en start Visual Studio opnieuw.

4. Voeg een naam en locatie voor het project toe en klik op Volgende. De locatie is de map waar de codebestanden worden opgeslagen.
5. Bewaar op het volgende scherm de standaardselectie van .NET Core 3.1.
6. Klik Creëren.
7. Zodra Visual Studio klaar is met het maken van het project, wordt het project geopend.

Elementen toevoegen aan het projectcanvas

Het canvas is het witte gebied in de linkerbovenhoek van het scherm. Klik en sleep de punten rechtsonder, rechtsonder of rechtsonder op het canvas om het formaat indien nodig te wijzigen.

Om de gebruikersinterface van de toepassing te maken, voegt u widgets zoals knoppen of tekstvakken toe aan het canvas.

1. Open de Tabblad weergeven bovenaan het venster en selecteer Gereedschapskist.
2. Dit zal een toolbox aan de linkerkant van de applicatie toevoegen. Selecteer de speldpictogram in de rechterbovenhoek van de toolbox om het daar permanent vast te pinnen.
3. Hier kunt u elke widget uit de toolbox naar het canvas slepen. Markeer een knop in de gereedschapskist en sleep deze naar het canvas.
4. Sleep nog twee tekstvakken naar het canvas, samen met drie labels (twee labels voor elk tekstvak en één label voor de titel bovenaan de toepassing).
5. Aan elke widget op het canvas zijn eigenschappen gekoppeld. Markeer een widget om de. weer te geven Eigenschappen venster in de rechterbenedenhoek van Visual Studio, waarin alle eigenschappen van de widget worden weergegeven. Deze eigenschappen kunnen de tekst, naam, lettergrootte, rand of uitlijning van de gemarkeerde widget bevatten.
6. Op dit moment zegt de tekst op deze widgets nog steeds: label1, label2, of knop1. Selecteer de label1 widget en bewerk de Tekst eigenschap in het eigenschappenvenster om "Celsius tot Fahrenheit" te zeggen. Verander de lettergrootte naar 22pt.
7. Bewerk op dezelfde manier de eigenschappen van de andere widgets op het canvas als volgt:

   Widget	Eigenschap	Nieuwe waarde
   label2	Tekst	Celsius
   label3	Tekst	Fahrenheit
   knop	Tekst	Berekenen
   Fahrenheit-tekstvak	Alleen lezen	Waar

Hoe om te gaan met gebeurtenissen en code te schrijven in de achterliggende code

Widgets op het canvas kunnen worden gekoppeld aan evenementen. Gebeurtenissen kunnen zaken omvatten als klikken op een knop, het wijzigen van de tekst in een tekstvak of het selecteren van een bepaald keuzerondje. Wanneer deze gebeurtenissen plaatsvinden, kan dit ertoe leiden dat een gedeelte van de code in de Code-Behind wordt geactiveerd.

C# is de taal die wordt gebruikt bij het maken van Windows Forms. Als je C# nog niet hebt gebruikt, er zijn veel praktische redenen om C#-programmeren te leren.

Voeg voor deze specifieke toepassing een gebeurtenis toe aan de Berekenen knop, om een ​​codegedeelte te activeren dat wordt uitgevoerd wanneer op deze knop wordt gedrukt.

1. Dubbelklik op de Berekenen knop om Form1.cs automatisch te openen met een nieuwe gebeurtenismethode:

   private void calculatorButton_Click (objectafzender, EventArgs e)

2. Hier voegt u de code toe die de Celsius-naar-Fahrenheit-berekening uitvoert en geeft u het resultaat weer in het Fahrenheit-tekstvak. Om dit te doen, moet u de waarde uit het Celsius-tekstvak kunnen lezen en het Fahrenheit-tekstvak wijzigen om het resultaat weer te geven.
3. Ga terug naar het canvas en bewerk de eigenschappen opnieuw zoals eerder getoond. Bewerk deze keer de Naam eigenschap voor zowel de tekstvakken Celsius als Fahrenheit. Deze namen kunnen worden gebruikt om naar de tekstvakken in de code te verwijzen.

   Widget	Eigenschap	Nieuwe waarde
   Celsius-tekstvak	Naam	celsiusTextBox
   Fahrenheit-tekstvak	Naam	fahrenheitTextBox

4. Ga terug naar de functie berekenButton_Click in Form1.cs.
5. Nu kan in de code naar het tekstvak Celsius worden verwezen met de naam "celsiusTextBox". De Celsius-waarde die de gebruiker heeft ingevoerd, wordt opgeslagen in de eigenschap Text. Aangezien het echter een string is, moet u dit in een dubbel verwerken om het in toekomstige Fahrenheit-berekeningen op te nemen.

   private void calculatorButton_Click (objectafzender, EventArgs e)
   {
    // Haal de waarde op die de gebruiker heeft ingevoerd in het Celsius-tekstvak
    dubbele celsiusWaarde = Dubbel. Ontleden (celsiusTextBox. Tekst);
   }

6. De celsiusValue-variabele slaat nu de waarde op die de gebruiker heeft ingevoerd in het Celsius-tekstvak. De formule voor het converteren van Celsius naar Fahrenheit is (CelsiusWaarde * 9/5) + 32. Daarom kan het resultaat nu worden berekend en opgeslagen in het Fahrenheit-tekstvak.

   private void calculatorButton_Click (objectafzender, EventArgs e)
   {
    // Haal de waarde op die de gebruiker heeft ingevoerd in het Celsius-tekstvak
    dubbele celsiusWaarde = Dubbel. Ontleden (celsiusTextBox. Tekst);
    // Pas de berekening toe
    dubbel resultaat = (celsiusWaarde * 9/5) + 32;
    // Bewaar het resultaat in de Fahrenheit Textbox
    fahrenheitTextBox. Tekst = resultaat. ToString();
   }

Het Windows Forms-programma uitvoeren en fouten opsporen

Het Windows Forms-programma uitvoeren in Visual Studio

Nu de gebruikersinterface en codelogica zijn ingesteld, voert u het programma uit om te zien dat het werkt.

1. Om het programma uit te voeren, selecteert u de groene pijl boven aan de werkbalk in Visual Studio.
2. Nadat het project is geladen, voegt u een waarde toe aan het tekstvak Celsius en drukt u op de Berekenen knop. Hiermee wordt het resultaat toegevoegd aan het Fahrenheit-tekstvak.
3. Als het programma tijdens runtime wazig is, is uw toepassing waarschijnlijk niet DPI-bewust. Dit kan schaal- en resolutieproblemen veroorzaken, dus dit moet worden ingeschakeld. U kunt ook meer lezen over beeldschermschaal configureren op Windows 10 voor High-DPI-monitoren.
4. Klik met de rechtermuisknop op de TemperatureConverter Project in de Oplossingen verkenner. Selecteer Toevoegenen selecteer vervolgens Nieuw item.
5. Zoek naar het toepassingsmanifestbestand en klik op Toevoegen.
6. Kopieer de volgende code naar het nieuwe app.manifest-bestand, als een kind van de assembly-tag (als de code al is gegenereerd, maakt u er gewoon geen commentaar op).

   
   
   waar
   waar
   
   

7. Om deze wijziging door te voeren, voert u het programma opnieuw uit. Selecteer de rode stopknop bovenaan de werkbalk en selecteer vervolgens opnieuw de groene afspeelknop.

Foutopsporing in het Windows Forms-programma

Misschien wilt u fouten in het programma opsporen als de logica van uw Windows Forms-toepassing niet werkt zoals verwacht.

1. Navigeer terug naar de functie berekenButton_Click in Form1.cs en klik ergens op de grijze balk helemaal links op het scherm. Hiermee wordt een breekpunt toegevoegd, dat wordt aangegeven door een rode cirkel.
2. Druk nogmaals op de knop "Berekenen" om deze methode uit te voeren. Het programma pauzeert wanneer het het breekpunt bereikt om alle waarden weer te geven die op dat moment in de variabelen zijn opgeslagen.
3. Om verder te gaan met het programma, klik op de groene Doorgaan pijl bovenaan de werkbalk.

Het programma uitvoeren met een uitvoerbaar bestand

Als u uw programma niet via Visual Studio wilt uitvoeren, gebruikt u het zelfstandige uitvoerbare bestand voor het programma. Dit wordt automatisch gegenereerd.

1. Navigeer naar het uitvoerbare bestand, dat hier te vinden is:

   /bin/Debug/netcoreapp3.1/TemperatureConverter.exe

2. Klik op het uitvoerbare bestand om het programma direct uit te voeren.

Meer toevoegen aan uw Windows-formulier

Hopelijk heb je nu een basiskennis van de basisstructuur van een Windows Form Application. U kunt doorgaan met het verkennen van aanvullende functies van Windows Forms door te experimenteren met nieuwe widgets en een diepere duik te nemen in de andere verschillende gebeurtenissen die kunnen worden afgehandeld.

Als u eenmaal meer vertrouwd bent met Windows Forms, kunt u beginnen met het maken van complexere toepassingen. U kunt ook veel van de andere manieren verkennen waarop u toepassingen op het Windows-bureaublad kunt maken.

Gebruik Chrome om een ​​Windows 10-app te maken vanaf elke website

Lees volgende

Over de auteur