Responsieve indelingen maken in canvas-apps

Voordat u een canvas-app maakt in Power Apps, geeft u aan of de app moet worden aangepast voor een telefoon of tablet. Deze keuze bepaalt de grootte en de vorm van het canvas waarop u uw app gaat bouwen.

Nadat u die keuze hebt gemaakt, kunt u nog een paar keuzes maken als u Instellingen > Weergave selecteert. U kunt kiezen uit staande of liggende stand en schermgrootte (alleen tablet). U kunt ook de hoogte-breedteverhouding vergrendelen of ontgrendelen en apparaatrotatie ondersteunen (of niet).

Deze keuzen vormen de basis voor elke andere keuze die u maakt bij het ontwerpen van schermindelingen. Als uw app wordt uitgevoerd op een apparaat van een ander formaat of op internet, wordt de schaal van uw volledige indeling aangepast aan het scherm waarop de app wordt uitgevoerd. Als een app die is ontworpen voor een telefoon bijvoorbeeld in een groot browservenster wordt uitgevoerd, wordt de app ter compensatie geschaald en ziet deze er te groot uit voor de beschikbare ruimte. De app kan niet profiteren van de extra pixels door meer besturingselementen of meer inhoud weer te geven.

Als u een responsieve indeling maakt, kunnen besturingselementen reageren op verschillende apparaten of vensterformaten, waardoor alles er natuurlijker uitziet. Voor een responsieve indeling past u bepaalde instellingen aan en schrijft u expressies in de gehele app.

Passend maken uitschakelen

U kunt elk scherm zo configureren dat de indeling wordt aangepast aan de werkelijke ruimte waarin de app wordt uitgevoerd.

U activeert responsiviteit door de standaard ingeschakelde instelling Passend maken van de app uit te schakelen. Wanneer u deze instelling uitschakelt, wordt ook Hoogte-breedteverhouding vergrendelen uitgeschakeld, omdat u niet meer ontwerpt voor een specifieke schermvorm. (U kunt nog steeds aangeven of uw app apparaatrotatie ondersteunt.)

Als u uw app responsief wilt maken, moet u extra stappen ondernemen, maar deze wijziging is de eerste stap om responsiviteit mogelijk te maken

App en schermafmetingen

Om ervoor te zorgen dat de indelingen van uw app reageren op veranderingen in de schermafmetingen, schrijft u formules waarin de eigenschappen Width en Height van het scherm worden gebruikt. Als u deze eigenschappen wilt weergeven, opent u een app in Power Apps Studio en selecteert u vervolgens een scherm. De standaardformules voor deze eigenschappen worden weergegeven op het tabblad Geavanceerd van het rechterdeelvenster.

Width = Max(App.Width, App.DesignWidth)

Height = Max(App.Height, App.DesignHeight)

Deze formules verwijzen naar de eigenschappen Width, Height, DesignWidth en DesignHeight van de app. De eigenschappen Width en Height komen overeen met de afmetingen van het apparaat of het browservenster waarin uw app wordt uitgevoerd. Als de gebruiker het formaat van het browservenster wijzigt (of het apparaat draait als Stand vergrendelen is uitgeschakeld), veranderen de waarden van deze eigenschappen dynamisch. De formules in de eigenschappen Width en Height van het scherm worden opnieuw geretourneerd wanneer deze waarden veranderen.

De eigenschappen DesignWidth (ontwerpbreedte) en DesignHeight (ontwerphoogte) komen van de afmetingen die u opgeeft in het deelvenster Scherm van Instellingen. Als u bijvoorbeeld de telefoonindeling in staande stand selecteert, is DesignWidth 640 en DesignHeight 1136.

Omdat ze worden gebruikt in de formules voor de eigenschappen voor Width en Height, kunt u DesignWidth en DesignHeight beschouwen als de minimale afmetingen waarvoor u de app ontwerpt. Als het gebied dat werkelijk beschikbaar is voor uw app, nog kleiner is dan deze minimale afmetingen, zorgen de formules voor de eigenschappen Width en Height ervoor dat de waarden niet kleiner worden dan de minimale waarden. In dat geval moet de gebruiker scrollen om alle inhoud van het scherm te zien.

Nadat u DesignWidth en DesignHeight van uw app hebt ingesteld, hoeft u (meestal) geen standaardformules te wijzigen voor de eigenschappen Width en Height van elk scherm. Verderop worden in dit onderwerp gevallen besproken waarin u deze formules mogelijk wilt aanpassen.

Formules voor dynamische indeling gebruiken

Als u een responsief ontwerp wilt maken, moet u elk besturingselement zoeken en vergroten of verkleinen met behulp van formules in plaats van absolute (constante) coördinaatwaarden. Met deze formules worden de positie en grootte van elk besturingselement uitgedrukt in termen van de algehele schermgrootte of ten opzichte van andere besturingselementen op het scherm.

Belangrijk

Nadat u formules hebt geschreven voor de eigenschappen X, Y, Width en Height van een besturingselement, worden uw formules overschreven met constante waarden als u het besturingselement vervolgens in de canvas-editor sleept. Wanneer u formules gaat gebruiken om een dynamische indeling te verkrijgen, moet u besturingselementen voor slepen vermijden.

In het eenvoudigste geval vult één besturingselement een geheel scherm. Voor dit effect stelt u de eigenschappen van het besturingselement in op deze waarden:

Eigenschap	Value
X	0
Y	0
Width	Parent.Width
Height	Parent.Height

Deze formules gebruiken de Parent-operator. Voor een besturingselement dat direct in een scherm is geplaatst, verwijst Parent naar het scherm. Met deze eigenschapswaarden verschijnt het besturingselement in de linkerbovenhoek van het scherm (0, 0) en heeft het dezelfde Width en Height als het scherm.

Verderop in dit onderwerp past u deze principes (en de Parent-operator) toe op positiebesturingselementen in andere containers, zoals galerieën, groepsbesturingselementen en onderdelen.

Als alternatief kan het besturingselement alleen de bovenste helft van het scherm vullen. Voor dit effect stelt u de eigenschap Height in op Parent.Height / 2 en laat u de andere formules ongewijzigd.

Als u wilt dat een tweede besturingselement de onderste helft van hetzelfde scherm vult, kunt u ten minste twee andere benaderingen gebruiken om de bijbehorende formules te bouwen. U kunt voor het gemak de volgende benadering gebruiken:

Besturingselement	Eigenschap	Formule
Upper	X	0
Upper	Y	0
Upper	Width	Parent.Width
Upper	Height	Parent.Height / 2
Lower	X	0
Lower	Y	Parent.Height / 2
Lower	Width	Parent.Width
Lower	Height	Parent.Height / 2

Met deze configuratie bereikt u het gewenste effect, maar moet u elke formule bewerken als u van gedachten verandert over de relatieve afmetingen van de besturingselementen. U wilt bijvoorbeeld dat het bovenste besturingselement alleen bovenaan voor eenderde het scherm beslaat, terwijl het onderste besturingselement het onderste tweederde deel vult.

Voor dat effect moet u de eigenschap Height van het besturingselement Upper en de eigenschappen voor Y en Height van het besturingselement Lower bijwerken. Overweeg in plaats daarvan de formules voor het besturingselement Lower in termen van het besturingselement Upper (en zichzelf) te schrijven, zoals in dit voorbeeld:

Besturingselement	Eigenschap	Formule
Upper	X	0
Upper	Y	0
Upper	Width	Parent.Width
Upper	Height	Parent.Height / 3
Lower	X	0
Lower	Y	Upper.Y + Upper.Height
Lower	Width	Parent.Width
Lower	Height	Parent.Height - Lower.Y

Met deze formules hoeft u alleen de eigenschap Height van het besturingselement Upper te wijzigen om een ander deel van de hoogte van het scherm uit te drukken. Met het besturingselement Lower vinden automatisch verplaatsingen en formaatwijzigingen plaats om de wijziging door te voeren.

U kunt deze formulepatronen gebruiken om de gemeenschappelijke indelingsrelaties tussen een besturingselement met de naam C en het bovenliggende besturingselement of het besturingselement op hetzelfde niveau met de naam D uit te drukken.

Relatie tussen C en het bijbehorende bovenliggende besturingselement	Eigenschap	Formule	Illustratie
C vult de breedte van het bovenliggende besturingselement met een marge van N	X	N
	Width	Parent.Width - (N * 2)
C vult de hoogte van het bovenliggende besturingselement met een marge van N	Y	N
	Height	Parent.Height - (N * 2)
C uitgelijnd met de rechterrand van het bovenliggende besturingselement met een marge van N	X	Parent.Width - (C.Width + N)
C uitgelijnd met de onderrand van het bovenliggende besturingselement met een marge van N	Y	Parent.Height - (C.Height + N)
C horizontaal gecentreerd ten opzichte van het bovenliggende besturingselement	X	(Parent.Width - C.Width) / 2
C verticaal gecentreerd ten opzichte van het bovenliggende besturingselement	Y	(Parent.Height - C.Height) / 2

Relatie tussen C en D	Eigenschap	Formule	Illustratie
C horizontaal uitgelijnd met D en met dezelfde breedte als D	X	D.X
	Width	D.Width
C verticaal uitgelijnd met D en met dezelfde hoogte als D	Y	D.Y
	Height	D.Height
Rechterrand van C uitgelijnd met de rechterrand van D	X	D.X + D.Width - C.Width
Onderrand van C uitgelijnd met de onderrand van D	Y	D.Y + D.Height - C.Height
C horizontaal gecentreerd ten opzichte van D	X	D.X + (D.Width - C.Width) / 2
C verticaal gecentreerd ten opzichte van D	Y	D.Y + (D.Height - C.Height) /2
C rechts gepositioneerd van D met een ruimte van N	X	D.X + D.Width + N
C onder D gepositioneerd met een ruimte van N	Y	D.Y + D.Height + N
C vult de ruimte tussen D en de rechterrand van het bovenliggende besturingselement	X	D.X + D.Width
	Width	Parent.Width - C.X
C vult de ruimte tussen D en de onderrand van het bovenliggende besturingselement	Y	D.Y + D.Height
	Height	Parent.Height - C.Y

Hiërarchische indeling

Wanneer u schermen maakt die meer besturingselementen bevatten, wordt het handiger (of zelfs noodzakelijk) om besturingselementen te positioneren ten opzichte van een bovenliggend besturingselement, in plaats van ten opzichte van het scherm of een besturingselement op hetzelfde niveau. Door uw besturingselementen in een hiërarchische structuur te ordenen, kunt u uw formules gemakkelijker schrijven en onderhouden.

Galerieën

Als u een galerie in uw app gebruikt, moet u besturingselementen in de sjabloon van de galerie indelen. U kunt deze besturingselementen positioneren door formules te schrijven die de Parent-operator gebruiken, waarmee naar de galeriesjabloon wordt verwezen. Gebruik in de formules voor besturingselementen in een galeriesjabloon de eigenschappen Parent.TemplateHeight en Parent.TemplateWidth. Gebruik Parent.Width en Parent.Height niet. Deze eigenschappen verwijzen namelijk naar de algehele grootte van de galerie.

Besturingselement Container

U kunt het besturingselement Layout container gebruiken als een bovenliggend besturingselement.

Bekijk het voorbeeld van een koptekst bovenaan een scherm. Normaal gesproken heeft een koptekst een titel en verschillende pictogrammen waarmee uw gebruikers kunnen werken. U kunt zo'n koptekst maken met het besturingselement Container, met daarin het besturingselement Label en twee besturingselementen Pictogram:

Stel de eigenschappen voor deze besturingselementen in op deze waarden:

Eigenschap	Header	Menu	Afsluiten	Titel
X	0	0	Parent.Width - Close.Width	Menu.X + Menu.Width
Y	0	0	0	0
Width	Parent.Width	Parent.Height	Parent.Height	Close.X - Title.X
Height	64	Parent.Height	Parent.Height	Parent.Height

Voor het besturingselement Header verwijst Parent naar het scherm. Voor de andere besturingselementen verwijst Parent naar het besturingselement Header.

Nadat u deze formules hebt geschreven, kunt u de grootte of positie van het besturingselement Header aanpassen door de formules voor de bijbehorende eigenschappen te wijzigen. De grootten en posities van de onderliggende besturingselementen worden automatisch aangepast.

Containerbesturingselementen met automatische indeling

U kunt een functie gebruiken, de containerbesturingselementen met automatische indeling om de onderliggende onderdelen automatisch op te maken. Deze containers bepalen de positie van de onderliggende onderdelen, zodat u nooit X, Y hoeft in te stellen voor een onderdeel in de container. Het kan ook de beschikbare ruimte verdelen over de onderliggende onderdelen op basis van de instellingen en zowel de verticale als horizontale uitlijning van de onderliggende onderdelen bepalen. Meer informatie: Containerbesturingselementen met automatische indeling

Onderdeel

Als u een andere functie gebruikt, met de naam Onderdelen, kunt u bouwstenen maken en deze in uw hele app hergebruiken. Net als bij het besturingselement Container, moeten voor de besturingselementen die u in een onderdeel plaatst, de positie- en formaatformules worden gebaseerd op Parent.Width en Parent.Height, waarmee wordt verwezen naar de grootte van het onderdeel. Meer informatie: Een onderdeel maken.

Indeling voor apparaatgrootte en -stand aanpassen

Tot dusver hebt u geleerd hoe u formules kunt gebruiken om de grootte van elk besturingselement aan te passen aan de beschikbare ruimte, terwijl u de besturingselementen ten opzichte van elkaar uitgelijnd houdt. Maar misschien wilt of moet u ingrijpendere wijzigingen aanbrengen in de indeling ter aanpassing aan verschillende apparaatgrootten en -standen. Wanneer een apparaat bijvoorbeeld van staand naar liggend wordt geroteerd, wilt u misschien overschakelen van een verticale naar een horizontale indeling. Op een groter apparaat kunt u meer inhoud tonen of de inhoud herschikken voor een aantrekkelijkere indeling. Op een kleiner apparaat moet u mogelijk inhoud over meerdere schermen verdelen.

Apparaatstand

Mogelijk zijn de standaardformules voor de eigenschappen Width en Height van een scherm, zoals eerder in dit onderwerp is beschreven, niet echt passend als een gebruiker een apparaat roteert. Een app die is ontworpen voor een telefoon in staande stand, heeft bijvoorbeeld een DesignWidth van 640 en een DesignHeight van 1136. Dezelfde app op een telefoon in liggende stand heeft deze eigenschapswaarden:

• De eigenschap Width van het scherm is ingesteld op Max(App.Width, App.DesignWidth). De eigenschap Width (1136) van de app is groter dan de DesignWidth (640), waardoor de formule wordt geëvalueerd naar 1136.
• De eigenschap Height van het scherm is ingesteld op Max(App.Height, App.DesignHeight). De eigenschap Height (640) van de app is kleiner dan de DesignHeight (1136), waardoor de formule wordt geëvalueerd naar 1136.

Met een hoogte van het scherm van 1136 en een apparaathoogte (in deze stand) van 640, moet de gebruiker het scherm verticaal scrollen om alle inhoud te tonen. Dit is mogelijk niet wat wenselijk is.

Om de eigenschappen Width en Height van het scherm aan te passen aan de apparaatstand, kunt u deze formules gebruiken:

Width = Max(App.Width, If(App.Width < App.Height, App.DesignWidth, App.DesignHeight))

Height = Max(App.Height, If(App.Width < App.Height, App.DesignHeight, App.DesignWidth))

Deze formules wisselen DesignWidth- en DesignHeight-waarden uit op basis van de vraag of het apparaat smaller is dan de hoogte (staande stand) of hoger (liggende stand).

Nadat u de formules voor Width en Height hebt aangepast, kunt u besturingselementen in uw scherm ook herschikken om beter gebruik te maken van de beschikbare ruimte. Als elk van de twee besturingselementen bijvoorbeeld de helft van het scherm beslaat, kunt u ze verticaal in liggende stand stapelen, maar ze naast elkaar in staande stand rangschikken.

U kunt de eigenschap Orientation van het scherm gebruiken om te bepalen of het scherm verticaal of horizontaal is georiënteerd.

Notitie

In liggende stand worden de besturingselementen Upper en Lower als linker- en rechterbesturingselementen weergegeven.

Besturingselement	Eigenschap	Formule
Upper	X	0
Upper	Y	0
Upper	Width	If(Parent.Orientation = Layout.Vertical, Parent.Width, Parent.Width / 2)
Upper	Height	If(Parent.Orientation = Layout.Vertical, Parent.Height / 2, Parent.Height)
Lower	X	If(Parent.Orientation = Layout.Vertical, 0, Upper.X + Upper.Width)
Lower	Y	If(Parent.Orientation = Layout.Vertical, Upper.Y + Upper.Height, 0)
Lower	Width	Parent.Width - Lower.X
Lower	Height	Parent.Height - Lower.Y

Schermgrootten en onderbrekingspunten

U kunt uw indeling aanpassen op basis van de grootte van het apparaat. Met de eigenschap Size wordt de huidige apparaatgrootte geclassificeerd. De grootte is een positief geheel getal. Het type ScreenSize biedt benoemde constanten om de leesbaarheid te verbeteren. Deze tabel bevat de constanten:

Constante	Value	Standaardapparaattype (met standaard app-instellingen)
ScreenSize.Small	1	Telefoon
ScreenSize.Medium	2	Tablet, verticaal gehouden
ScreenSize.Large	3	Tablet, horizontaal gehouden
ScreenSize.ExtraLarge	4	Pc

Gebruik deze grootten om beslissingen te nemen over de indeling van uw app. Als u bijvoorbeeld een besturingselement op een apparaat van telefoonformaat wilt verbergen, maar anders wel wilt weergeven, kunt u de eigenschap Visible van het besturingselement op deze formule instellen:

Parent.Size >= ScreenSize.Medium

Deze formule retourneert true wanneer de grootte normaal of groter is, en anders false.

Als u wilt dat een besturingselement een ander deel van de schermbreedte inneemt op basis van de schermgrootte, stelt u de eigenschap Width van het besturingselement in op deze formule:

Parent.Width *
Switch(
    Parent.Size,
    ScreenSize.Small, 0.5,
    ScreenSize.Medium, 0.3,
    0.25
)

Met deze formule wordt de breedte van het besturingselement ingesteld op de helft van de schermbreedte op een klein scherm, drie tiende van de schermbreedte op een middelgroot scherm en een kwart van de schermbreedte op alle andere schermen.

Aangepaste onderbrekingspunten

De eigenschap Size van het scherm wordt berekend door de eigenschap Width van het scherm te vergelijken met de waarden in de eigenschap SizeBreakpoints. Deze eigenschap is een tabel met één kolom met getallen waarmee de onderbrekingspunten voor breedte worden aangegeven die de genoemde schermgrootten scheiden:

In een app die is gemaakt voor een tablet of het web, zijn de standaardwaarden in de eigenschap SizeBreakpoints van de app [600, 900, 1200]. In een app die is gemaakt voor telefoons, is de waarde [1200, 1800, 2400]. (De waarden voor telefoon-apps zijn verdubbeld omdat dergelijke apps coördinaten gebruiken die in feite de in andere apps gebruikte coördinaten verdubbelen.)

U kunt de onderbrekingspunten van uw app aanpassen door de waarden in de eigenschap SizeBreakpoints van de app te wijzigen. Selecteer App in de structuurweergave, selecteer SizeBreakpoints in de eigenschappenlijst en bewerk vervolgens de waarden in de formulebalk. U kunt zoveel onderbrekingspunten maken als uw app nodig heeft, maar alleen de grootten 1 tot en met 4 komen overeen met de benoemde schermformaten. In formules kunt u verwijzen naar grootten buiten ExtraLarge door de numerieke waarden (5, 6 enzovoort).

U kunt ook minder onderbrekingspunten opgeven. Uw app heeft bijvoorbeeld mogelijk slechts drie grootten nodig (twee onderbrekingspunten), dus de mogelijke schermgrootten zijn Klein, Gemiddeld en Groot.

Bekende beperkingen

Het creatiecanvas reageert niet op de gemaakte formules voor formaatwijziging. Om responsief gedrag te testen, slaat u uw app op en publiceert u deze. Vervolgens opent u de app op apparaten of in browservensters met verschillende grootten en standen.

Als u expressies of formules schrijft in de eigenschappen X, Y, Width en Height van een besturingselement, overschrijft u deze expressies of formules als u het besturingselement later naar een andere locatie sleept of het formaat van het besturingselement wijzigt door de rand te verslepen.

Notitie

Laat ons uw taalvoorkeuren voor documentatie weten! Beantwoord een korte enquête. (houd er rekening mee dat deze in het Engels is)

De enquête duurt ongeveer zeven minuten. Er worden geen persoonlijke gegevens verzameld (privacyverklaring).