Conception adaptative avec des conteneurs

Introduction à Power Apps

Luise Freese

Azure & Power Platform Architect

Pourquoi adaptatif ?

 

  • La même appli s'ouvre sur téléphones, tablettes, portables
  • Une mise en page fixe rognée sur petit écran, perdue sur grand
  • Adaptative = la mise en page s'ajuste

$$

Téléphone, tablette et portable montrant la même appli qui passe d'une colonne à plusieurs colonnes.

Introduction à Power Apps

Conteneurs d'agencement modernes

Illustration comparant des conteneurs d'agencement vertical et horizontal, avec des contrôles enfants empilés ou côte à côte.

 

  • Conteneur vertical : empile de haut en bas
  • Conteneur horizontal : aligne de gauche à droite
  • Les contrôles modernes occupent l'espace disponible
Introduction à Power Apps

Largeur et hauteur flexibles

 

  • FlexibleWidth et FlexibleHeight
  • Activé : le contrôle s'étire pour remplir le conteneur
  • Désactivé : le contrôle garde une taille fixe

$$

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

LayoutMinWidth et LayoutMinHeight

Téléphone vs tablette montrant LayoutMinWidth comme seuil où l'agencement passe d'une colonne à panneau latéral + contenu.

 

  • Un conteneur a besoin d'assez d'espace pour bien s'agencer
  • LayoutMinWidth = plus petite largeur avant réagencement
  • Déclenche un agencement différent pour téléphones vs tablettes
Introduction à Power Apps

Paramètres d'affichage de l'appli

 

  • Paramètres → Affichage règle l'orientation et la taille
  • Mise en page de l'appli : Fixe cadre à un seul ratio, Adaptative s'ajuste à l'écran
  • Testez à plusieurs tailles

$$

Boîte de dialogue Paramètres de Power Apps Studio, onglet Affichage, montrant les options de mise en page, d'orientation et de taille de canevas

Introduction à Power Apps

Les agencements prédéfinis

Capture réelle du volet Nouveau écran de Power Apps Studio montrant des modèles d'agencement prédéfinis : Vide, Écran scindé, Barre latérale, En-tête et pied de page, Demande d'approbation et Écran d'accueil, chacun avec un aperçu.

 

  • + New screen propose des modèles d'agencement prêts à l'emploi
  • Barre latérale, En-tête et pied de page, Écran scindé, déjà adaptatifs
  • Point de départ recommandé pour une première appli adaptative
Introduction à Power Apps

Ce que vous allez créer

$$

Placez les contrôles dans un conteneur d'agencement · Basculez entre tailles d'appareil · Voyez l'appli réagir

Illustration d'une appli sur téléphone, tablette et portable, montrant la galerie qui s'adapte à chaque taille d'écran.

Introduction à Power Apps

Passons à la pratique !

Introduction à Power Apps

Preparing Video For Download...