Opret responsivt layout i lærredsapps

Før du bygger en lærredsapp 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 af det lærred, du bygger din app på.

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 opnå et dynamisk layout, skal du justere nogle indstillinger og skrive udtryk i hele appen.

Deaktivér Skaler til at passe

Du kan konfigurere hvert skærmkontrolelement, så layoutet 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å skærmdimensioner for apps og enheder

Hvis du vil have din apps layout til at reagere på ændringer på enhedsskærmen eller i webbrowseren, skal du skrive formler, der bruger egenskaberne Bredde og Højde på skærmen. Hvis du vil have vist disse egenskaber, skal du åbne en app i Power Apps Studio og derefter vælge et skærmkontrolelement. Standardformlerne for disse egenskaber vises under fanen Avanceret i ruden til højre.

Bredde = Max(App.Width, App.MinScreenWidth)

Højde = Max(App.Height, App.MinScreenHeight)

Disse formler refererer til egenskaberne Width, Height, MinScreenWidth og MinScreenHeight 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 egenskaberne Bredde og Højde for skærmkontrolelementet evalueres igen, når disse værdier ændres.

Værdierne i egenskaberne App.Width og App.Height stammer fra de dimensioner, du angiver i ruden Vis under Indstillinger. Hvis du f.eks. vælger liggende størrelse "16:9 Standard", er App.Width 1366, og App.Height er 768.

Da de bruges i formlerne for egenskaberne Width og Height for skærmkontrolelementet, er MinScreenWidth og MinScreenHeight de mindste dimensioner, som du designer appen til. Hvis det faktiske område, der er tilgængeligt for din app, er endnu mindre end disse minimumdimensioner, sikrer formlerne for egenskaberne Bredde og Højde for skærmkontrolelementet, at deres værdier ikke bliver mindre end minimumværdierne. I så fald skal brugeren rulle for at få vist alt layoutets indhold. Egenskaberne MinScreenWidth og MinScreenHeight kan angives iAvancerede egenskaber for>appobjekt>.

Når du har etableret appens MinScreenWidth og MinScreenHeight, behøver du ikke (i de fleste tilfælde) at ændre standardformler for egenskaberne Bredde og Højde for hvert skærmkontrolelement. 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. Disse formler udtrykker hvert kontrolelements placering og størrelse i forhold til den overordnede skærmstørrelse eller i forhold til andre kontrolelementer på den aktuelle skærm.

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:

I disse formler bruges operatoren Parent. For alle kontrolelementer, der er placeret direkte på en skærm, refererer Parent til skærmen. 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:

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:

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 komponent	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å forælderkomponenten med en margen på N	Y	N
	Height	Parent.Height - (N * 2)
C justeret efter højre kant af forælderen 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 element	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.

Kontrolbeholder

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:

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 underkontrolelementerne justeres automatisk i forhold til det.

Kontrolelementer for objektbeholder til automatisk layout

Du kan bruge en funktion som Automatisk layout-kontrolelementerne til automatisk at arrangere 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.

Enhedsorientering

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:

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

Højde = 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.

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:

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 større, og ellers vil den 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

Redigeringslærredet reagerer ikke på de oprettede størrelsesformler. 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.