Mise en page et style

App Studio offre de nombreuses options de personnalisation au regard de la mise en page de l'application à l'aide de ses différentes commandes de conteneur et d'options de style pour chacune des commandes

Positionnement de vos commandes

Une mise en page personnalisée peut être facilement créée à l'aide de la commande Mise en page du conteneur (Container Layout). De cette façon, vous pouvez regrouper plusieurs commandes pour avoir un positionnement spécifique, tout en configurant la disposition et l'alignement d'une seule commande (c'est-à-dire le conteneur).

Pour personnaliser la position des commandes dans une page ou un conteneur :

1. Sélectionnez la page ou le conteneur qui contient la commande souhaitée.

2. Dans le panneau Style, sélectionnez Mise en page (Layout) (Vertical, Horizontal) et l'alignement des commandes (Gauche (Left), Centre, Droite (Right), Étirer (Stretch), Haut (Top), Milieu (Middle), Bas (Bottom), Répartir (Distribute)).

   Remarque :

   Par défaut, les commandes s'affichent sur une seule ligne et héritent de l'alignement du conteneur parent.

3. (Facultatif) Pour la commande souhaitée, remplacez l'alignement hérité en sélectionnant l'une des options disponibles. Pour revenir par défaut à l'alignement du conteneur, désélectionnez tout alignement remplacé.
4. (Facultatif) Pour le conteneur ou la page souhaité, sélectionnez l'option Autoriser l'encapsulage (Allow wrapping) pour encapsuler les commandes sur plusieurs lignes.

Redimensionner vos commandes

Les commandes sont automatiquement dimensionnées par défaut. La fonction Auto permet à la commande de saisir la taille du contenu qu'il contient. Par exemple, si la largeur et la hauteur d'une commande de bouton sont définies sur auto, la taille du bouton augmente ou diminue en fonction du texte du bouton.

Une hauteur et une largeur spécifiques peuvent également être définies. Les options Largeur/hauteur min (Min Width/Heigh) et Largeur/hauteur max (Max Width/Heigh) sont disponibles sous l'icône à trois points (...) dans la section Taille (Size) du panneau Style.

Les unités de mesure sont %, px (pixels) et em (par rapport à la taille de police de l'élément). Par exemple, 3em signifie 3 fois la taille de la police actuelle.

Pour sélectionner les unités de mesure, utilisez les menus déroulants des champs de taille ou saisissez l'unité. Par exemple, pour définir une largeur de 100 pixels, saisissez 100px dans le champ Largeur (Width).

Remarque :

Si aucune unité de mesure n'est fournie, le système utilise par défaut les pixels (px).

Personnalisation de la police

Pour modifier la façon dont le texte apparaît dans votre application, ajustez les attributs dans la section Police (Font), tels que la famille de polices, la taille, la couleur ou le style.

Vous pouvez basculer entre les formats de couleurs RVB, HEX et TSL en cliquant sur les flèches à côté de la valeur de couleur.

Travailler avec des bordures

La section de bordure a trois propriétés :

• Épaisseur des bordures
• Couleur de la bordure
• Rayon d'angle.

Les pixels sont l'unité de mesure de ces attributs.

Espacer les commandes

Les commandes et les conteneurs peuvent être espacés à l'aide des attributs des sections Marge (Margin) et Remplissage (Padding).

Les marges fournissent un espacement autour des commandes.

Les remplissages fournissent un espacement entre la commande et son contenu.

Pour détacher les valeurs Haut/Bas (Top/Bottom) et Gauche/Droite (Left/Right) et les définir indépendamment, cliquez sur le bouton Lier (Link) situé à droite de la section Marge (Margin)/Remplissage (Padding).

Remarque :

Vous pouvez définir la marge et le remplissage des commandes Conteneur (Container), tandis que pour la majorité des commandes, vous ne pouvez définir que la marge.

Changer la couleur de fond

Vous pouvez modifier la couleur de fond de vos commandes à l'aide de l'un des trois formats de couleurs :

• RVB
• HEX

• TSL

  Pour ce faire, cliquez sur les flèches à côté des valeurs de couleur.