‫Welkom terug.
‫En in deze video gaan we Zemel nader bekijken en misschien wil je dit onderzoeken.
‫Zemel is een soort XML-taal, zoals je hier onderaan kunt zien.
‫En eigenlijk ga ik het nog verder slepen, zodat we onze gebruikersinterface kunnen schrijven, zodat we niet door hoeven
‫te gaan en alle elementen naar onze GUI moeten slepen en het daar aanpassen.
‫We kunnen dat allemaal in code doen.
‫Nu zou je kunnen zeggen dat ik meer een visuele man ben.
‫Ik wil doorgaan en de dingen naar binnen slepen en dat vind ik prima, terwijl jij dat kunt doen.
‫Maar dan ben je beperkt tot gewoon slepen.
‫En met bijvoorbeeld kun je veel aanpassen en je kunt niet alleen die dingen aanpassen zoals deze inwikkeling, maar je
‫hebt gezien in de laatste video dat je nog veel meer kunt doen en we zullen zien wat
‫databinding is, welke eigenschappen of afhankelijkheidseigenschappen en enzovoort zijn, wat dingen zijn die u met Zemel kunt doen,
‫waardoor we zeer goede gebruikersinterfaces kunnen maken die gemakkelijk te onderhouden zijn.
‫Dus hier kun je allereerst dit venster zien.
‫Dus over het algemeen heb je een openingstag en een sluitingstag.
‫Als je HTML kent, dan ben je daar misschien wel bekend mee.
‫Je hebt de hoekschoren en je hebt ze ook sluitend.
‫Dus minder dan teken het woord en dan groter dan sinus.
‫En zie je, we hebben hetzelfde met het raam en ook hier.
‫Dan een sluiting.
‫Je hebt ook de schuine streep voor het woord.
‫Dit is dus hetzelfde voor raster, voor venster voor al het andere.
‫Dus als ik bijvoorbeeld een knop wil gebruiken, kan ik dat doen.
‫En als ik het groter-dan-teken gebruik, wordt automatisch de afsluitende tag gemaakt.
‫Wat ik nu kan doen, is dat ik alle aanpassingen binnen de openingstag kan doen.
‫Zoals je hier kunt zien, Button, kan ik doorgaan en er bijvoorbeeld inhoud aan toevoegen.
‫Er zijn dus veel verschillende eigenschappen, zoals u kunt zien.
‫En ik ga gewoon de inhoudseigenschap gebruiken en ik ga gewoon iets gebruiken als Klik op mij.
‫Nu is er deze knop in het midden, zoals je kunt zien, en er staat, klik op mij.
‫Natuurlijk hebben we geen lengte.
‫We hebben geen a met al dat soort eigenschappen zijn nog niet ingesteld.
‫Maar laten we zeggen dat ik wil dat deze knop 50 pixels hoog is en dan wil ik dat hij 100 pixels breed is, zoals je kunt
‫zien.
‫Dit is mijn knop die ik heb gemaakt.
‫Natuurlijk had ik het erin kunnen slepen, maar een voorbeeld doen is best handig.
‫En nu?
‫Iets waar ik nog niet al te veel op heb ingegaan en dat pas later in de cursus nodig zal
‫zijn.
‫Maar over het algemeen zie je hier X en L en S waar dat voor staat is bijvoorbeeld namespace.
‫En Zemel staat voor Extensible Application Markup Language.
‫Dus laat ik dat hier toevoegen.
‫Laten we een opmerking toevoegen.
‫Ik ga zo'n opmerking gebruiken.
‫Zoals je kunt zien, is dit Greeno en dit is zo'n beetje een opmerking.
‫Dus ik kan hier iets schrijven, zoals Zemel is een
‫uitbreidbare opmaaktaal voor toepassingen.
‫Oke.
‫Nu zit de knop, zoals je kunt zien, hier.
‫En laten we nu verder gaan en nog wat dingen doen met knoppen.
‫Dus laten we wat extra knoppen maken, alstublieft.
‫Ga je gang en maak nog een knop.
‫OK, ik hoop dat je het hebt geprobeerd, gebruik gewoon de knopnaam hier of het sleutelwoord en ga je gang en maak je de
‫extra knop.
‫Nu vraag je je misschien af, oh --, het is niet correct gepositioneerd.
‫Dus ik heb deze knop en het heeft de inhoud met.
‫Hallo daar.
‫Nu, waarom is deze klik op mij-knop nu?
‫Wel, het zit in het raster en het is verdwenen omdat we een raster gebruiken zodat de knoppen niet
‫op elkaar verschijnen, enzovoort.
‫Dus als je dat hebt geprobeerd, heb je het gezien.
‫En we zullen later ook naar rasters kijken.
‫Maar dat wilde ik je even laten zien.
‫Oke.
‫Dus laten we die knop maar weer weghalen.
‫Nu hebben we deze klik op mij-knop en laten we de applicatie gewoon uitvoeren, zodat we kunnen
‫zien hoe het er in het echt uitziet en hoe dit hele ding ons leven mooi kan maken door er gewoon op te klikken.
‫Dus, zoals je kunt zien, kan ik eroverheen bewegen en het verandert van kleur en ik kan
‫erop klikken en het maakt deze kleine klikanimatie en dat is het.
‫Maar er gebeurt niets als je erop klikt.
‫En er zijn meerdere manieren om een klikfunctionaliteit te implementeren.
‫En dat gaan we later doen.
‫Rechts.
‫Dus zo kunnen we bijvoorbeeld een knop maken.
‫Nu zijn er tal van extra elementen die we hier of eigenschappen kunnen openen.
‫We kunnen bijvoorbeeld toegang krijgen tot de eigenschap lettergrootte en de lettergrootte vergroten tot, laten we zeggen, 32.
‫Dus nu is de knop niet zo breed als de tekst, dus laten we de breedte aanpassen.
‫Dus nu is het goed.
‫Nogmaals, we kunnen de hele tekst van de knop zien, maar als je speelt met lettergrootte en al
‫die elementen, moet je oppassen dat het er nog steeds in past.
‫Wat u nu ook kunt doen, is dat u, in plaats van de inhoud hier aan de inhoudseigenschap toe
‫te voegen, eenvoudig binnen de knoptekst kunt toevoegen.
‫Dus hier ga ik iets zeggen als, klik op mij.
‫En zoals je kunt zien, het is er.
‫Dus dit is de inhoud tussen de tags waar u uw inhoud hebt.
‫Dus dat is een manier om het te doen.
‫De andere is om hier eenvoudig de eigenschap content te gebruiken en de tekst op deze manier toe te wijzen, zoals we eerder hebben
‫gezien.
‫Nu is deze afsluitende tag-knop niet nodig als u de knop gewoon meteen op deze manier sluit, zodat u deze
‫op een kortere manier kunt sluiten, zodat u de afsluitende tag-knop niet nodig hebt.
‫En een andere manier om een knop te ontwerpen is de volgende.
‫Dus als je zoiets ziet, is dat ook helemaal goed.
‫Dus je maakt de button tag de sluiting en de opening.
‫En hier heb je een knopstip en dan kun je doorgaan en alle verschillende eigenschappen aanpassen die je wilt.
‫Zoals u kunt zien, zijn er veel verschillende eigenschappen waartoe we toegang hebben, bijvoorbeeld
‫de lettergrootte op die manier.
‫Dus ik kan de lettergrootte op 72 zetten, bijvoorbeeld, en een andere knopeigenschap die ik wil aanpassen, want laten we zeggen de
‫inhoud, zodat ik door kan gaan en alleen de inhoud daar te hoog.
‫Dus nu zie je dat er een enorme knop is met de lettergrootte 72 en daar staat hallo.
‫Dus dat is benadering nummer twee.
‫En er is nog iets anders dat je kunt doen.
‫Laten we die knop dus nog verder aanpassen.
‫Dus laten we zeggen als de inhoud, ik wil niet alleen een tekst van hallo daar hebben.
‫Ik wil nog verder gaan.
‫Ik wil een wikkelpaneel toevoegen.
‫Wat het paneel nu doet, is dat het eenvoudig alle bedieningselementen of elementen naast elkaar wikkelt, van links
‫naar rechts.
‫Dus het eerste element wordt, laten we zeggen, een tekstblok.
‫En we hebben gezien welke tekstblokken de eenvoudige tekst zijn.
‫En deze gaat multi zeggen.
‫Nu heb ik nog een tekstblok nodig en het derde.
‫Dus dat zegt meerdere, drie keer.
‫Maar nu kan ik de kleur van elk afzonderlijk aspect aanpassen.
‫Dus voor elk tekstblok.
‫Dus laten we zeggen dat ik dat in blauw verander, dan heeft dit de voorgrond.
‫Dus de voorgrond is de kleur naar de voorgrondkleur en deze zal rood zijn.
‫En tot slot zal mijn laatste tekstblok de voorgrond van wit hebben.
‫En nu in plaats van multi, multi, multi, is het een meerkleurige knop.
‫En nu willen we misschien de lettergrootte een beetje aanpassen, laten we het ook de eerste knop kleiner maken,
‫zoals je kunt zien, het is verborgen omdat het raster alleen het laatste element weergeeft als ze
‫niet in het juiste raster zijn toegewezen structuur, die we later zullen zien.
‫Maar laten we de eerste knop die we hadden weg doen.
‫En laten we nu ook een knopgrootte instellen.
‫Dus laten we doorgaan en de knop gebruiken waarmee dat zal zijn, laten we zeggen tweehonderd.
‫En een knop derde hoogte, die 100 zal zijn.
‫En zo, dus daar zijn we en de lettergrootte is te groot om alles in te passen.
‫Dus als we dat met 24 doen, zit het er nu in.
‫Dus als ik de code uitvoer, heb ik een veelkleurige knop met meerdere verschillende tekstblokken erin.
‫En daar zijn we dan.
‫Dus om het maar zo te zien, er zijn meerdere verschillende benaderingen om het te doen.
‫Als je er meerdere aspecten in wilt pakken, dan kun je dit paneel gebruiken.
‫U kunt zelfs een raster in de knop gebruiken en de rastertag gebruiken om meerdere verschillende
‫bedieningselementen in uw knop te maken.
‫Maar dat is iets dat we later zullen bespreken.
‫Voor nu is het alleen belangrijk dat je begrijpt dat je met dit voorbeeld tal van mooie dingen kunt doen met
‫je GUI zonder te slepen en neer te zetten en ook met volledige controle over hoe dingen eruit zien en wat ze
‫doen.
‫Wat ik ga doen is dat ik daar commentaar op ga geven en ik ga je laten zien hoe je hetzelfde kunt doen als
‫we hier hebben gezien met code, omdat we het hebben gezien met Zemel-code.
‫Maar we kunnen het ook in code achter doen, wat betekent in C Sharp, wat we tot nu toe voor
‫de hele klas of voor de hele cursus hebben geleerd.
‫Dus laten we ingaan op de code erachter.
‫Zoals je kunt zien, is er een goed voorbeeldbestand, dat we hier hebben geopend,
‫de demo van het hoofdvenster en ons voorbeeldbestand heeft een code achter het bestand, wat een totale Zemel is.
‫Dat casusbestand en dit is een C sharp-bestand, wat betekent dat we hier een C sharp-partiële klasse hebben, die we
‫nu kunnen gebruiken om onze gebruikersinterface aan te passen of te maken.
‫En zoals je kunt zien, heet het Hoofdvenster en het erft van venster.
‫En hier hebben we een methode genaamd Hoofdvenster, die vergelijkbaar is met de hoofdmethode in onze consoletoepassingen die we tot
‫nu toe hebben gezien.
‫Deze wordt aangeroepen zodra het venster open is of zodra de applicatie wordt gestart.
‫En zoals je hier kunt zien, wordt er een geïnitialiseerd onderdeel genoemd dat eenvoudig al het andere initialiseert
‫dat nodig is om ons venster te laten werken.
‫Het initialiseert bijvoorbeeld de titel en initialiseert op grootte, enzovoort.
‫En nu kunnen we doorgaan en onze eigen code hier schrijven.
‫Dus ik ga je eerst laten zien hoe je een knop maakt.
‫Dus allereerst hebben we een raster nodig waarin we die knop kunnen toewijzen.
‫Dus ik ga het raster noemen, wat een nieuw raster is.
‫Toen zei ik de inhoud hiervan tegen mijn raster, maar dat volstaat als ik gewoon het hoofdvenster zeg.
‫Het moet een bepaalde inhoud hebben.
‫Juist, zoals we hebben gezien in het voorbeeldbestand.
‫Dus venster opent deze tag hier en alles wat zich tussen die openings- en sluitingstags bevindt, is van mij.
‫Dus zo'n beetje deze hele inhoud hier.
‫Dit is de inhoud van mijn raam.
‫En wat ik hier zeg, is dat inhoud het raster zou moeten zijn.
‫Dus we maken een nieuw raster zoals we hier hebben gezien.
‫Dus we hebben hier ook een raster, wat lijkt op het openen en sluiten van de tag van het raster hier.
‫En nu zei ik dat als inhoud en nu kan ik dingen aan dit raster toevoegen.
‫Ik kan bijvoorbeeld een knop aan het raster toevoegen.
‫Laten we eerst die knop maken en ik noem hem BGN wordt een nieuwe knop.
‫Nu heb ik die knop en kan ik de eigenschappen ervan aanpassen, dus laten we zeggen dat ik de lettergrootte van mijn knop wil
‫instellen en dat ik het gewoon op die manier kan doen.
‫Ik kan gewoon zeggen dat het iets van 26 wordt.
‫Nu, in onze knop, zoals je hier hebt gezien, hadden we een omslagpaneel, dat de inhoud van de knop is.
‫Dus wat ik ga doen, is dat ik een paneel voor dat paneel ga maken en ik ga het
‫een paneel noemen dat een nieuw omslagpaneel wordt.
‫Nu kunnen we dingen toevoegen aan het wrap-paneel.
‫We voegen het omslagpaneel toe aan de knop en we voegen de slechte knop toe aan het raster.
‫En het raster maakt al deel uit van onze inhoud.
‫Dus laten we nu doorgaan en alle dingen maken die we aan het paneel willen toevoegen en daaraan willen toevoegen.
‫Dus we moeten eerst tekstblokkeren.
‫En het tekstblok, zoals je hier hebt gezien, is dit hier.
‫Dus we maken één, twee, drie tekstblokken.
‫De eerste zal bij 60 zijn en wordt een nieuw tekstblok.
‫En ik zeg gewoon sms de tekst.
‫Het heeft dus een tekstprop. , deze tekst hier, dat is de inhoud.
‫Dus voor de knop wordt de inhoud inhoud genoemd en voor het tekstblok wordt de tekst zelf tekst
‫genoemd.
‫Dus we hadden toegang tot de teksteigenschap van ons tekstblok en we zeiden dat tegen multi.
‫Vervolgens stellen we de kleur in.
‫Dus tekst die op de voorgrond wordt gedacht, wordt borstels.
‫En welke kleur had ik als eerste voor de multi en was blauw.
‫Oke.
‫Dus die ga ik blauw maken.
‫En zoals je kunt zien, penselen, nou ja, tekst wordt gedaan met penselen of de kleur van tekst wordt gedaan met de
‫klasse penselen.
‫Dus ik moet deze borstelloze klasse gebruiken en dan toegang krijgen tot de kleur.
‫Dus effen kleurborstel van het type penselen.
‫En vervolgens kan ik dat toevoegen aan het rec-paneel.
‫Dus nu ik de tekst heb aangesloten op het paneel en dat doe ik door zijn kinderen te benaderen en mijn tekst eraan
‫toe te voegen.
‫Dus zo voeg ik een tekstblok toe.
‫En als we dat niets zouden uitvoeren, zouden we nog niets zien omdat we het rep-paneel nog niet aan de knop hebben toegevoegd
‫en de knop ook niet aan het raster.
‫Maar dat zullen we zo doen.
‫Dus laten we maar doorgaan en de tekst aanpassen of eigenlijk die drie stukjes weer aanpassen.
‫Dus wat we doen, is dat we vervolgens alleen een tekst toevoegen aan meerkleurig en de laatste was een knop.
‫En nu hadden we de kleur rood en we hadden de kleur wit.
‫OK, dus ik heb die drie regels gewoon gekopieerd en geplakt omdat ze hetzelfde zijn.
‫Ik hoef niet elke keer een nieuw tekstblok te maken als ik gewoon het oude toevoeg.
‫En toen heb ik me aangepast.
‫Of pas de waarden aan en dan weer naar de rode panelen.
‫Nu, als die drie teksten in mijn wrap-paneel en wat ik nu kan doen, kan ik het rode paneel aan mijn knop toevoegen.
‫Dus knop, die inhoud wordt mijn rode paneel en uiteindelijk de kinderen, die advertentie.
‫En hier voeg ik mijn knop toe.
‫Dus daar had ik het over.
‫Dus we hebben het raster, we hebben de knop, we hebben het omslagpaneel.
‫En nu voegen we die tekst toe aan het paneel.
‫We voegen het rode paneel toe aan de knop, we voegen de knop toe aan het raster en we hebben het raster aan het venster toegevoegd.
‫En zoals je kunt zien, is dit hoe je het kunt doen met code.
‫En voordat we de code uitvoeren, moet ik eigenlijk ook het raster becommentariëren.
‫Dus ik kan eigenlijk alleen het raam hebben.
‫Dus er is alleen het venster in ons ene hoofdvenster, bijvoorbeeld bestand en alle andere
‫code bevindt zich in ons hoofdvenster dat zit, de code erachter.
‫Dit bestand is dus de code achter ons hoofdvenster dat Zemel.
‫Nu ontbreekt er nog één ding voordat we dat testen, en dat is dat ik een nieuw belastingblok aan mijn tekst
‫toewijs.
‫Dus ik moet dat doen voor mijn beide tekst.
‫Het punt is dus dat we hier een tekst maken en deze initialiseren met een nieuw tekstblok.
‫En nu moeten we een nieuw tekstblok maken en dit aan onze tekst toewijzen voordat we dat aan ons rep-paneel kunnen
‫toevoegen.
‫Dus nu hebben we dat we de code kunnen uitvoeren.
‫En we zullen zien dat we ook onze veelkleurige knop hebben, en zoals je kunt zien, hebben we hetzelfde gedaan als
‫we eerder hebben gedaan met Zemo, en dat was dit hier, dat er ook vrij eenvoudig en netjes uitziet.
‫We deden het zo met C-scherpe code.
‫Nu kun je je eigen gang gaan, maar we gaan vooral met de Zemel aan de slag.
‫Ik wilde je gewoon laten zien dat je alles kunt doen wat je ermee doet, alles wat je ook kunt doen met code
‫erachter.
‫Maar soms is het veel logischer om code achter te gebruiken.
‫Dus als u bijvoorbeeld iets dynamisch wilt toevoegen, is de code erachter logischer.
‫Dus draaien met C sharp of de aanpassingen maken met C Sharp en de Zemel is
‫logischer als je statische gebruikersinterfaces hebt.
‫En trouwens, wanneer je het Zemel-bestand maakt zoals we hier hebben, wat het doet, is dat het doorgaat
‫en deze code achter het bestand maakt.
‫Het maakt dus eenvoudig deze code aan en voert deze uit zodra de toepassing begint te lopen, zodra ons hoofdvenster wordt
‫betrapt.
‫Dus het is toch gedaan.
‫En we doen het zo met Zemo of we doen het handmatig door de code te maken.
‫Dus nu zou je natuurlijk kunnen argumenteren, hé, er is zoiets als dit met en beslissen welke je niet hebt gezegd,
‫nou, dat kan ik hier heel gemakkelijk doen.
‫Ik zou gewoon knop die breedte kunnen zeggen en ik zou dat kunnen instellen op honderdvijftig en die knop op die hoogte kunnen
‫zetten en bijvoorbeeld op honderd kunnen zetten.
‫Dan wordt de knop dienovereenkomstig aangepast.
‫En zoals je nu kunt zien, is het al over twee regels verdeeld, dus dat is Zemel en de code erachter met
‫code.
‫Ik weet dat het een lange video was, maar we gaan nog meer coole dingen zien in de volgende video.
‫Dus ik zie je daar.