‫Welkom terug.
‫Nu is het eindelijk tijd om het raster te gebruiken en je hebt gezien hoe je eerder een tech-paneel en een
‫rack-paneel kunt gebruiken en die tegenwoordig goed gestapeld en ingepakt.
‫En nu zullen we Grid bekijken, waarmee we dingen in een raster kunnen plaatsen, en we zullen beginnen door
‫simpelweg een twee keer te gebruiken om te rasteren.
‫En allereerst hebben we daarvoor een kolom en een roldefinitie nodig, zodat we door kunnen gaan en binnen ons
‫raster.
‫Ga dus naar je Zemel-bestand en maak vervolgens binnen het raster een kolomdefinitie van een rasterpunt en hier kun je je
‫verschillende kolommen definiëren.
‫Dus allereerst heb je de kolomdefinities, meervoud, nodig en dan kun je doorgaan en
‫je individuele kolomdefinities maken.
‫U kunt bijvoorbeeld doorgaan en er hier een maken.
‫Ik ga het zo simpel houden in één regel.
‫En wat ik hier wil definiëren, is gewoon de breedte en breedte die ik, laten we zeggen, op 100 zou
‫kunnen zetten en laten we nu een andere kolom maken, die ook 100 breed wordt.
‫Nu, dat is niet genoeg.
‫We hebben ook rijen nodig, behalve dat we maar één kamer willen hebben.
‫Dus laten we beginnen met slechts één rij.
‫En ik ga eerst een knop maken.
‫En deze knop gaat iets zeggen als, hallo daar, en het zou in het raster moeten staan,
‫die kolom nul.
‫Nu maak ik een tweede knop, die het raster zou moeten zijn, die kolom.
‫Als we nu naar ons ontwerp kijken, kunnen we zien dat we onze twee knoppen hebben.
‫Hallo daar.
‫Laten we onze code uitvoeren om te zien hoe dit eruitziet.
‫Er zijn trouwens maar 100 pixels breed, zoals je hier kunt zien.
‫De breedte is dus beperkt tot 100 pixels.
‫Dus als je hier een totale waarde toevoegt, dan zal die het gewoon gebruiken als pixels in de breedte.
‫Zoals je hier kunt zien, is dat hoe breed een kolom is.
‫En natuurlijk zouden we kunnen zeggen dat we hier gemakkelijk wat meer kolommen kunnen plaatsen.
‫Nou, dat kunnen we doen en dat zullen we later doen.
‫Maar voordat we dat doen, wil ik je iets heel belangrijks laten zien.
‫Dus als ik mijn Zemel nu hierheen sleep, is het eigenlijk handig omdat we het verschil direct in onze gebruikersinterface zullen
‫zien.
‫En ik wil de breedte wijzigen van 100 in automatisch.
‫En zoals u kunt zien wat automatisch doet, neemt het automatisch alleen de breedte in beslag die nodig is
‫om in alle inhoud van het element te passen.
‫Dus in ons geval heeft de knop een tekst met de naam Hallo daar, en dat is hoeveel ruimte hoog daar nodig heeft
‫of vereist.
‫En zo breed wordt onze button ook.
‫En zoals je kunt zien voor de eerste kolomdefinitie, dus de eerste
‫kolomdefinitie waar onze knop met daar een is, zo is de of dat is de knop die is gewijzigd.
‫Zoals je nu kunt zien, is het veranderd in negenenvijftig komma vijf pixels.
‫Als ik wat meer tekst toevoeg, wat meer tekst, kun je zien dat het zich uitbreidt tot honderdvijftig drie komma
‫vijf pixels.
‫U kunt dus gemakkelijk doorgaan en auto gebruiken als u wilt dat alles correct past op basis van hoeveel ruimte het
‫daadwerkelijk nodig heeft.
‫Maar wat als ik de kolommen precies even breed wil maken?
‫Natuurlijk kan ik hier volledige waarden gebruiken of hier vaste waarden, maar ik kan ook ster gebruiken.
‫En wat Ster zal doen, is dat als ze allemaal, allemaal een ster hebben, het gewoon zegt: OK, alle ruimte
‫in beslag nemen.
‫En in dit geval is het alleen de beschikbare ruimte die deze specifieke kolom heeft, en het is precies hetzelfde als
‫de andere.
‫Er wordt nu dus gewacht.
‫Dus deze heeft een gewicht van één en die heeft ook een gewicht van één.
‫Ze zijn dus gelijk gewogen, wat betekent dat ze alleen gelijk zijn aan als we dat willen veranderen, laten
‫we zeggen dat ik deze tweede hier wil maken, de tweede knop dubbel zo breed als de eerste die ik dubbelster
‫kan gebruiken.
‫Dus nu zal deze twee keer zo breed zijn als de eerste.
‫Als ik bijvoorbeeld drie van de vijfde aan de linkerkant en twee vijfde aan de rechterkant als breedte wil hebben,
‫kan ik gewoon deze benadering gebruiken, zoals je hier kunt zien.
‫Dus drie keer de ster en twee keer om te beginnen.
‫Dus wat voegt het eigenlijk allemaal toe en dan neemt het alleen de meervoudige rekening van wat hier wordt gezegd.
‫Dus laten we zeggen dat we drie en twee hebben.
‫Dus wat het doet, er staat, OK, nu zijn het er in totaal vijf.
‫Eenheden die beschikbaar zijn en ik ga drievijfde van die eenheden nemen en ik zou zelfs iets als 100 kunnen doen, zodat je
‫kunt zien dat deze er 100 nodig heeft en dit zal er niet één nemen en er maar twee.
‫Dus zo kun je spelen met de breedte en hetzelfde geldt voor de hoogtes.
‫Dus laten we nu doorgaan en een roldefinitie maken.
‫Zo geweldig dat roldefinities en hier kunnen we doorgaan en onze eigen definities maken.
‫Dus de eerste en ik ga het ook simpel houden, zoals in één rij en deze heeft een hoogte nodig.
‫Dus ik ga gewoon zeggen, OK, ik wil de sterhoogte hebben.
‫En nu gebruiken we hetzelfde weer voor de tweede rij.
‫En zoals je nu kunt zien, hebben we twee rijen.
‫Dus één hier en de tweede onderaan.
‫En zoals je kunt zien, heeft de tweede rij nog geen inhoud.
‫Laten we dat nu veranderen door, laten we zeggen, allereerst deze knop hier onderaan te plaatsen.
‫Rechts.
‫En hoe kunnen we dat doen?
‫Nou, we gebruiken gewoon raster, punt, rij, en we zeggen dat het een echte is.
‫Nu vraag je je misschien af, waarom is die?
‫Waarom gaat het niet al te best?
‫Zoals je waarschijnlijk al weet, beginnen we bij het programmeren met nul te tellen.
‫Dus de eerste rij is nul, de tweede rij is één.
‫Dus nu hoog is er op de tweede rij, dat is rij één.
‫Laten we nu doorgaan en nog twee knoppen maken en misschien zelfs hun namen veranderen in
‫iets dat meer te zeggen heeft over hun feitelijke informatie.
‫Dus ik ga dat in de kolom nul in rij één zetten en die, eigenlijk, ik ga het
‫terugzetten naar nul één.
‫En die zal er één zijn.
‫En eigenlijk is dat zo kolom één en rij nul.
‫Dus nu hebben we alle knoppen en die zal er één zijn.
‫Een daarvan is knop tot knop drie en knop vier.
‫Geweldig.
‫Dus als we daar nu mee beginnen, zul je zien dat dat ook geldt voor de Whitesell.
‫Dus één, twee, drie, vier.
‫Oke.
‫Nu, een kleine uitdaging voor jou, aangezien je hebt gezien hoe je geweldige kolommen en rijen kunt gebruiken.
‫Ga je gang en maak hier een raster van drie keer drie met acht knoppen.
‫Dus één, twee, acht moeten knoppen zijn en de negende positie.
‫De positie rechtsonder of het rasterelement moet dus een tekstblok zijn.
‫Dus plaats een video en probeer dat te doen.
‫Oké, ik hoop dat je het geprobeerd hebt, dus wat ik ga doen is dat ik nog een kolom ga toevoegen door hier een
‫kolomdefinitie toe te voegen, en het zal even breed zijn en hetzelfde voor de hoogte.
‫Het wordt gelijke hoogte.
‫En nu, zoals je kunt zien, zien de knoppen er een beetje raar uit, maar dat is gewoon omdat ik nog niet heb uitgezoomd.
‫Dus nu kunnen we het goed zien.
‫Nu hebben we onze knoppen met nul één enzovoort.
‫Dus ik ga die knop hier kopiëren en ik ga ook een kolom positioneren.
‫Dus Rosero en kolom twee.
‫Nu zou je natuurlijk kunnen beweren dat het logischer is om te beginnen met de rij en dan de kolom in
‫te voeren terwijl je dat kunt doen.
‫Maar in mijn geval is het andersom.
‫Het gaat er uiteindelijk om dat je ze allebei op de juiste manier gebruikt.
‫Nu hebben we de drie knoppen bovenaan.
‫Laten we nu doorgaan en de tweede rij maken of de tweede rij afronden.
‫En dat is ook de column.
‫En ik ga dat nog drie keer kopiëren, eigenlijk.
‫Twee keer is genoeg.
‫En die is rij naar positie nul en rij naar positie één of kolom één.
‫Nu moeten we natuurlijk de waarden wijzigen.
‫Dus één, twee, drie, vier, vijf, zes, zeven en acht.
‫En zoals ik linksonder al zei, ik zou graag een tekstblok willen hebben.
‫Dus het tekstblok heeft dezelfde benadering met korrels.
‫Je moet een kolom en een rij hebben.
‫Dus ik ga gewoon zeggen dat dit kolom twee en rasterrij wordt.
‫Twee ook.
‫Dus nu zijn we onderaan, links of rechtsonder, we kunnen naar buiten gaan en het wat tekst geven en ik
‫ga gewoon iets zeggen.
‫Ik sms nu, je zou kunnen zeggen, oh, ik vind het niet leuk.
‫De tekst staat links bovenaan.
‫Terwijl je dat gemakkelijk kunt veranderen door een ..
‫Voer zoiets in als horizontale uitlijning en gebruik hier het midden.
‫Dus nu is het horizontaal gecentreerd.
‫Laten we inzoomen zodat je het kunt zien.
‫Oke.
‫Genoeg van één om het ook verticaal te centreren.
‫Ik gebruik gewoon verticale uitlijning en ik gebruik hier ook het midden.
‫Dus zoals je ziet, is de knop perfect gecentreerd en kunnen we zelfs doorgaan en de lettergrootte wijzigen, gewoon
‫omdat we dat kunnen.
‫En laten we het een beetje groter maken, zoals 32.
‫En nu kunnen we zien dat we een raster van drie keer drie hebben met acht knoppen en een tekst.
‫Nu kunt u doorgaan en alle verschillende soorten elementen in uw venster hier en uw hoofdvenster in uw
‫raster uitlijnen.
‫Dus dat is het mooie van het gebruik van rasters.
‫En zoals je hebt gezien, kun je dingen op elkaar stapelen.
‫U kunt een gestapeld paneel maken met meerdere rasters.
‫En daarnaast heb je nog een tekst ertussen, zoiets.
‫U bent dus niet beperkt tot het gebruik van één element hier.
‫Zoals je kunt zien, kunnen we doorgaan en laten we zeggen dat we dat in zo'n gestapeld paneelstapelpaneel kunnen plaatsen.
‫Dus ik ga het raster slepen.
‫Zoals je nu kunt zien, is het klagen omdat het hoofdvenster van Zemel alleen de eerste kent.
‫Dus het zal alleen het gestapelde paneel zien als we nu ons uiterlijk bekijken.
‫Laten we er eigenlijk mee stoppen, zodat we kunnen zien hoe er omgekeerde markup staat.
‫Dus als we het hele raster in ons stapelpaneel nemen, zoals je kunt zien, is het daar en neemt het het op.
‫Beneden is er dus genoeg ruimte.
‫Dus hier zouden we nog een knop kunnen toevoegen.
‫Zodat je ziet dat dit mogelijk is en deze zal hier zijn om een hoogte van honderd te hebben.
‫En nu, zoals je kunt zien, stapelt het zich allemaal op daarboven.
‫En ook al hebben we deze hoogte dat ze allemaal even hoog zijn, deze tekst had zoveel ruimte nodig dat
‫hij die negeert.
‫De lettergrootte is dus te groot.
‫Dus als we teruggaan naar 16, is het nog steeds te groot.
‫Als we naar, laten we zeggen, 12 gaan.
‫Nu lijkt het er meer op.
‫Dus wanneer je echte definities voor dit verhaal gebruikt, moet je voorzichtig zijn.
‫Als een element meer ruimte nodig heeft dan er is, dan zal het overlopen.
‫Oke.
‫Dat zijn dus twee roosters.
‫Ik ga terug naar het prachtige standaardrooster dat we daar hadden.
‫En in het algemeen wat ik altijd aanbeveel nadat je zoiets hebt gezien en nadat je zoiets hebt
‫geleerd, ga je gang en speel ermee.
‫Speel gewoon wat met verschillende soorten elementen.
‫Je hebt er al een aantal gezien en we zullen later nog veel meer bedieningselementen bekijken.
‫Dus degenen die we tot nu toe hebben gebruikt, zijn voornamelijk knoppen, toch.
‫En tekstblokken.
‫Maar we zullen in de toekomstige video's verschillende mooie bedieningselementen gebruiken.
‫Dus ik zie je daar.