How to: [C#] Les 2: je eerste C# windows applicatie

Het ontwerp van het venster

Bij een programma is het handigste om te beginnen met het ontwerp van het venster. In deze tutorial gaan we een teller maken. Die telt tot een ingesteld aantal waarna het een waarschuwing geeft (de tekst kan je instellen). Hier voor hebben we nodig:

• Een tekstbox voor de instelling van het aantal tikken.
• Een tekstbox voor de instelling van het bericht
• Een label om weer te geven hoeveel tikken er al zijn geweest
• Een knop om een tik er bij te tellen.

De tekstbox gebruiken we om de gebruiker een tekst te kunnen laten invoeren. Een label is een gewoon een stukje tekst in het venster. Een knop is natuurlijk een Button waar op geklikt kan worden. Sleep eerst met behulp van de toolbox 2 tekstboxen, een label en een button in het venster. Je kan de plaats ook veranderen door de controls te verslepen. Je zal merken dat de ontwikkelomgeving meteen een marge aanhoudt tussen alle controls.



Nu je de controls heb geplaatst is het tijd om ze af te stellen naar eigen smaak. Het belangrijkste hier van is waarschijnlijk nog een logische naam geven. Persoonlijk zie ik genoeg applicaties waarbij labels worden neergezet zonder ze een naam te geven. Na een tijdje kom je opeens Label36 tegen. Ja, waar stond die nou? En wat staat er dan op? Dat werkt zeker niet handig, vooral niet als je een maand later nog eens naar dit venster terugkijkt.

Eigenschappen bijwerken

Het tekstlabel

Het instellen van de naam en instellingen kan in het Eigenschappen (Properties) paneel. Klik de label aan en zoek de eigenschap (Name) op. Hier kan je de naam instellen die in de code beschikbaar is. In dit geval noem ik hem aantal. De tekst is ook te veranderen; dat gebeurd bij eigenschap Text. De tekst veranderen we later ook nog vanuit de code, maar zolang dat nog niet gebeurd is wordt de tekst die hier ingesteld is weergegeven. Ik zet bij het label aantal de tekst ‘Aantal tikken: 0’ neer.

Tekstvakken

Op naar de tekstvakken. Één tekstvak moet een tekstvak worden met het waarschuwingsbericht dat moet worden afgegeven. In het beginontwerp wat ik hierboven heb weergeven zijn de tekstvakken nog erg klein. Die kunnen natuurlijk wel wat breder worden gemaakt! Klik op het bovenste tekstvakje en je zal een vierkant blokje aan de rechterkant zien. Daarmee kan je de breedte van de tekstbox uitslepen. In dit geval maak ik die net zo breed als het formulier. Weer zal de ontwikkelomgeving standaard een marge aanhouden. Als naam geef ik deze tekstbox bericht.

De andere tekstvak wil ik graag het aantal in kwijt wanneer een waarschuwing moet worden gegeven. De breedte is dan goed. De naam die ik het onderste tekstvakje geef is waarschuwings_aantal. Je kan in een naam geen spaties gebruiken, en het mag ook niet beginnen met een cijfer. Maar omdat het een cijfer is, is het wel netjes als de tekst naar rechts uitgelijnd staat. Dat kan met de eigenschap TextAlign. Standaard staat die op Left (of Links), maar kan ook op Right (Rechts) of Center (midden) worden ingesteld. Ik stel hem in op Rechts. Het is ook mogelijk om het tekstvak standaard te vullen met een stukje tekst. In dit geval zet ik bij de eigenschap Text 5 neer.

[h3]De button[/h3]
Als laatste stel ik de knop in. Als eerste geef ik altijd weer de naam op. In dit geval maak ik er knop_tel van. De tekst die op de knop komt te staan (eigenschap Text) is Tellen. Dit laatste kan je ook naar eigen keuze doen, natuurlijk.

Tenslotte moeten we het venster eigenlijk ook nog gewenst maken. Ten eerste de grootte; in mijn programma vullen de controls lang niet de venster ruimte op. Klik op de rand en sleep de onderkant naar boven. Tevens heeft een venster ook een naam. In dit geval is dat Form1. Dat is niet bepaald duidelijk. Bij het eigenschappen paneel valt weer genoeg in te stellen. De naam die ik dit venster geef is venster_tellen. De tekst die ik er op zet is Teller.

Zoals je uit deze stappen wel merkt is de naam niet zichtbaar voor de gebruiker. Die is in de code enkel handig om te zien waar je mee bezig bent. De tekst is wel zichtbaar voor de gebruiker, en moet vanzelfsprekend wel duidelijk zijn. Ik zet het hier maar expliciet bij; vaak wordt de eerste (de naam) vergeten, wat niet bijdraagt aan duidelijke programma’s. Als je al m’n stappen hebt gevolgd, zou je op een soortgelijk venster kunnen komen: