Design responsive con container

Introduzione a Power Apps

Luise Freese

Azure & Power Platform Architect

Perché responsive?

 

  • La stessa app si apre su telefono, tablet, laptop
  • Un layout fisso taglia sui piccoli schermi, si perde su quelli grandi
  • Responsive = il layout si adatta

$$

Telefono, tablet e laptop che mostrano la stessa app adattare il layout da una colonna a più colonne.

Introduzione a Power Apps

Container di layout moderni

Illustrazione che confronta container Layout verticali e orizzontali con controlli figli impilati vs affiancati.

 

  • Container layout verticale, impila dall'alto in basso
  • Container layout orizzontale, dispone da sinistra a destra
  • I controlli moderni fluiscono nello spazio disponibile
Introduzione a Power Apps

Larghezza e altezza flessibili

 

  • FlexibleWidth e FlexibleHeight
  • On: il controllo si espande per riempire il container
  • Off: il controllo mantiene dimensioni fisse

$$

Gallery1.FlexibleHeight = true    // stretches with screen
Gallery1.FlexibleWidth  = false   // stays at fixed reading width
Introduzione a Power Apps

LayoutMinWidth e LayoutMinHeight

Telefono vs tablet che mostrano LayoutMinWidth come breakpoint in cui il layout passa da una colonna a pannello laterale + contenuto.

 

  • Un container ha bisogno di spazio sufficiente per disporre bene
  • LayoutMinWidth = la larghezza minima prima di riordinarsi
  • Attiva un layout diverso tra telefoni e tablet
Introduzione a Power Apps

Impostazioni di visualizzazione dell'app

 

  • Settings → Display imposta orientamento e dimensioni
  • App layout: Fixed adatta a un rapporto, Responsive si adatta allo schermo
  • Prova a più dimensioni

$$

Finestra Impostazioni di Power Apps Studio nella scheda Display, con layout, orientamento e dimensioni canvas

Introduzione a Power Apps

Layout predefiniti

Screenshot reale del riquadro Nuova schermata di Power Apps Studio con modelli di layout predefiniti: Vuoto, Schermo diviso, Barra laterale, Intestazione e piè di pagina, Richiesta di approvazione e Schermata di benvenuto, ciascuno con piccola anteprima

 

  • + New screen include modelli di layout predefiniti
  • Sidebar, Header and footer, Split screen, già responsive
  • Punto di partenza consigliato per la tua prima app responsive
Introduzione a Power Apps

Cosa costruirai

$$

Racchiudi i controlli in un Layout container· Passa tra dimensioni dei dispositivi· Guarda l'app rispondere

Illustrazione di un'app su telefono, tablet e laptop, con la gallery che si adatta a ogni dimensione schermo.

Introduzione a Power Apps

Esercitiamoci!

Introduzione a Power Apps

Preparing Video For Download...