Creare layout reattivi nelle app canvas

Prima di creare un'app canvas in Power Apps, specifichi se vuoi personalizzare l'app per un telefono o un tablet. Questa scelta determina le dimensioni e la forma del canvas in cui crei la tua app.

Dopo aver fatto quella scelta, puoi fare qualche altra scelta se selezioni Impostazioni > Schermo. Puoi scegliere l'orientamento verticale o orizzontale e le dimensioni dello schermo (solo tablet). Puoi inoltre bloccare o sbloccare le proporzioni e supportare la rotazione del dispositivo (o meno).

Queste scelte sono alla base di ogni altra scelta che fai mentre progetti i layout dello schermo. Se l'app viene eseguita su un dispositivo di dimensioni diverse o sul Web, l'intero layout viene ridimensionato per adattarsi allo schermo in cui è in esecuzione l'app. Se un'app progettata per un telefono viene eseguita in una finestra del browser di grandi dimensioni, ad esempio, l'app si ridimensiona per compensare e sembra sovradimensionata per il suo spazio. L'app non può utilizzare pixel aggiuntivi mostrando più controlli o più contenuti.

Se creai un layout reattivo, i controlli possono rispondere a diversi dispositivi o dimensioni di finestre, rendendo le varie esperienze più naturali. Per ottenere un layout reattivo, devi regolare alcune impostazioni e scrivere espressioni nella tua app.

Disabilitare Ridimensiona e adatta

Puoi configurare ogni schermata in modo che il suo layout si adatti allo spazio reale in cui l'app è in esecuzione.

Attivi la reattività disattivando l'impostazione Ridimensiona e adatta dell'app attivata per impostazione predefinita. Quando disattivi questa impostazione, disattivi anche Blocca proporzioni perché non stai più progettando per una specifica forma dello schermo. (Puoi comunque specificare se l'app supporta la rotazione del dispositivo).

Per rendere la tua app reattiva, devi intraprendere ulteriori passaggi, ma questa modifica è il primo passo per rendere possibile la reattività.

Informazioni sulle dimensioni dell'app e dello schermo

Per fare in modo che i layout della tua app rispondano ai cambiamenti nelle dimensioni dello schermo, dovrai scrivere formule che utilizzano le proprietà Width e Height dello schermo. Per mostrare queste proprietà, apri un'app in Power Apps Studio, quindi seleziona una schermata. Le formule predefinite per queste proprietà vengono visualizzate nella scheda Avanzate del riquadro di destra.

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

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

Queste formule si riferiscono alle proprietà Width, Height, DesignWidth e DesignHeight dell'app. Le proprietà Width e Height dell'app corrispondono alle dimensioni della finestra del dispositivo o del browser in cui è in esecuzione l'app. Se l'utente ridimensiona la finestra del browser (o ruota il dispositivo se hai disattivato Blocca orientamento), i valori di queste proprietà cambiano in modo dinamico. Le formule nelle proprietà Width e Height della schermata vengono rivalutate quando questi valori cambiano.

Le proprietà DesignWidth e DesignHeight derivano dalle dimensioni specificate nel riquadro Schermo di Impostazioni. Ad esempio, se selezioni il layout del telefono con orientamento verticale, DesignWidth è 640 e DesignHeight è 1136.

Quando sono usate nelle formule per le proprietà Width e Height della schermata, puoi pensare a DesignWidth e DesignHeight come dimensioni minime per le quali progetterai l'app. Se l'area effettiva disponibile per la tua app è persino più piccola di queste dimensioni minime, le formule per le proprietà Width e Height della schermata assicurano che i valori non diventino più piccoli dei valori minimi. In tal caso, l'utente deve scorrere per visualizzare tutto il contenuto dello schermo.

Dopo aver stabilito DesignWidth e DesignHeight dell'app, non dovrai (nella maggior parte dei casi) modificare le formule predefinite per le proprietà schermata Width e Height di ogni schermata. Più avanti, questo argomento discute i casi in cui potresti voler personalizzare queste formule.

Usare le formule per il layout dinamico

Per creare un design reattivo, individua e dimensiona ciascun controllo utilizzando formule anziché valori di coordinate assoluti (costanti). Queste formule esprimono la posizione e le dimensioni di ciascun controllo in termini di dimensione complessiva dello schermo o rispetto ad altri controlli sullo schermo.

Importante

Dopo aver scritto le formule per le proprietà X, Y, Width e Height di un controllo, le tue formule verranno sovrascritte con valori costanti se successivamente trascini il controllo nell'editor di canvas. Quando inizi a utilizzare le formule per ottenere un layout dinamico, dovresti evitare di trascinare i controlli.

Nel caso più semplice, un controllo riempie un intero schermo. Per creare questo effetto, imposta le proprietà del controllo su questi valori:

Proprietà	Value
X	0
Y	0
Larghezza	Parent.Width
Altezza	Parent.Height

Queste formule usano l'operatore Parent. Per un controllo posizionato direttamente su uno schermo, Parent si riferisce allo schermo. Con questi valori di proprietà, il controllo appare nell'angolo in alto a sinistra dello schermo (0, 0) e ha larghezza e altezza come lo schermo.

Più avanti in questo argomento, applicherai questi principi (e l'operatore Parent) per posizionare i controlli all'interno di altri contenitori, come raccolte, controlli di gruppo e componenti.

In alternativa, il controllo può riempire solo la metà superiore dello schermo. Per creare questo effetto, imposta la proprietà Height su Parent.Height / 2 e lascia invariate le altre formule.

Se vuoi che un secondo controllo riempia la metà inferiore dello stesso schermo, puoi adottare almeno altri due approcci per costruirne le formule. Per semplicità, potresti adottare questo approccio:

CTRL	Proprietà	Formula
Upper	X	0
Upper	Y	0
Upper	Larghezza	Parent.Width
Upper	Altezza	Parent.Height / 2
inferiore	X	0
inferiore	Y	Parent.Height / 2
inferiore	Larghezza	Parent.Width
inferiore	Altezza	Parent.Height / 2

Questa configurazione otterrebbe l'effetto desiderato, ma dovresti modificare ogni formula se cambiassi idea sulle dimensioni relative dei controlli. Ad esempio, potresti decidere che il controllo superiore occupa solo il terzo superiore dello schermo e il controllo inferiore riempie i due terzi inferiori.

Per creare questo effetto, devi aggiornare la proprietà Height del controllo Superiore e le proprietà Y e Height del controllo Inferiore. Scrivi le formule per il controllo Inferiore in termini di controllo Superiore (e se stesso), come in questo esempio:

CTRL	Proprietà	Formula
Upper	X	0
Upper	Y	0
Upper	Larghezza	Parent.Width
Upper	Altezza	Parent.Height / 3
Lower	X	0
Lower	Y	Upper.Y + Upper.Height
Lower	Larghezza	Parent.Width
inferiore	Altezza	Parent.Height - Lower.Y

Con queste formule in atto, devi solo cambiare la proprietà Height del controllo Superiore per esprimere una frazione diversa dell'altezza dello schermo. Il controllo Inferiore si sposta e si ridimensiona automaticamente per tenere conto della modifica.

Puoi utilizzare questi modelli di formula per esprimere le relazioni di layout comuni tra un controllo denominato C e il relativo controllo padre o di pari livello, denominato D.

Relazione tra C e il suo padre	Proprietà	Formula	Illustrazione
C riempie la larghezza del padre, con un margine di N	X	N
	Larghezza	Parent.Width - (N * 2)
C riempie l'altezza del padre, con un margine di N	Y	N
	Altezza	Parent.Height - (N * 2)
C è allineato con il bordo destro del padre, con margine di N	X	Parent.Width - (C.Width + N)
C è allineato con il bordo inferiore del padre, con margine di N	Y	Parent.Height - (C.Height + N)
C centrato orizzontalmente sul padre	X	(Parent.Width - C.Width) / 2
C centrato verticalmente sul padre	Y	(Parent.Height - C.Height) / 2

Relazione tra C e D	Proprietà	Formula	Illustrazione
C allineato orizzontalmente a D e la stessa larghezza di D	X	D.X
	Larghezza	D.Width
C allineato verticalmente a D e la stessa altezza di D	Y	D.Y
	Altezza	D.Height
Bordo destro di C allineato al bordo destro di D	X	D.X + D.Width - C.Width
Bordo inferiore di C allineato al bordo inferiore di D	Y	D.Y + D.Height - C.Height
C centrato orizzontalmente rispetto a D	X	D.X + (D.Width - C.Width) / 2
C centrato verticalmente rispetto a D	Y	D.Y + (D.Height - C.Height) /2
C posizionato a destra di D con uno spazio di N	X	D.X + D.Width + N
C posizionato sotto D con uno spazio di N	Y	D.Y + D.Height + N
C riempie lo spazio tra D e il bordo destro del padre	X	D.X + D.Width
	Larghezza	Parent.Width - C.X
C riempie lo spazio tra D e il bordo inferiore del padre	Y	D.Y + D.Height
	Altezza	Parent.Height - C.Y

Layout gerarchico

Man mano che costruisci le schermate che contengono più controlli, diventerà più conveniente (o addirittura necessario) posizionare i controlli relativi a un controllo padre, piuttosto che rispetto allo schermo o al controllo di pari livello. Organizzando i controlli in una struttura gerarchica, puoi semplificare la scrittura e la gestione delle formule.

Raccolte

Se usi una raccolta nella tua app, dovrai disporre i controlli all'interno del modello della raccolta. Puoi posizionare questi controlli scrivendo le formule che utilizzano l'operatore Parent che farà riferimento al modello di raccolta. Nelle formule sui controlli all'interno di un modello di raccolta, utilizza le proprietà Parent.TemplateHeight e Parent.TemplateWidth; non usare Parent.Width e Parent.Height che si riferiscono alle dimensioni complessive della raccolta.

Controllo Contenitore

Puoi usare il controllo Contenitore layout come controllo parentale.

Considera l'esempio di un'intestazione nella parte superiore di una schermata. È comune avere un'intestazione con un titolo e diverse icone con le quali gli utenti possono interagire. Puoi costruire tale intestazione usando il controllo Contenitore contenente un controllo Etichetta e due controlli Icona:

Imposta le proprietà per questi controlli su questi valori:

Proprietà	Intestazione	Menu	Chiuso	Titolo
X	0	0	Parent.Width - Close.Width	Menu.X + Menu.Width
Y	0	0	0	0
Larghezza	Parent.Width	Parent.Height	Parent.Height	Close.X - Title.X
Altezza	64	Parent.Height	Parent.Height	Parent.Height

Per il controllo Intestazione, Parent si riferisce allo schermo. Per gli altri Parent si riferisce al controllo Intestazione.

Dopo aver scritto queste formule, puoi regolare le dimensioni o la posizione del controllo Intestazione modificando le formule per le sue proprietà. Le dimensioni e le posizioni dei controlli figlio si adatteranno automaticamente di conseguenza.

Controlli del contenitore di layout automatico

Puoi utilizzare una funzionalità, i controlli del contenitore Layout automatico per disporre automaticamente i componenti figlio. Questi contenitori determinano la posizione dei componenti figlio in modo da non dover mai impostare X, Y per un componente all'interno del contenitore. Inoltre, può distribuire lo spazio disponibile ai relativi componenti figlio in base alle impostazioni, nonché determinare l'allineamento verticale e orizzontale dei componenti figlio. Maggiori informazioni: Controlli del contenitore di layout automatico

Componenti

Se usi un'altra funzione, denominata Componenti, puoi costruire blocchi predefiniti e riutilizzarli nell'app. Come con il controllo Contenitore, i controlli posizionati all'interno di un componente devono basare le loro formule di posizione e dimensione Parent.Width e Parent.Height che si riferiscono alla dimensione del componente. Ulteriori informazioni: Creare un componente.

Adattamento del layout per dimensioni e orientamento del dispositivo

Finora, hai imparato a utilizzare le formule per modificare le dimensioni di ciascun controllo in relazione allo spazio disponibile, mantenendo i controlli allineati l'uno rispetto all'altro. Tuttavia potresti voler o dover apportare modifiche di layout più sostanziali in relazione a diverse dimensioni e orientamenti del dispositivo. Ad esempio, quando si ruota un dispositivo dall'orientamento verticale a quello orizzontale, puoi voler passare da un layout verticale a uno orizzontale. Su un dispositivo più grande, puoi presentare più contenuti o riorganizzarli per fornire un layout più accattivante. Su un dispositivo più piccolo, potrebbe essere necessario suddividere il contenuto su più schermi.

Orientamento del dispositivo

Le formule predefinite per le proprietà Width e Height della schermata, come descritto in precedenza in questo argomento, non forniranno necessariamente una buona esperienza se un utente ruota un dispositivo. Ad esempio, un'app progettata per un telefono con orientamento verticale ha DesignWidth di 640 e DesignHeight del 1136. La stessa app su un telefono con orientamento orizzontale avrà questi valori di proprietà:

• La proprietà Width dello schermo è impostata su Max(App.Width, App.DesignWidth). La proprietà Width (1136) dell'app è più grande della sua DesignWidth (640), quindi la formula restituisce 1136.
• La proprietà Height dello schermo è impostata su Max(App.Height, App.DesignHeight). La proprietà Height (640) dell'app è più piccola della sua DesignHeight (1136), quindi la formula restituisce 1136.

Con un'altezza di 1136 dello schermo e un'altezza del dispositivo (in questo orientamento) di 640, l'utente deve scorrere lo schermo verticalmente per visualizzare tutto il suo contenuto, che potrebbe non essere l'esperienza desiderata.

Per adattare le proprietà Width e Height dello schermo per l'orientamento del dispositivo, puoi utilizzare queste formule:

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

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

Queste formule scambiano i valori DesignWidth e DesignHeight dell'app a seconda se la larghezza del dispositivo è inferiore alla sua altezza (orientamento verticale) o superiore alla sua altezza (orientamento orizzontale).

Dopo aver regolato le formule Width e Height dello schermo, potresti anche voler riorganizzare i controlli all'interno dello schermo per utilizzare meglio lo spazio disponibile. Ad esempio, se ciascuno dei due controlli occupa metà dello schermo, potresti impilarli verticalmente o disporli fianco a fianco in orizzontale.

Puoi usare la proprietà Orientation dello schermo per determinare se lo schermo è orientato verticalmente o orizzontalmente.

Nota

In orientamento orizzontale, i controlli Superiore e Inferiore vengono visualizzati come controlli sinistro e destro.

CTRL	Proprietà	Formula
Upper	X	0
Upper	Y	0
Upper	Larghezza	If(Parent.Orientation = Layout.Vertical, Parent.Width, Parent.Width / 2)
Upper	Altezza	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	Larghezza	Parent.Width - Lower.X
inferiore	Altezza	Parent.Height - Lower.Y

Dimensioni dello schermo e punti di interruzione

Puoi regolare il layout in base alle dimensioni del dispositivo. La proprietà Size dello schermo classifica la dimensione corrente del dispositivo. La dimensione è un numero intero positivo, il tipo ScreenSize fornisce costanti denominate per facilitare la leggibilità. Questa tabella elenca le costanti:

Costante	Value	Tipo di dispositivo tipico (utilizzando le impostazioni dell'app predefinite)
ScreenSize.Small	1	Telefono
ScreenSize.Medium	2	Tablet, tenuto in verticale
ScreenSize.Large	3	Tablet, tenuto in orizzontale
ScreenSize.ExtraLarge	4	Computer desktop

Usa queste dimensioni per prendere decisioni sul layout della tua app. Ad esempio, se desideri che un controllo sia nascosto su un dispositivo delle dimensioni di un telefono ma che sia visibile in altro modo, è possibile impostare la proprietà Visible del controllo su questa formula:

Parent.Size >= ScreenSize.Medium

Questa formula restituisce true quando la dimensione è media o più grande e false negli altri casi.

Se vuoi che un controllo occupi una frazione diversa della larghezza dello schermo in base alla dimensione dello schermo, imposta la proprietà Width del controllo su questa formula:

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

Questa formula imposta la larghezza del controllo a metà della larghezza dello schermo su uno schermo piccolo, a tre decimi della larghezza dello schermo su uno schermo medio e a un quarto della larghezza dello schermo su tutti gli altri schermi.

Punti di interruzione personalizzati

La proprietà Size dello schermo viene calcolata confrontando la proprietà Width dello schermo con i valori della proprietà SizeBreakpoints dell'app. Questa proprietà è una tabella di numeri a colonna singola che indica i punti di interruzione della larghezza che separano le dimensioni dello schermo denominate:

In un'app creata per tablet o Web, i valori predefiniti nella proprietà SizeBreakpoints dell'app sono [600, 900, 1200]. In un'app creata per i telefoni, il valore è [1200, 1800, 2400]. (I valori per le app del telefono vengono raddoppiati perché tali app utilizzano coordinate che sono effettivamente il doppio delle coordinate utilizzate in altre app).

Puoi personalizzare i punti di interruzione dell'app modificando i valori nella proprietà SizeBreakpoints dell'app. Seleziona App nella visualizzazione ad albero, seleziona SizeBreakpoints nell'elenco delle proprietà, quindi modifica i valori nella barra della formula. Puoi creare tutti i punti di interruzione necessari all'app, ma solo le dimensioni da 1 a 4 corrispondono alle dimensioni dello schermo denominate. Nelle formule, puoi fare riferimento alle dimensioni oltre ExtraLarge in base ai valori numerici (5, 6 e così via).

Puoi inoltre specificare un numero inferiore di punti di interruzione. Ad esempio, l'app potrebbe richiedere solo tre dimensioni (due punti di interruzione), quindi le dimensioni dello schermo possibili saranno piccole, medie e grandi.

Limitazioni note

Il canvas di creazione non risponde alle formule di dimensionamento create. Per testare il comportamento reattivo, salva e pubblica la tua app, quindi aprila sui dispositivi o nelle finestre del browser di varie dimensioni e orientamenti.

Se scrivi espressioni o formule nelle proprietà X, Y, Width e Height di un controllo, sovrascrivi quelle espressioni o formule se successivamente trascini il controllo in una posizione diversa o ridimensioni il controllo trascinandone il bordo.

Nota

Puoi indicarci le tue preferenze di lingua per la documentazione? Partecipa a un breve sondaggio. (il sondaggio è in inglese)

Il sondaggio richiederà circa sette minuti. Non viene raccolto alcun dato personale (Informativa sulla privacy).