Opprette responsive oppsett i lerretsapper

Før du oppretter en lerretsapp i Power Apps, angir du om du vil skreddersy appen for en telefon eller et nettbrett. Dette valget bestemmer størrelsen på og formen på lerretet som du vil bygge appen på.

Når du har gjort dette valget, kan du gjøre noen flere valg hvis du velger Innstillinger > Vis. Du kan velge stående eller liggende retning og skjermstørrelse (bare nettbrett). Du kan også låse eller låse opp størrelsesforholdet og rotasjonen for støtteenhet (eller ikke).

Disse valgene ligger til grunn for alle andre valg du gjør mens du utformer skjermoppsett. Hvis appen din kjører på en enhet med en annen størrelse eller på Internett, skaleres hele oppsettet slik at det passer til skjermen der appen kjører. Hvis en app som er utformet for en telefon, kjører i et stort webleservindu, skaleres appen for å kompensere og ser forstørret ut for plassen. Appen kan ikke dra nytte av de ekstra pikslene ved å vise flere kontroller eller mer innhold.

Hvis du oppretter et responsivt oppsett, kan kontroller svare på ulike enheter eller vindusstørrelser, noe som gjør at ulike opplevelser føles mer naturlig. For å oppnå responsivt oppsett kan du justere enkelte innstillinger og skriveuttrykk gjennom hele appen.

Deaktivere Tilpass til

Du kan konfigurere hvert skjermbilde slik at oppsettet tilpasses den faktiske plassen appen kjører på.

Du aktiverer svargraden ved å slå av appens Tilpass til-innstilling, som er aktivert som standard. Når du deaktiverer denne innstillingen, deaktiverer du også Lås størrelsesforhold fordi du ikke lenger utformer en bestemt skjermfigur. (Du kan fremdeles angi om appen støtter enhetsrotasjon.)

For å gjøre appen responsiv må du utføre flere trinn, men denne endringen er første steg for å gjøre det mulig.

Forstå app- og skjermdimensjoner

Hvis du vil at appens oppsett skal reagere på endringer i skjermmålene, skriver du formler som bruker Width- og Height-egenskapene på skjermen. Hvis du vil vise disse egenskapene, åpner du en app i Power Apps Studio, og deretter velger du et skjermbilde. Standardformlene for disse egenskapene vises i kategorien Avansert i ruten til høyre.

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

Høyde = Max(App.Height, App.DesignHeight)

Disse formlene refererer til egenskapene Width, Height, DesignWidth og DesignHeight for appen. Appens Width- og Height-egenskaper tilsvarer dimensjonene til enheten eller webleservinduet som appen kjører i. Hvis brukeren endrer størrelse på webleservinduet (eller roterer enheten hvis du har deaktivert Lås retning), endres verdiene for disse egenskapene dynamisk. Formlene i skjermens Width- og Height-egenskaper evalueres på nytt når disse verdiene endres.

Egenskapene DesignWidth og DesignHeight kommer fra dimensjonene du angir i Visning-ruten i Innstillinger. Hvis du for eksempel velger telefonoppsettet i stående retning, er DesignWidth 640, og DesignHeight er 1136.

Når de brukes i formlene for skjermens Width- og Height-egenskaper, kan du tenke på DesignWidth og DesignHeight som minimumsdimensjonene du skal utforme appen for. Hvis det faktiske området som er tilgjengelig for appen, er mindre mindre enn disse minimumsdimensjonene, sikrer formlene for skjermens Width- og Height-egenskaper at verdiene ikke blir mindre enn minimum. I det tilfellet må brukeren rulle for å vise alt innholdet på skjermen.

Når du har opprettet appens DesignWidth og DesignHeight, trenger du ikke (i de fleste tilfeller) endre standardformler for egenskapene Width- og Height-egenskapene. Dette emnet diskuterer tilfeller der du kanskje vil tilpasse disse formlene.

Bruke formler for dynamisk oppsett

Hvis du vil opprette en responsiv utforming, kan du finne og endre størrelse på hver kontroll ved å bruke formler i stedet for absolutte (konstante) koordinatverdier. Disse formlene uttrykker plasseringen og størrelsen til hver enkelt kontroll i henhold til den totale skjermstørrelsen eller i forhold til andre kontroller på skjermen.

Viktig

Når du har skrevet formler for egenskapene X, Y, Width og Height i en kontroll, blir formlene overskrevet med konstante verdier hvis du deretter drar kontrollen i lerretsredigeringsprogrammet. Når du begynner å bruke formler til å oppnå dynamisk oppsett, bør du unngå å dra kontroller.

I det enkleste tilfellet fyller én kontroll opp hele skjermen. Du kan skape denne effekten ved å angi egenskapene for kontrollen til disse verdiene:

Egenskap	Verdi
X	0
Y	0
Bredde	Parent.Width
Høyde	Parent.Height

Disse formlene bruker Overordnet-operatoren. For en kontroll som er plassert direkte på en skjerm, refererer Overordnet til skjermen. Når det gjelder disse egenskapsverdiene, vises kontrollen øverst til venstre på skjermen (0, 0) og har samme bredde og høyde som skjermen.

Senere i dette emnet skal du bruke disse prinsippene (og Overordnet-operatoren) til å plassere kontroller i andre beholdere, for eksempel gallerier, gruppekontroller og komponenter.

Som et alternativ kan kontrollen fylle bare den øverste halvdelen av skjermen. Hvis du vil skape denne effekten, setter du egenskapen Height til Parent.Height / 2, og lar de andre formlene være uendret.

Hvis du vil at en annen kontroll skal fylle den nederste halvdelen av samme skjermbilde, kan du bruke minst to andre fremgangsmåter for å konstruere formlene. En enkel fremgangsmåte er følgende:

Kontroller	Egenskap	Formel
Øvre	X	0
Øvre	Y	0
Øvre	Bredde	Parent.Width
Øvre	Høyde	Parent.Height / 2
Lavsorbisk	X	0
Lavsorbisk	Y	Parent.Height / 2
Lavsorbisk	Bredde	Parent.Width
Lavsorbisk	Høyde	Parent.Height / 2

Denne konfigurasjonen oppnår ønsket effekt, men du må redigere hver formel hvis du har gjort endringer i forhold til de relative størrelsene på kontrollene. Du kan for eksempel bestemme at den øverste kontrollen bare skal oppta den øvre tredjedelen på skjermen, med den nedre kontrollen fyller de nedre to tredjedelene.

Hvis du vil skape denne effekten, må du oppdatere Height-egenskapen for Øvre-kontrollen og Y- og Height-egenskapene for Nedre-kontrollen. I stedet kan du vurdere å skrive formlene for Nedre-kontrollen med hensyn til Øvre-kontrollen (og seg selv), som i dette eksemplet:

Kontroller	Egenskap	Formel
Øvre	X	0
Øvre	Y	0
Øvre	Bredde	Parent.Width
Øvre	Høyde	Parent.Height / 3
Nedre	X	0
Nedre	Y	Upper.Y + Upper.Height
Nendre	Bredde	Parent.Width
Lavsorbisk	Høyde	Parent.Height - Lower.Y

Ved hjelp av disse formlene trenger du bare endre Height-egenskapen for Øvre-kontrollen for å uttrykke en annen del av høyden på skjermen. Nedre-kontrollen flytter og endrer størrelse automatisk etter endringen.

Du kan bruke disse formelmønstrene for å uttrykke felles oppsettrelasjoner mellom en kontroll, med navnet C og den overordnede eller den sideordnede kontrollen, med navnet D.

Relasjon mellom C og dens overordnede	Egenskap	Formel	Illustrasjon
C fyller bredden til overordnet, med en margin på N	X	N
	Bredde	Parent.Width - (N * 2)
C fyller høyden til overordnet, med en margin på N	Y	N
	Høyde	Parent.Height - (N * 2)
C justert med høyre kant av overordnet, med en margin på N	X	Parent.Width - (C.Width + N)
C justert med nedre kant av overordnet, med en margin på N	Y	Parent.Height - (C.Height + N)
C midstilt vannrett på overordnet	X	(Parent.Width - C.Width) / 2
C midstilt loddrett på overordnet	Y	(Parent.Height - C.Height) / 2

Relasjon mellom C og D	Egenskap	Formel	Illustrasjon
C vannrett justert med D og samme bredde som D	X	D.X
	Bredde	D.Width
C loddrett justert med D og samme høyde som D	Y	D.Y
	Høyde	D.Height
Høyre kant av C justert med høyre kant av D	X	D.X + D.Width - C.Width
Nedre kant av C justert med nedre kant av D	Y	D.Y + D.Height - C.Height
C midtstilt vannrett i forhold til D	X	D.X + (D.Width - C.Width) / 2
C midtstilt loddrett i forhold til D	Y	D.Y + (D.Height - C.Height) /2
C plassert til høyre for D med en avstand på N	X	D.X + D.Width + N
C plassert under D med en avstand på N	Y	D.Y + D.Height + N
C fyller opp mellomrom mellom D og høyre kant av den overordnede	X	D.X + D.Width
	Bredde	Parent.Width - C.X
C fyller opp mellomrom mellom D og nedre kant av den overordnede	Y	D.Y + D.Height
	Høyde	Parent.Height - C.Y

Hierarkisk oppsett

Etter hvert som du oppretter skjermer som inneholder flere kontroller, blir det mer hensiktsmessig (eller nødvendig) å plassere kontroller i forhold til en overordnet kontroll i stedet for i forhold til skjermbildet eller en kontroll som er likestilt. Ved å ordne kontrollene i en hierarkisk struktur, kan du gjøre formlene enklere å skrive og vedlikeholde.

Gallerier

Hvis du bruker et galleri i appen, må du sette opp kontroller innenfor malen for galleriet. Du kan plassere disse kontrollene ved å skrive formler som bruker Overordnet-operatoren, som vil referere til gallerimalen. I formlene på kontroller i en gallerimal bruker du egenskapene Parent.TemplateHeight og Parent.TemplateWidth. Ikke bruk Parent.Width og Parent.Height, som refererer til den totale størrelsen på galleriet.

Beholder-kontroll

Du kan bruke kontrollen Oppsettbeholder som overordnet kontroll.

Tenk deg eksemplet med en topptekst øverst på et skjermbilde. Det er vanlig å ha en topptekst med tittel og flere ikoner som brukerne kan samhandle med. Du kan lage en slik topptekst ved hjelp av Beholder-kontrollen, som inneholder en Etikett-kontroll og to Ikon-kontroller:

Angi egenskapene for disse kontrollene til disse verdiene:

Egenskap	Topptekst	Meny	Lukk	Tittel
X	0	0	Parent.Width - Close.Width	Menu.X + Menu.Width
Y	0	0	0	0
Bredde	Parent.Width	Parent.Height	Parent.Height	Close.X - Title.X
Høyde	64	Parent.Height	Parent.Height	Parent.Height

For Hode-kontrollen refererer Parent til skjermen. For de andre refererer Parent til Hode-kontrollen.

Når du har skrevet disse formlene, kan du justere størrelsen på eller posisjonen til Hode-kontrollen ved å endre formlene for egenskapene. Størrelsene på og posisjonen for de underordnede kontrollene justeres automatisk i henhold til dette.

Beholderkontroll for automatisk oppsett

Du kan bruke funksjonen Automatisk oppsett-beholderkontrollene til å opprette et oppsett automatisk for de underordnede komponentene. Disse beholderne avgjør posisjonen til de underordnede komponentene slik at du ikke må angi X, Y for en komponent i beholderen. Den kan også distribuere den tilgjengelige plassen til de underordnede komponentene basert på innstillingene, og i tillegg bestemme den loddrette og vannrette justeringen for de underordnede komponentene. Mer informasjon: Beholderkontroller for automatisk oppsett

Komponenter

Hvis du bruker en annen funksjon kalt Komponenter, kan du konstruere byggeblokker og bruke dem på nytt i appen. På samme måte som med Beholder-kontrollen bør kontrollene du plasserer i en komponent, basere plasserings- og størrelsesformlene på Parent.Width og Parent.Height, som refererer til komponentens størrelse. Mer informasjon: Opprette en komponent.

Tilpasse oppsett for enhetsstørrelse og retning

Til nå har du lært hvordan du bruker formler til å endre hver enkelt kontrolls størrelse som svar på den tilgjengelige plassen, samtidig som du holder kontroller justert i forhold til hverandre. Men det kan være ønskelig å gjøre flere betydelige oppsettendringer som svar på forskjellige enhetsstørrelser og -retninger. Når en enhet roteres fra stående til liggende retning, kan det for eksempel hende at du vil bytte fra et loddrett oppsett til et vannrett oppsett. På en større enhet kan du presentere mer innhold eller ordne det på nytt for å gi et mer tiltalende oppsett. Det kan hende at du må dele opp innhold på tvers av flere skjermer på en mindre enhet.

Enhetsretning

Standardformlene for skjermens Width- og Height-egenskaper, som beskrevet tidligere i dette emnet, gir ikke nødvendigvis en god opplevelse hvis en bruker roterer en enhet. En app som er utformet for en telefon i stående retning, har for eksempel en DesignWidth på 640 og en DesignHeight på 1136. Samme app på en telefon i liggende retning vil ha disse egenskapsverdiene:

• Skjermens Width-egenskap er satt til Max(App.Width, App.DesignWidth). Appens Width (1136) er større enn DesignWidth (640), så formelen evalueres til 1136.
• Skjermens Height-egenskap er satt til Max(App.Height, App.DesignHeight). Appens Height (640) er mindre enn DesignHeight (1136), så formelen evalueres til 1136.

Med en skjerm Height på 1136 og en enhetshøyde (i denne retningen) på 640, må brukeren rulle skjermbildet loddrett for å vise alt innholdet, noe som kan være en del av den ønskede opplevelsen.

Hvis du vil tilpasse skjermens Width- og Height-egenskap til enhetsretningen, kan du bruke disse formlene:

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

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

Disse formlene bytter appens DesignWidth- og DesignHeight-verdier, basert på om enhetens bredde er mindre enn høyden (stående retning) eller mer enn høyden (liggende retning).

Når du har justert skjermens bredde- og høyde-formler, kan det også være lurt å ordne kontrollene på nytt i skjermen for bedre å bruke den tilgjengelige plassen. Hvis for eksempel hver av to kontroller opptar en halvdel av skjermen, kan det hende at de blir stablet loddrett, men ordne dem ved siden av hverandre i liggende retning.

Du kan bruke skjermens Orientation-retning til å finne ut om skjermbildet er orientert loddrett eller vannrett.

Obs!

Øvre- og Nedre-kontrollene vises som venstre og høyre kontroller i liggende retning.

Kontroller	Egenskap	Formel
Øvre	X	0
Øvre	Y	0
Øvre	Bredde	If(Parent.Orientation = Layout.Vertical, Parent.Width, Parent.Width / 2)
Øvre	Høyde	If(Parent.Orientation = Layout.Vertical, Parent.Height / 2, Parent.Height)
Nedre	X	If(Parent.Orientation = Layout.Vertical, 0, Upper.X + Upper.Width)
Nedre	Y	If(Parent.Orientation = Layout.Vertical, Upper.Y + Upper.Height, 0)
Nedre	Bredde	Parent.Width - Lower.X
Lavsorbisk	Høyde	Parent.Height - Lower.Y

Skjermstørrelser og stoppunkt

Du kan justere oppsettet basert på størrelsen på enheten. Skjermens Size-egenskapen klassifiserer gjeldende enhetsstørrelse. Størrelsen er et positivt heltall. ScreenSize-typen gir navngitte konstanter som bidrar til lesbarhet. Denne tabellen viser konstantene:

Konstant	Verdi	Vanlig enhetstype (ved hjelp av standard appinnstillinger)
ScreenSize.Small	1	Telefonnummer
ScreenSize.Medium	2	Nettbrett, holdes loddrett
ScreenSize.Large	3	Nettbrett, holdes vannrett
ScreenSize.ExtraLarge	4	Stasjonær datamaskin

Bruk disse størrelsene for å ta avgjørelser om appens oppsett. Hvis du for eksempel vil at en kontroll skal skjules på en enhet med telefonstørrelse, men den kan være synlig ellers, kan du angi Visible-egenskapen for kontrollen til denne formelen:

Parent.Size >= ScreenSize.Medium

Denne formelen evalueres til sann når størrelsen er middels eller større og ellers til usann.

Hvis du vil at en kontroll skal bruke en annen del av skjermbredden basert på skjermstørrelsen, setter du kontrollens Width-egenskap til denne formelen:

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

Denne formelen angir bredden på kontrollen til halvparten av skjermbredden på en liten skjerm, tre tideler av skjermbredden på et middels skjermbilde, og en fjerdedel av skjermbredden på alle andre skjermer.

Egendefinerte stoppunkter

Skjermens Size-egenskap beregnes ved å sammenligne skjermens Width-egenskap med appens SizeBreakpoints-egenskap. Denne egenskapen er en tabell med én kolonne med tall som angir breddestoppunktene som skiller de navngitte skjermstørrelsene:

I en app som er opprettet for nettbrett eller internett, er standardverdien i appens SizeBreakpoints-egenskap [600, 900, 1200]. I en app som er opprettet for telefoner, er verdien [1200, 1800, 2400]. (Verdiene for telefonapper dobles fordi slike apper bruker koordinater som egentlig er dobbelt så mange som koordinatene som brukes i andre apper.)

Du kan tilpasse appens stoppunkter ved å endre verdiene i appens SizeBreakpoints-egenskap. Velg App i trevisningen, velg SizeBreakpoints i egenskapslisten, og rediger deretter verdiene på formellinjen. Du kan opprette så mange stoppunkt som appen trenger, men bare størrelsene 1 til 4 tilsvarer navngitte skjermstørrelser. I formler kan du referere til størrelser utover ExtraLarge ved hjelp av numeriske verdier (5, 6 og så videre).

Du kan også angi færre stoppunkter. Appen kan for eksempel ha behov for bare tre størrelser (to stoppunkter), så mulige skjermstørrelser vil være liten, middels og stor.

Kjente begrensninger

Redigeringslerretet svarer ikke på skaleringsformlene som opprettes. Hvis du vil teste svaratferden, lagrer og publiserer du appen, og deretter åpner du den på enheter eller i webleservinduer av forskjellige størrelser og retninger.

Hvis du skriver uttrykk eller formler i egenskapene X, Y, Width og Height for en kontroll, overskriver du disse uttrykkene eller formlene hvis du senere drar kontrollen til en annen plassering eller endrer størrelsen på kontrollen ved å dra kant linjen.

Obs!

Kan du fortelle oss om språkinnstillingene for dokumentasjonen? Ta en kort undersøkelse. (vær oppmerksom på at denne undersøkelsen er på engelsk)

Undersøkelsen tar rundt sju minutter. Det blir ikke samlet inn noen personopplysninger (personvernerklæring).