Oprette svarlayout i lærredapps

Før du opretter en lærredapp i Power Apps, skal du angive, om du vil skræddersy appen til en telefon eller en tablet. Dette valg bestemmer størrelsen og formen på det lærred, hvor du vil opbygge din app.

Når du har truffet det pågældende valg, kan du foretage et par flere valg, hvis du vælger Indstillinger > Vis. Du kan vælge stående eller liggende retning og skærmstørrelse (kun tablet). Du kan også låse eller låse højde-bredde-forholdet op og understøtte rotation af enheder (eller ikke).

Disse valgmuligheder er grundlag for alle andre valg, du foretager, når du designer skærmlayout. Hvis din app kører på en enhed med en anden størrelse eller på internettet, skaleres hele layoutet, så det passer til det skærmbillede, hvor appen kører. Hvis en app, der er udviklet til en telefon, kører i et stort browservindue, skalerer appen for at kompensere og ser for stort ud i forhold til pladsen. Appen kan ikke udnytte de ekstra pixel ved at vise flere kontrolelementer eller mere indhold.

Hvis du opretter et svarlayout, kan kontrolelementerne tilpasse sig forskellige enheds- eller vinduesstørrelser, hvilket får forskellige oplevelser til at blive mere naturlige. Hvis du vil oprette et fleksibelt layout, skal du justere nogle indstillinger og skrive udtryk overalt i appen.

Deaktivere Skaler til kant

Du kan konfigurere de enkelte skærmbilleder, så dets layout tilpasses det faktiske område, hvor appen kører.

Du kan aktivere tilpasningen ved at deaktivere appens indstilling Skaler til kant, der er aktiveret som standard. Når du deaktiverer denne indstilling, deaktiverer du også Lås højde-bredde-forhold, fordi designet ikke længere skal passe til en bestemt skærmbilledform. (Du kan stadig angive, om appen understøtter enhedsrotation.)

Hvis du vil have appen til at tilpasse sig, skal du udføre ekstra trin, men denne ændring er det første skridt til at muliggøre tilpasning.

Forstå dimensioner for apps og skærmbilleder

For at få appens layout til at reagere på ændringer af skærmens dimensioner, skal du skrive formler, der bruger egenskaberne Width og Hight på skærmbilledet. Hvis du vil have vist disse egenskaber, skal du åbne en app i Power Apps Studio og derefter vælge et skærmbillede. Standardformlerne for disse egenskaber vises under fanen Avanceret i ruden til højre.

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

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

Disse formler refererer til egenskaberne Width, Height, DesignWidth og DesignHeight for appen. Appens egenskaber Width og Height svarer til dimensionerne for den enhed eller det browservindue, hvor din app kører. Hvis brugeren tilpasser browservinduets størrelse (eller roterer enheden, hvis du har deaktiveret Lås retning), ændres værdierne for disse egenskaber dynamisk. Formlerne i skærmbilledets egenskaber Width og Height reevalueres, når disse værdier ændres.

Egenskaberne DesignWidth og DesignHeight kommer fra de mål, du angiver i ruden Visning under Indstillinger. Hvis du f.eks. vælger telefonlayoutet i stående retning , er DesignWidth 640, og DesignHeight er 1136.

Efterhånden som de bruges i formlerne for skærmbilledets egenskaber Width og Heigh, kan du betragte DesignWidth og DesignHeight som de minimale dimensioner, du vil designe appen til. Hvis det faktiske område, der er tilgængeligt for din app, er endnu mindre end de minimale dimensioner, skal formlerne for skærmens egenskaber Width og Height sikre, at deres værdier ikke bliver mindre end minimum. Hvis det er tilfældet, skal brugeren rulle for at få vist alt indholdet i skærmbilledet.

Når du har fastlagt appens DesignWidth og DesignHeight, behøver du (i de fleste tilfælde) ikke ændre standardformler for hvert skærmbilledes egenskaber for Width og Height. Senere beskriver dette emne tilfælde, hvor du kan få brug for at tilpasse disse formler.

Bruge formler til dynamisk layout

Hvis du vil oprette et design, der tilpasser sig, kan du finde og ændre størrelsen på de enkelte kontrolelementer ved hjælp af formler i stedet for absolutte (konstante) koordinatværdier. I disse formler udtrykkes de enkelte kontrolelementers placering og størrelse i forhold til det samlede skærmbilledes størrelse eller i forhold til andre kontrolelementer i skærmbilledet.

Vigtigt

Når du har skrevet formler for egenskaberne X, Y, Width og Height i et kontrolelement, overskrives formlerne med konstante værdier, hvis du efterfølgende trækker kontrolelementet i lærrededitoren. Når du begynder at bruge formler til at opnå dynamisk layout, bør du undgå at trække kontrolelementer.

I det mest enkle tilfælde betyder det, at et kontrolelement fylder hele skærmbilledet. Hvis du vil opnå denne effekt, skal du angive kontrolelementets egenskaber til disse værdier:

Egenskab	Værdi
X	0
Y	0
Width	Parent.Width
Height	Parent.Height

I disse formler bruges operatoren Parent. Hvis et kontrolelement skal placeres direkte på et skærmbillede, refererer Parent til skærmbilledet. Med disse egenskabsværdier vises kontrolelementet i øverste venstre hjørne af skærmen (0, 0) og har samme Width og Height som skærmbilledet.

Senere i dette emne skal du anvende disse principper (og operatoren Parent) til at placere kontrolelementerne inde i andre objektbeholdere, f.eks. galleries, group-kontrolelementer og components.

Som et alternativ kan kontrolelementet kun udfylde den øverste halvdel af skærmbilledet. Hvis du vil opnå denne effekt, skal du angive egenskaben Height til Parent.Height, divideret med 2 og undlade at ændre de øvrige formler.

Hvis du vil have, at et andet kontrolelement skal udfylde den nederste halvdel af det samme skærmbillede, kan du benytte mindst to andre tilgange til at sammensætte dets formler. For sikre enkelheden kan det være en god ide at benytte denne metode:

Kontrolelement	Egenskab	Formel
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

Denne konfiguration opnår den ønskede effekt, men du skal redigere de enkelte formler, hvis du har ændret mening om kontrolelementets relative størrelser. Du kan f.eks. vælge, at det øverste kontrolelement kun skal optage den øverste tredjedel af skærmbilledet, hvor det nederste kontrolelement fylder de nederste to tredjedele.

Hvis du vil opnå denne effekt, skal du opdatere egenskaben Height for kontrolelementet Upper og egenskaberne Y og Height for kontrolelementet Lower. I stedet skal du overveje at skrive formlerne for kontrolelementet Lower i forhold til kontrolelementet Upper (og det selv) som i følgende eksempel:

Kontrolelement	Egenskab	Formel
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

Når disse formler er på plads, skal du blot ændre egenskaben Height for kontrolelementet Upper for at angive en anden brøkdel af skærmbilledets højde. Kontrolelementet Lower flyttes automatisk, og størrelsen tilpasses, så den tager højde for ændringen.

Du kan bruge disse formelmønstre til at angive det almindelige layoutforhold mellem et kontrolelement ved navn Cog dets overordnede kontrolelement eller et sidestillet kontrolelement ved navn D.

Forholdet mellem C og dets overordnede kontrolelement	Egenskab	Formel	Illustration
C udfylder bredden på det overordnede kontrolelement med en margen på N	X	N
	Width	Parent.Width - (N * 2)
C udfylder højden på det overordnede kontrolelement med en margen på N	Y	N
	Height	Parent.Height - (N * 2)
C justeret efter højre kant på det overordnede kontrolelement med en margen på N	X	Parent.Width - (C.Width + N)
C justeret efter den nedre kant på det overordnede kontrolelement med en margen på N	Y	Parent.Height - (C.Height + N)
C centreret vandret på overordnet kontrolelement	X	(Parent.Width - C.Width) / 2
C centreret lodret på overordnet kontrolelement	Y	(Parent.Height - C.Height) / 2

Forhold mellem C og D	Egenskab	Formel	Illustration
C justeret vandret efter D og med den samme bredde som D	X	D.X
	Width	D.Width
C justeret lodret efter D og med den samme højde som D	Y	D.Y
	Height	D.Height
Højre kant på C justeret efter højre kant på D	X	D.X + D.Width - C.Width
Nedre kant på C justeret efter den nedre kant på D	Y	D.Y + D.Height - C.Height
C centreret vandret i forhold til D	X	D.X + (D.Width - C.Width) / 2
C centreret lodret i forhold til D	Y	D.Y + (D.Height - C.Height) /2
C placeret til højre for D med en afstand på N	X	D.X + D.Width + N
C placeret under D med en afstand på N	Y	D.Y + D.Height + N
C udfylder afstanden mellem D og højre kant på det overordnede kontrolelement	X	D.X + D.Width
	Width	Parent.Width - C.X
C udfylder afstanden mellem D og den nedre kant på det overordnede kontrolelement	Y	D.Y + D.Height
	Height	Parent.Height - C.Y

Hierarkisk layout

Når du sammensætter skærmbilelder, der indeholder flere kontrolelementer, bliver det mere praktisk (eller endda nødvendigt) at placere kontrolelementerne i forhold til et overordnet kontrolelement og ikke i forhold til skærmbilledet eller et sidestillet kontrolelement. Ved at arrangere kontrolelementerne i en hierarkisk struktur kan du gøre formlerne nemmere at skrive og vedligeholde.

Gallerier

Hvis du bruger et galleri i appen, skal du udforme kontrolelementerne i galleriets skabelon. Du kan placere disse kontrolelementer ved at skrive formler, der bruger operatoren Parent, som refererer til galleriskabelonen. I formlerne på kontrolelementer i en galleriskabelon skal du bruge egenskaberne Parent.TemplateHeight og Parent.TemplateWidth. Brug ikke Parent.Width og Parent.Height, der refererer til galleriets samlede størrelse.

Kontrolelementet Objektbeholder

Du kan bruge kontrolelementet Layoutobjektbeholder som overordnet kontrolelement.

Overvej eksemplet på en overskrift øverst på et skærmbillede. Det er almindelig at have en overskrift med en titel og flere ikoner, som brugerne kan anvende. Du kan oprette et sådant hoved ved hjælp af kontrolelementet Objektbeholder, der indeholder et kontrolelement af typen Mærkat og to kontrolelementer af typen Ikon:

Angiv egenskaberne for disse kontrolelementer til disse værdier:

Egenskab	Overskrift	Menu	Luk	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

For kontrolelementet Header refererer Parent til skærmbilledet. For de andre refererer Parent til kontrolelementet Header.

Når du har skrevet disse formler, kan du justere størrelsen eller placeringen af kontrolelementet Header ved at ændre formlerne for de tilhørende egenskaber. Størrelsen og placeringen af de underordnede kontrolelementer justeres automatisk herefter.

Kontrolelementer for objektbeholder til automatisk layout

Du kan bruge en funktion, kontrolelementerne for objektbeholderen for Automatisk layout til automatisk at placere de underordnede komponenter. Disse objektbeholdere bestemmer placeringen af underordnede komponenter, så du aldrig skal angive X, Y for en komponent inde i objektbeholderen. Den kan fordele den ledige plads til de underordnede komponenter baseret på indstillingerne og bestemmer både den lodrette og vandrette justering af de underordnede komponenter. Flere oplysninger: Kontrolelementer for objektbeholder til automatisk layout

Komponenter

Hvis du bruger en anden funktion, der kaldes Komponenter, kan du oprette byggeblokke og genbruge dem i hele din app. Som for kontrolelementet Objektbeholder skal de kontrolelementer, du placerer i en komponent, baseres på deres placering og størrelsesformler på Parent.Width og Parent.Height, som refererer til komponentens størrelse. Du kan finde flere oplysninger i: Oprette en komponent.

Tilpasse layout efter enhedens størrelse og retning

Indtil nu har du lært, hvordan du kan bruge formler til at ændre størrelsen på de enkelte kontrolelementer som reaktion på den tilgængelige plads, mens kontrolelementerne justeres i forhold til hinanden. Men det kan være en god ide at foretage større layoutændringer som reaktion på forskellige enhedsstørrelser og -retninger. Når en enhed roteres fra stående til liggende retning, kan det f.eks. være en god ide at skifte fra lodret til vandret layout. På en større enhed kan du få vist mere indhold eller omarrangere det for at få et flottere layout. På en mindre enhed kan det være nødvendigt at opdele indholdet på tværs af flere skærmbilleder.

Enheds retning

Standardformlerne for et skærmbilledes egenskaber Width og Height, sådan som det er beskrevet tidligere i dette emne, giver ikke nødvendigvis en god oplevelse, hvis en bruger roterer en enhed. En app, der er udviklet til en telefon i stående retning, har f.eks. en DesignWidth på 640 og en DesignHeight på 1136. Den samme app på en telefon i liggende retning får disse egenskabsværdier:

• Skærmbilledets egenskab Width er angivet til Max(App.Width, App.DesignWidth). Appens Width (1136) er større end dens DesignWidth (640), så formlen evalueres til 1136.
• Skærmbilledets egenskab Heigth er angivet til Max(App.Height, App.DesignHeight). Appens Heigth (640) er mindre end dens DesignHeight (1136), så formlen evalueres til 1136.

Med et skærmbilledes Heigth på 1136 og en enheds højde (i denne retning) på 640 skal brugeren rulle skærmbilledet lodret for at få vist hele indholdet, hvilket måske ikke lever op til den ønskede oplevelse.

Hvis du vil tilpasse skærmbilledets egenskaber for Width og Heigth til enhedens retning, kan du bruge disse formler:

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))

Disse formler bytter om på appens værdier for DesignWidth og DesignHeight, afhængigt af om enhedens bredde er mindre end højden (stående retning) eller længere end dens højde (liggende retning).

Når du har justeret skærmbilledets formler for Width og Heigth, kan det være en god ide at omarrangere kontrolelementerne i skærmbilledet for bedre at udnytte den ledige plads. Hvis der f.eks. er to kontrolelementer, der fylder halvdelen af skærmen, kan du stable dem lodret i stående retning, men arrangere dem side om side i liggende retning.

Du kan bruge skærmbilledets egenskab Orientation til at afgøre, om skærmbilledet vender lodret eller vandret.

Bemærk

I liggende retning vises kontrolelementerne Upper og Lower som venstre og højre kontrolelementer.

Kontrolelement	Egenskab	Formel
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

Skærmstørrelser og pausepunkter

Du kan justere layoutet baseret på enhedens størrelse. Skærmbilledets egenskab Size definerer den aktuelle enhedsstørrelse. Størrelsen er et positivt heltal. ScreenSize-typen indeholder navngivne konstanter, der kan øge læsbarheden. I denne tabel vises konstanterne:

Konstant	Værdi	Typisk enhedstype (ved hjælp af standardindstillingerne for apps)
ScreenSize.Small	1	Telefon
ScreenSize.Medium	2	Tablet, der holdes lodret
ScreenSize.Large	3	Tablet, der holdes vandret
ScreenSize.ExtraLarge	4	Stationær computer

Brug disse størrelser til at tage beslutninger om layoutet for apps. Hvis du f.eks. vil have, at et kontrolelement skjules på en enhed i telefonstørrelse, men eller er synligt, kan du indstille kontrolelementets egenskab Visible til denne formel:

Parent.Size >= ScreenSize.Medium

Denne formel evalueres til sand, når størrelsen er mellemstor eller og større, og vil ellers være falsk.

Hvis et kontrolelement skal optage en anden andel af skærmens bredde på baggrund af skærmstørrelsen, skal du angive kontrolelementets egenskab Width til denne formel:

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

Denne formel indstiller kontrolelementets bredde til halvdelen af skærmbilledets bredde på en lille skærm, tre tiendedele af skærmbredden på en mellemstor skærm og en fjerdedel af skærmbredden på alle andre skærme.

Brugerdefinerede pausepunkter

Skærmbilledets egenskab Size beregnes ved at sammenligne skærmbilledets egenskab Width med værdierne i appens egenskab App.SizeBreakpoints. Denne egenskab er en tabel med en enkelt kolonne af tal, som angiver de pausepunkter for bredde, som adskiller de navngivne skærmstørrelser:

I en app, der er oprettet til tablet eller internettet, er standardværdien for appens egenskab SizeBreakpoints [600, 900, 1200]. I en app, der er oprettet til telefoner, er værdien [1200, 1800, 2400]. (Værdierne for telefonapps er fordoblet, fordi sådanne apps bruger koordinater, der reelt er det dobbelte af de koordinater, der bruges i andre apps.)

Du kan tilpasse appens pausepunkter ved at ændre værdierne for appens egenskab SizeBreakpoints. Vælg App i trævisningen, vælg SizeBreakpoints på listen over egenskaber, og rediger derefter værdierne i formellinjen. Du kan oprette så mange pausepunkter, som der er brug for i appen, men det er kun størrelse 1-4, der svarer til skærmens navngivne størrelser. I formler kan du referere til størrelser ud over ExtraLarge med deres numeriske værdier (5, 6 osv.).

Du kan også angive færre pausepunkter. Din app kan f.eks. kun have tre størrelser (to pausepunkter), så de mulige skærmstørrelser vil være Small, Medium og Large.

Kendte begrænsninger

Udviklingen af lærredet svarer ikke til de oprettede formler for størrelser. Hvis du vil afprøve tilpasningens funktionsmåde, skal du gemme og udgive din app og derefter åbne den på enheder eller i browservinduer af forskellige størrelser og retninger.

Hvis du skriver udtryk eller formler i egenskaberne X, Y, Width og Height for et kontrolelement, overskrives de pågældende udtryk eller formler, hvis du på et senere tidspunkt trækker kontrolelementet til en anden placering eller ændrer størrelsen på kontrolelementet ved at trække i kanten.

Bemærk

Kan du fortælle os om dine sprogpræferencer for dokumentation? Tag en kort undersøgelse. (bemærk, at denne undersøgelse er på engelsk)

Undersøgelsen tager ca. syv minutter. Der indsamles ingen personlige data (erklæring om beskyttelse af personlige oplysninger).