Controllo contenitore Griglia in Power Apps

Il controllo contenitore Grid consente di layout dei componenti figlio in un modello griglia. Si ottiene un controllo preciso sulla posizione in cui ogni componente si trova in termini di righe e colonne.

Questo contenitore funziona come griglie in stile CSS. Definire le righe e le colonne e impostare la posizione esatta per ogni componente figlio usando le relative proprietà.

Description

Il controllo contenitore Grid offre un sistema di layout flessibile per le app canvas. Consente di:

• Posizionare i componenti figlio in un modello griglia
• Specificare l'inizio e la fine della riga e della colonna per ogni elemento figlio
• Apportare modifiche reattive quando cambiano le dimensioni del contenitore o dello schermo
• Controllare l'allineamento, la spaziatura e l'overflow all'interno della griglia

Usando questo approccio, non è necessario posizionare manualmente ogni componente. Le app diventano più gestibili e reattive.

Display properties

• Distanza : spaziatura in pixel tra i componenti figlio all'interno della griglia.
• Colonne : numero di colonne nel layout della griglia.
• Righe : numero di righe nel layout della griglia.

Dimensioni e posizione

• X : distanza orizzontale dal bordo sinistro del contenitore padre (o schermo se non è padre).
• Y : distanza verticale dal bordo superiore del contenitore padre (o schermo se non è padre).
• Width : distanza tra i bordi sinistro e destro di un controllo.
• Altezza : distanza tra i bordi superiore e inferiore di un controllo.
• Spaziatura interna : spaziatura tra i bordi del contenitore e i relativi componenti figlio.

Colore e bordo

• Colore : colore di primo piano del contenitore, usato per i bordi e il testo, se applicabile.
• Border
  • Stile : tipo di bordo: tinta unita, tratteggiata, tratteggiata o Nessuna.
  • Spessore : larghezza del bordo in pixel.
  • Colore : colore del bordo.
• Raggio del bordo : grado di arrotondamento degli angoli del contenitore. È possibile applicare questa impostazione a tutti gli angoli in modo uniforme o suddividerlo in singoli angoli nelle impostazioni avanzate.
• Ombreggiatura: effetto Ombreggiatura applicato al contenitore. Opzioni: None, Light, Medium o Heavy.

Visibility

• Visibile : indica se viene visualizzato il contenitore della griglia. Attiva oDisattiva.

Proprietà del layout griglia (specifiche dell'elemento figlio)

• Inizio colonna/Fine colonna : definisce le colonne iniziali e finali per un componente figlio.
• Inizio riga/Fine riga : definisce le righe iniziali e finali per un componente figlio.

Example

1. Creare un'app canvas vuota da zero con un layout Reattivo .

2. Creare una nuova schermata.

3. Nel riquadro Inserisci in Layout selezionare Contenitore Griglia.

4. Impostare le proprietà del contenitore per occupare lo schermo intero:

   • X = 0
   • Y = 0
   • Larghezza = Parent.Width
   • Altezza = Genitore. Altezza

5. Aggiungere diversi componenti figlio, ad esempio pulsanti, input di testo, icone e supporti. Per ogni elemento figlio, impostare le proprietà di posizionamento della griglia:

   • Inizio colonna/Fine
   • Inizio riga/Fine
   • Allinea nella cella

6. Premere F5 per visualizzare l'anteprima. Ridimensionare lo schermo e osservare il modo in cui i componenti figlio rimangono nelle posizioni della griglia e regolare in modo reattivo.