Leer hoe u een eenvoudige rekenmachine-app maakt en begin uw programmeerreis met Windows Forms.
Bij het leren coderen kan het handig zijn om ervaring op te doen door reeds bestaande apps opnieuw te maken. Een veelgebruikte app voor beginners waarmee u kunt beginnen, is een rekenmachine.
U kunt een desktopcalculator-app maken met behulp van een Windows Forms-project in Visual Studio. In een Windows Forms-toepassing kunt u UI-elementen aanklikken en naar een canvas slepen om het ontwerp van uw rekenmachine te visualiseren.
Vervolgens kunt u codelogica toevoegen aan de onderliggende C#-bestanden om te bepalen wat er moet gebeuren als de gebruiker op een nummer-, operator-, wis- of isgelijk-knop klikt.
UI-elementen toevoegen aan de rekenmachine
Start op een nieuwe Windows Form-toepassing maken in Visual Studio. Voeg vervolgens UI-elementen toe aan het canvas om de gebruikersinterface van de rekenmachine te maken.
De nummer- en operatorknoppen toevoegen
Voeg knoppen toe om de cijfers en operators (+, -, enz.) weer te geven waarop de gebruiker zal klikken.
- Navigeer naar het canvas, dat standaard open zou moeten zijn. Als dit niet het geval is, klikt u op de .cs bestand voor het formulier (bijv. Form1.cs). Klik op de vervolgkeuzelijst en schakel over naar de ontwerpmodus.
- Zoek in de Toolbox naar a Knop UI-element. Klik en sleep een knop naar het canvas.
- Markeer de knop. Wijzig in het eigenschappenvenster elk van de volgende knopeigenschappen in de bijbehorende nieuwe waarde:
Eigendom Nieuwe waarde Naam knop1 Maat 120, 120 Tekst 1 - Voeg nog 19 knoppen toe aan het canvas om de andere getallen, operators en functies van de rekenmachine weer te geven.
- Markeer voor elke knop de knop en wijzig de eigenschap tekst en naam in het eigenschappenvenster. Wijzig de waarden zodat ze overeenkomen met het nummer of de functie van de knop.
Knop Naam Eigenschap Teksteigenschap 2 knop2 2 3 knop3 3 4 knop4 4 5 knop5 5 6 knop6 6 7 knop7 7 8 knop8 8 9 knop9 9 0 knop0 0 Toevoeging knop Toevoeging + aftrekken knopAftrekken - Vermenigvuldiging knopVermenigvuldiging X Divisie knop Divisie ÷ Decimale punt knopDecimaal . Is gelijk aan teken knop is gelijk aan = Rechter beugel knopRechtsBracket ) Linker beugel knopLinkerBracket ( Duidelijk knop Wissen C Invoer wissen knopClearEntry CE - Herschik de volgorde van de knoppen om het uiterlijk van een standaard rekenmachine na te bootsen. Houd alle knoppen even groot.
- U kunt ook enkele knoppen markeren en hun kleur veranderen in een van uw keuze, met behulp van de TerugKleur eigenschap in het eigenschappenvenster.
- Markeer bijvoorbeeld de optelknop. Ga naar het eigenschappenvenster en zoek de TerugKleur eigendom. Kiezen Zilver uit de lijst met opties in de vervolgkeuzelijst. U kunt bedieningsknoppen maken zilver, en de C- en CE-knoppen oranje.
Hoe het uitvoerresultaatlabel toe te voegen
Voeg een tekstvak UI-element toe om het resultaat weer te geven dat de rekenmachine aan de gebruiker zal weergeven.
- Sleep in de Toolbox een Paneel UI-element op het doek.
- Markeer het paneel en zoek de TerugKleur eigenschap in het eigenschappenvenster. Verander dit in wit. U kunt het paneel ook vergroten of verkleinen en opnieuw positioneren om het meer op een rekenmachine te laten lijken.
- Sleep in de Toolbox een TextBox UI-element op het doek.
- Markeer het tekstvak. Wijzig in het eigenschappenvenster de volgende eigenschappen in de nieuwe waarde:
Eigendom Nieuwe waarde naam textBoxOutput Grensstijl Geen Tekst 0 TekstUitlijnen Rechts Ingeschakeld niet waar TerugKleur Wit - Plaats het tekstvak in het paneel.
Hoe de berekeningslogica toe te voegen
Voeg code toe om de berekeningslogica uit te voeren wanneer de gebruiker op de knoppen klikt.
- Open je .cs bestand voor het formulier (bijvoorbeeld Form1.cs).
- Declareer een variabele genaamd huidigeBerekening, aan de top van de klas. Jij kan leer hoe je klassen maakt in C# als je ze niet kent.
openbare gedeeltelijke klasFormulier 1 : Het formulier
{
private string currentCalculation = "";openbaar Formulier 1()
{
InitialiseerComponent();
}
} - Maak onder de constructor een nieuwe functie met de naam button_Click(). Dit wordt uitgevoerd elke keer dat de gebruiker op een cijfer (0-9) of operator (+, -, X, ÷, enz.) knop klikt.
privaatleegtebutton_Click(object afzender, EventArgs e)
{} - Een van de argumenten die aan de button_Click() functie is het object van de knop waarop de gebruiker klikt. Voeg de eigenschap text van het knopobject toe aan de tekenreeksberekening. Als de gebruiker op knoppen klikt, wordt er een tekenreeks voor de berekening gemaakt, zoals "22+5-7".
privaatleegtebutton_Click(object afzender, EventArgs e)
{
// Dit voegt het getal of de operator toe aan de stringberekening
huidige Berekening += (afzender net zo Knop tekst;// Geef de huidige berekening weer aan de gebruiker
textBoxUitvoer. Tekst = huidige Berekening;
} - Ga terug naar het doek. Markeer elke knop (behalve de knoppen C, CE en is gelijk aan) en navigeer naar de Evenementenvenster. Vind de Klik evenement, en selecteer de button_Click() functie. Hierdoor wordt de functie geactiveerd wanneer u op de knop klikt.
Hoe het resultaat te berekenen en aan de gebruiker te tonen
Maak een andere functie om het eindresultaat te berekenen wanneer de gebruiker op de is gelijk-knop klikt.
- Maak een nieuwe functie met de naam button_Equals_Click(). Eerst moet u de tekenreeks opmaken om de. te vervangen X en ÷ karakters met * en /. Gebruik dan de Berekenen() functie om het resultaat te berekenen. Geef het resultaat weer aan de gebruiker.
privaatleegtebutton_Equals_Click(object afzender, EventArgs e)
{
string formattedCalculation = currentCalculation. ToString().Vervangen("X", "*").ToString().Vervangen("÷", "/");proberen
{
textBoxUitvoer. Tekst = nieuwe DataTable().Compute (formattedCalculation, nul).ToString();
currentCalculation = textBoxOutput. Tekst;
}
vangst (Uitzondering ex)
{
textBoxUitvoer. Tekst = "0";
huidigeBerekening = "";
}
} - Zorg ervoor dat u het try-catch-blok rond de. plaatst Berekenen() functie om ongeldige invoer vast te leggen, zoals "123++7". In dit geval, als de gebruiker een ongeldige berekening invoert, zal het resultaat altijd 0 opleveren.
- De Berekenen() functie maakt deel uit van de Systeem. Gegevens naamruimte. Voeg de use-instructie toe om deze bovenaan de klasse op te nemen, als deze er nog niet is.
gebruik makend vanSysteem.Gegevens; - Ga terug naar het doek. Markeer de is gelijk-knop en navigeer naar de Evenementenvenster. Vind de Klik evenement, en selecteer de button_Equals_Click() functie. Hierdoor wordt de functie geactiveerd die wordt uitgevoerd wanneer u op de knop is gelijk aan.
Hoe de rekenmachine te wissen
Voeg de functionaliteit toe voor de C (Clear) en CE (Clear Entry) knoppen. De Duidelijk knop zal de huidige berekening volledig wissen. De Invoer wissen knop zal alleen het laatst ingevoerde nummer of de laatst ingevoerde operator wissen.
- Maak een andere functie genaamd button_Clear_Click(). Dit wordt uitgevoerd wanneer de gebruiker klikt op de Duidelijk knop op de rekenmachine. Stel in de functie de berekening en de waarde in het tekstvak resultaten opnieuw in.
privaatleegtebutton_Clear_Click(object afzender, EventArgs e)
{
// Reset de berekening en leeg het tekstvak
textBoxUitvoer. Tekst = "0";
huidigeBerekening = "";
} - Markeer op het canvas de Duidelijk en navigeer naar de Evenementenvenster.
- Vind de Klik evenement. Verander de waarde in button_Clear_Click.
- Maak een andere functie genaamd button_ClearEntry_Click(). Dit wordt uitgevoerd wanneer de gebruiker klikt op de Invoer wissen knop op de rekenmachine. Verwijder binnen de functie het laatste teken uit de huidige berekeningsreeks.
privaatleegtebutton_ClearEntry_Click(object afzender, EventArgs e)
{
// Als de berekening niet leeg is, verwijder dan het laatst ingevoerde nummer/operator
if (huidige Berekening. Lengte > 0)
{
huidige Berekening = huidige Berekening. Verwijderen (currentCalculation. Lengte - 1, 1);
}// Geef de berekening opnieuw weer op het scherm
textBoxUitvoer. Tekst = huidige Berekening;
} - Markeer op het canvas de Invoer wissen en navigeer naar de Evenementenvenster.
- Vind de Klik evenement. Verander de waarde in button_ClearEntry_Click.
Hoe de rekenmachinetoepassing uit te voeren
U kunt de rekenmachine in Visual Studio uitvoeren om de functionaliteit te testen.
- Klik op de groene afspeelknop bovenaan de Visual Studio-applicatie.
- Klik op de knoppen van de rekenmachine. De berekening wordt weergegeven in de witte ruimte bovenaan de rekenmachine. Door op de te drukken gelijk aan knop zal deze vervangen door het antwoord. De Duidelijk en Invoer wissen knoppen zullen ook de berekening of invoer wissen.
Bureaubladtoepassingen maken met Windows Forms
U kunt een desktopcalculator-app maken met behulp van een Windows Forms-project in Visual Studio. Gebruik het canvas en de Toolbox om UI-elementen te slepen en neer te zetten om het ontwerp van de rekenmachine te bepalen. Voeg uw codelogica en functionaliteit toe in de C#-code achter bestanden.
Een rekenmachine is slechts een van de vele eenvoudige apps voor beginners die u kunt maken terwijl u leert coderen. Andere apps voor beginners die u kunt maken, zijn onder meer converters, bestandsbeheerders, dobbelspellen of vlaggengenerators. U kunt deze helemaal opnieuw maken met behulp van een Windows Forms-toepassing.
