PowerBlocks
GuidesCréer un écran Power Apps responsive avec les conteneurs
Power AppsVérifié le 16/10/2026

Créer un écran Power Apps responsive avec les conteneurs

Un écran Power Apps se déforme selon la taille de l’écran quand les contrôles sont placés avec des coordonnées X/Y fixes. Correctif immédiat : dans Paramètres > Affichage, désactive « Mettre à l’échelle » (Scale to fit) — ce qui désactive aussi le verrouillage des proportions (Lock aspect ratio) —, puis « Verrouiller l’orientation » si l’app doit pivoter, et base les tailles sur App.Width et Parent.Width plutôt que sur des pixels codés en dur. Correctif durable : reconstruis l’écran avec des conteneurs à disposition automatique. Donne une taille fixe aux éléments fixes, active Flexible width ou Flexible height avec des Fill portions pour que les autres enfants se partagent l’espace supplémentaire proportionnellement, et imbrique les conteneurs pour former lignes et colonnes. Sur téléphone, change la direction ou la visibilité d’un conteneur selon la propriété Size de l’écran ou App.Width pour les empiler.

Active le mode responsive

  1. 1Dans Paramètres > Affichage, désactive « Mettre à l’échelle » (Scale to fit) pour que l’app utilise la vraie taille de la fenêtre. Le paramètre « Verrouiller les proportions » (Lock aspect ratio) se désactive automatiquement ; désactive aussi « Verrouiller l’orientation » (Lock orientation) si l’app doit suivre la rotation de l’appareil. Les libellés français varient selon la version de Studio : garde le terme anglais comme repère.
  2. 2Base les tailles sur App.Width / Parent.Width au lieu de positions en pixels codées en dur.

Utilise les conteneurs de disposition

  1. 1Construis les écrans avec des conteneurs horizontaux et verticaux qui positionnent leurs enfants automatiquement.
  2. 2Pour chaque enfant, choisis une taille fixe, ou active Flexible width ou Flexible height et renseigne les portions de remplissage (Fill portions) : les enfants flexibles se partagent l’espace supplémentaire du conteneur proportionnellement à leurs portions (par exemple, des portions de 1 et 2 donnent un tiers et deux tiers de l’espace supplémentaire).
  3. 3Imbrique les conteneurs pour créer lignes et colonnes sans calcul de X/Y manuel.

Ajoute des breakpoints

Fais du breakpoint une formule, pas une affectation ponctuelle. Chaque écran a une propriété Size (ScreenSize.Small à ExtraLarge) calculée à partir de App.SizeBreakpoints, que tu peux personnaliser. Pour les contrôles placés dans des conteneurs, référence l’écran par son nom (par exemple HomeScreen.Size), car Parent désigne le conteneur. Tu peux aussi comparer App.Width dans une formule nommée de App.Formulas afin que la valeur se recalcule au redimensionnement. Pilote ensuite la propriété Direction d’un conteneur (LayoutDirection dans la barre de formule) ou sa propriété Visible avec cette valeur pour empiler une mise en page à deux colonnes sur téléphone. Évite de définir une variable de contexte une seule fois dans OnVisible : elle ne suit pas les redimensionnements ultérieurs.

Guides associés