Un contrôle que l’utilisateur peut sélectionner pour interagir avec l’application.

Description

Configurez la propriété OnSelect d’un contrôle Button pour exécuter une ou plusieurs formules lorsque l’utilisateur sélectionne le contrôle.

Principales propriétés

OnSelect : comment l’application répond quand l’utilisateur appuie ou clique sur un contrôle.

Text : texte qui apparaît sur un contrôle ou que l’utilisateur tape dans un contrôle.

Propriétés supplémentaires

Align : emplacement du texte par rapport au centre horizontal de son contrôle.

AutoDisableOnSelect: désactive automatiquement le contrôle pendant l’exécution du comportement OnSelect.

BorderColor : couleur de bordure du contrôle.

BorderStyle : indique si la bordure d’un contrôle est unie, discontinue, en pointillés ou s’il n’y en a aucune.

BorderThickness : épaisseur de bordure d’un contrôle.

FocusedBorderThickness: épaisseur de bordure d’un contrôle quand le focus du clavier est positionné sur celui-ci.

Color : couleur du texte dans un contrôle.

DisplayMode : indique si le contrôle autorise l’entrée d’un utilisateur (Edit), affiche uniquement les données (View) ou est désactivé (Disabled).

DisabledBorderColor : couleur de bordure d’un contrôle si sa propriété DisplayMode est définie sur Disabled.

DisabledColor : couleur du texte d’un contrôle si sa propriété DisplayMode est définie sur Disabled.

DisabledFill : couleur d’arrière-plan d’un contrôle si sa propriété DisplayMode est définie sur Disabled.

Fill : couleur d’arrière-plan d’un contrôle.

Font : nom de la famille de polices dans laquelle le texte s’affiche.

FontWeight : épaisseur du texte dans un contrôle : Gras, Semibold, Normal ou Plus claire.

Height : distance entre le haut et le bas d’un contrôle.

HoverBorderColor : couleur de bordure d’un contrôle lorsque l’utilisateur maintient le pointeur de la souris sur ce contrôle.

HoverColor : couleur du texte d’un contrôle lorsque l’utilisateur maintient le pointeur de la souris sur ce contrôle.

HoverFill : couleur d’arrière-plan d’un contrôle lorsque l’utilisateur maintient le pointeur de la souris sur ce contrôle.

Italic : indique si le texte d’un contrôle est en italique.

PaddingBottom : distance entre le texte d’un contrôle et le bord inférieur de ce contrôle.

PaddingLeft : distance entre le texte d’un contrôle et le bord gauche de ce contrôle.

PaddingRight : distance entre le texte d’un contrôle et le bord droit de ce contrôle.

PaddingTop : distance entre le texte d’un contrôle et le bord supérieur de celui-ci.

Pressed : true quand un contrôle est enfoncé, false dans le cas contraire.

PressedBorderColor : couleur de bordure d’un contrôle lorsque l’utilisateur appuie ou clique dessus.

PressedColor : couleur de texte d’un contrôle lorsque l’utilisateur appuie ou clique dessus.

PressedFill : couleur d’arrière-plan d’un contrôle lorsque l’utilisateur appuie ou clique dessus.

RadiusBottomLeft : degré auquel le coin inférieur gauche d’un contrôle est arrondi.

RadiusBottomRight : degré auquel le coin inférieur droit d’un contrôle est arrondi.

RadiusTopLeft : degré auquel le coin supérieur gauche d’un contrôle est arrondi.

RadiusTopRight : degré auquel le coin supérieur droit d’un contrôle est arrondi.

Size : taille de police du texte qui apparaît sur un contrôle.

Strikethrough : indique si une ligne s’affiche sur le texte qui apparaît sur un contrôle.

TabIndex : personnalise l’ordre de tabulation des contrôles lors de l’exécution si la valeur définie est différente de zéro.

Tooltip : texte explicatif qui s’affiche lorsque l’utilisateur pointe sur un contrôle.

Underline : indique si une ligne s’affiche sous le texte qui apparaît sur un contrôle.

VerticalAlign : emplacement du texte sur un contrôle par rapport au centre vertical de celui-ci.

Visible : indique si un contrôle est visible ou est masqué.

Width : distance entre les côtés droit et gauche d’un contrôle.

X : distance entre le bord gauche d’un contrôle et le bord gauche de son conteneur parent (ou l’écran s’il n’y a pas de conteneur parent).

Y : distance entre le bord supérieur d’un contrôle et le bord supérieur du conteneur parent (ou l’écran s’il n’y a pas de conteneur parent).

Fonctions connexes

Navigate( ScreenName, ScreenTransitionValue )

Exemples

Ajouter une formule de base à un bouton

  1. Ajoutez un contrôle Text input et nommez-le Source.

    Vous ne savez pas comment ajouter, nommer et configurer un contrôle ?

  2. Ajoutez un contrôle Button, définissez sa propriété Text sur « Add », puis définissez sa propriété OnSelect sur la formule suivante :
    UpdateContext({Total:Total + Value(Source.Text)})

    Vous voulez des informations supplémentaires sur les fonctions UpdateContext ou d’autres fonctions ?

  3. Ajoutez un contrôle Label, définissez sa propriété Text sur Total, puis appuyez sur F5.

  4. Effacez le texte par défaut de Source, tapez un nombre, puis cliquez ou appuyez sur Ajouter.

    Le contrôle Label affiche le nombre que vous avez tapé.

  5. Effacez le nombre de Source, tapez un autre nombre, puis cliquez ou appuyez sur Ajouter.

    Le contrôle Label affiche la somme des deux nombres que vous avez tapés.

  6. (facultatif) Répétez l’étape précédente une ou plusieurs fois.

  7. Pour revenir à l’espace de travail par défaut, appuyez sur ÉCHAP (ou cliquez ou appuyez sur l’icône de fermeture dans l’angle supérieur droit).

Configurer un bouton avec plusieurs formules

Ajoutez une formule qui efface le contrôle Text input entre les entrées.

  1. Définissez la propriété HintText de Source sur « Entrez un nombre ».

  2. Définissez la propriété OnSelect de Add sur la formule suivante :

    UpdateContext({Total:Total + Value(Source.Text)});
    UpdateContext({ClearInput: ""})

    Remarque : si vous avez plusieurs formules, séparez-les à l’aide d’un point-virgule « ; ».

  3. Définissez la propriété Default de Source sur ClearInput.

  4. Appuyez sur F5, puis testez l’application en ajoutant plusieurs nombres.

Ajouter un bouton pour réinitialiser le total

Ajoutez un deuxième bouton pour effacer le total entre les calculs.

  1. Ajoutez un autre contrôle Button, définissez sa propriété Text sur « Clear », puis sa propriété OnSelect sur la formule suivante :

    UpdateContext({Total:0})

  2. Appuyez sur F5, ajoutez plusieurs nombres, puis cliquez ou appuyez sur Clear pour réinitialiser le total.

Modifier l’apparence d’un bouton

Modifier la forme d’un bouton

Par défaut, PowerApps crée un contrôle Button rectangulaire aux angles arrondis. Vous pouvez apporter des modifications de base à la forme d’un contrôle Button en définissant ses propriétés Height, Width et Radius.

Remarque : les icônes et formes** offrent un vaste éventail de conceptions, et peuvent effectuer certaines fonctions de base identiques à celles des contrôles Button. Toutefois, les **icônes et formes n’ont pas de propriété Text.

  1. Ajoutez un contrôle Button, puis définissez ses propriétés Height et Width sur 300 pour créer un grand bouton carré.

  2. Modifiez les propriétés RadiusTopLeft, RadiusTopRight, RadiusBottomLeft et RadiusBottomRight pour ajuster la courbure de chaque angle. Voici quelques exemples de formes commençant à partir d’un bouton carré de 300x300 :

Modifier la couleur d’un bouton en cas de pointage sur celui-ci

Par défaut, la couleur de remplissage d’un contrôle Button est atténuée de 20 % lorsque vous pointez dessus avec une souris. Vous pouvez ajuster ce comportement en modifiant la propriété HoverFill qui utilise la fonction ColorFade. Si vous définissez la formule ColorFade sur un pourcentage positif, la couleur devient plus claire lorsque vous pointez sur le bouton, tandis qu’un pourcentage négatif rend la couleur plus sombre.

  • Modifiez le pourcentage ColorFade dans la propriété HoverFill de l’un des boutons que vous avez créés, puis observez les effets.

Vous pouvez également spécifier la couleur d’un contrôle Button en définissant sa propriété HoverFill sur une formule contenant la fonction ColorValue au lieu de la fonction ColorFade, comme dans ColorValue("Red").

Remarque : la valeur de couleur peut être toute définition de couleur CSS, qu’il s’agisse d’un nom ou d’une valeur hexadécimale. - Remplacez la fonction ColorFade par une fonction ColorValue dans l’un des boutons que vous avez créés, puis observez les effets.