# 06 XAML - Cheat Sheet [toc] Pages ====== Eenvoudige Pages ----------------- * **ContentPage** – Een pagina die een enkele View weergeeft. Deze View is meestal in de vorm van een Layout die op zijn beurt weer andere controls bevat. De ContentPage erft over van de TemplatePage. * **NavigationPage** – Voorziet een eenvoudig navigatiemodel waarbij nieuwe pagina’s in een lineair manier worden geopend. Alle geopende pages bevinden zich op een Stack. De gebruiker kan voorwaarts en achterwaarts navigeren. Pages met childpages --------------------- * **MasterDetailPage** – Deze pagina beheert twee andere pages: een masterpage en een detailspage. De master is meestal een lijst met items waar meer details over kunnen worden opgevraagd. De detailspage geeft dan de details weer indien er op een item geklikt wordt. * **TabbedPage** – Plaats pages in een sequentie en laat toe om swipend te navigeren door de tabs/pagina’s. * **CarouselPage** – Laat toe om te navigeren doorheen childpages door middel van swipen. Bij dit soort pagina’s lijkt het alsof alle childpages een ketting vormen. Deze pages zijn deprecated en worden best niet gebruikt. Layout ======= * **StackLayout** – Organiseert zijn children in een stapel. Deze kan zowel verticaal of horizontaal georiënteerd zijn. Dit is de meest gebruikelijke Layout. * **AbsoluteLayout** – Elke child View wordt op de pixel nauwkeurig neergeplaatst door middel van coördinaten en afmetingen. Hierbij moet je zelf de coördinaten berekenen zodat je alle resoluties kan ondersteunen. * **RelativeLayout** – Hierbij worden de posities en de afmetingen van de children afhankelijk gemaakt van de Layout zelf of van andere children in de Layout. * **Grid** – Organiseert zijn children in een raster met rijen en kolommen. Dit is zeer handig voor het weergeven van bijvoorbeeld afbeeldingen. Cellen van het raster kunnen meerdere rijen en kolommen overspannen. * **Frame** – Omhult een onderliggende View met een boord dat voorzien kan worden van een kleur, schaduw en dergelijke. Het kan evengoed gebruikt worden om zelf complexere UI-elementen (zoals bijvoorbeeld een kaartje voor een contactpersoon) te maken. * **FlexLayout** – Deze Layout werd geïnspireerd op de CSS flexbox en lijkt op de StackLayout, maar het belangrijkste verschil is dat het ook wrapping ondersteunt: wanneer elementen niet meer op het scherm passen, schuiven ze door naar een volgende kolom/rij. FlexLayout heeft dus verschillende opties voor de richting (bv. Views van onder naar boven of van links naar rechts weergeven), alineëring (bv. even veel ruimte tussen alle Views voorzien) en aanpassingen voor verschillende schermgroottes. FlexLayout laat toe om sneller een eigen dynamische en complexere UI te maken. View ====== Een View is een visueel element dat zichtbaar is op de UI. De klasse vormt de bouwsteen voor de meeste zaken die je in een Page plaatst. Een Button, een Label, een Image maar ook een Layout is een soort View. * **ActivityIndicator** – Een loading animatie die de gebruiker duidelijk maakt dat er gewacht moet worden. * **Button** – Een knop waar de gebruiker op kan tappen. Events kunnen worden opgevangen via het Clicked event. * **Entry** – Een tekstvak voor tekst bestaand uit 1 regel. Ideaal voor gebruik voor kleinere stukken tekst zoals wachtwoorden of e-mailadressen. * **Editor** – Een uitgebreider tekstvak waar meerdere lijnen tekst ingegeven kunnen worden. * **Label** – Toont een eenvoudig label, dat meestal de bedoeling heeft om een andere View te beschrijven. * **Switch** – Een schakelaar om een instelling aan of uit te schakelen. * **Picker** – Een mobiele versie van het klassieke neerklapmenu, dat een lijst met elementen weergeeft waaruit gekozen kan worden zodra de gebruiker erop klikt. * **Image** –Dit kan een afbeelding zijn die lokaal bewaard wordt als asset, of een online afbeelding die gedownload moet worden, het kan ook een embedded resource in de assembly. Je kan er ook splashscreens mee bouwen. * **ListView** – Geeft een verzameling homogene gegevens weer in een lijstvorm. De gegevens worden rij per rij afgebeeld met behulp van Cell elementen. ListView elementen werken met een ItemsSource property dat databinding ondersteunt. * **EntryCell** – Bestaat uit een label en een tekstvak waar de gebruiker een regel tekst in kan geven. * **SwitchCell** – Een eenvoudige booleaanse aan/uit schakelaar * **TextCell** – Geeft tekstuele inhoud mee met een hoofding en een beschrijving. * **ImageCell** – Dit is een TextCell dat een afbeelding kan bevatten. * **ViewCell** \- A Xamarin.Forms ViewCell is a cell that can be added to a ListView or TableView, which contains a developer-defined view. * **TableView** – Biedt de mogelijkheid om rijen weer te geven die niet heterogene inhouden bevatten, bijvoorbeeld als de ene rij cijfers bevat, en een andere tekst). Het kan gebruikt worden om een scherm met instellingen te bouwen, een formulier dat ingevuld moet worden, enz. * **WebView** – Deze View laat toe om webpagina’s te bekijken via een browser widget op het scherm. Je kan events opvangen en de navigeren doorheen de webpagina’s. De webpagina’s mogen zich online bevinden, maar kunnen ook lokaal worden bewaard, met alle daarbij horende bronnen zoals afbeeldingen, CSS en javascript bestanden. Opgelet voor browser-inconsistenties: de HTML wordt gerenderd met behulp van de Chrome-engine in Android, Safari in iOS en Internet Explorer in UWP! Afbeeldingen ============= Een belangrijke manier om je applicatie een eigen karakter te geven is het gebruik van afbeeldingen. Xamarin.Forms biedt drie manieren aan om afbeeldingen in je app te krijgen; lokale bewaard op het bestandssysteem, embedded in de assembly, of gedownload van het web. Je kan een afbeelding weergeven met de Image view. Deze control heeft twee belangrijke properties: * **Source** – bepaalt de locatie van de afbeelding. Dat is ofwel een File, Uri of Resource. Om dat de Source property een ImageSource instantie verwacht, kan je de onderstaande statische methoden gebruiken: * ImageSource.**FromFile()** – aan de hand het **pad** naar de **lokale afbeelding** * ImageSource.**FromResource()** – bevat de **Resource ID** van de embedded afbeelding * ImageSource.**FromURI()** – bevat de URL naar de online afbeelding * **Aspect** – hiermee bepaal je hoe de afbeelding het beschikbare oppervlak opvult. * **Fill** – rekt de afbeelding uit zodat het de beschikbare oppervlakte volledige bedekt. Hierdoor krijg je vaak een vervormde afbeelding als resultaat. * **AspectFill** – knipt de afbeelding zodanig bij dat het volledige oppervlak bedekt is. Hiermee voorkom je vervorming van de afbeelding. * **AspectFit** – schaalt de afbeelding zodat het in het oppervlak kan passen. Hiermee krijg je witruimte boven en onder, of links en rechts, afhankelijk van de oriëntatie van de afbeelding. Er zijn ook andere Views waar een afbeelding aan toegevoegd kan worden; * **Page** – Alle overervende klassen van Page hebben een BackgroundImage en een Icon property. Deze properties verwachten een lokaal afbeeldingsbestand. Niet alle platformen geven deze afbeeldingen weer. * **ToolbarItem** – aanvaardt een lokaal afbeeldingsbestand om te gebruiken als icoon a.d.h.v. de Icon property. * **ImageCell** – Hiermee kan je afbeeldingen weergeven in een ListView of TableView. Het aanvaardt een ImageSource dat dus zowel uit een File, Resource of URI afkomstig kan zijn.