Share via


Conseils de conception de styles pour le contrôle Button

Ee341364.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(FR-FR,Expression.30).png

Le contrôle Button représente un objet qui réagit à l’entrée utilisateur à partir d’une souris, d’un clavier ou d’un autre périphérique d’entrée, et qui déclenche un événement Click.

Comme avec tous les contrôles, vous pouvez modifier le contrôle Button de sorte qu’il paraisse très différent de son apparence par défaut. Par défaut, le contrôle Button se présente comme suit :

Ee341364.c01e5314-5b29-4283-a483-b0a1cb3b59f6(FR-FR,Expression.30).png

Propriétés d'intérêt du contrôle Button

Le contrôle Button est un contrôle de contenu. Vous pouvez ainsi afficher un texte à l’intérieur en définissant la propriété Contenu sous Propriétés communes dans le panneau Propriétés.

Vous pouvez définir la propriété ClickMode pour déterminer quand l’événement Click est déclenché : lorsque vous cliquez sur (ou relâchez) le bouton de la souris, ou lorsque vous placez le pointeur sur le contrôle Button.

Vous pouvez définir ces propriétés des manières suivantes :

  • Définir les propriétés de l’objet   Après avoir dessiné un objet Button sur la planche graphique, vous pouvez définir directement les propriétés de l’objet. Pour que plusieurs contrôles Button utilisent les mêmes valeurs, définissez ces propriétés dans un style.

  • Définir les propriétés dans un style   Si vous définissez ces propriétés dans le style Ee341364.94fa7fc4-4f3e-4e84-9ba1-287f1b894371(FR-FR,Expression.30).png de l’objet Button, tout objet Button qui a recours à ce style utilise ces valeurs. Vous pouvez remplacer les valeurs d’un objet spécifique.

    Pour plus d’informations, voir Créer un style.

Le contrôle Button change l’apparence selon l’état correspondant. Vous pouvez modifier l’apparence de chaque état en mode de modification de modèle en sélectionnant un état dans le panneau États. Pour plus d’informations, voir les états énumérés dans les tableaux suivants, et voir Définition d'états visuels différents pour un contrôle.

Pour indiquer ce qui se passe lorsque vous cliquez sur un contrôle Button, faites glisser un comportement vers un objet Button ou vers un objet du modèle Button. Pour plus d’informations, voir Ajout de comportements aux objets.

Vous pouvez éventuellement relier l’événement Click à un gestionnaire d’événements. Pour plus d’informations, voir Écriture de code de gestion des événements.

Parties d’un modèle Button

Le contrôle Button ne comporte aucune partie.

États d’un contrôle Button

Par défaut, le contrôle Button peut être dans l’un des quatre états suivants dans le groupe d’états CommonStates, que vous pouvez afficher dans le panneau États lors de la modification d’un modèle Button :

Nom de l’état

Description

Normal

Aspect du contrôle Button en l’absence d’interaction avec ce dernier.

MouseOver

Aspect du contrôle Button lorsque l'utilisateur place le pointeur dessus.

Enfoncé

Aspect du contrôle Button lorsque l'utilisateur clique dessus ou lorsque le contrôle est activable et que l'utilisateur appuie sur Entrée ou Espace.

Désactivé

Aspect du contrôle Button lorsque la valeur False est affectée à la propriété IsEnabled.

Le contrôle Button peut également être dans l’un des deux états suivants du groupe d’états FocusStates :

Nom de l’état

Description

Sans focus

Aspect du contrôle Button lorsqu'il ne possède pas le focus clavier.

Avec focus

Aspect du contrôle Button lorsqu'il possède le focus clavier. Un utilisateur pourrait, par exemple, appuyer sur la touche Tabulation pour parcourir en séquence les objets d'une application jusqu'à ce que le focus clavier soit sur le contrôle Button.

Ee341364.alert_tip(FR-FR,Expression.30).gifConseil :

Un groupe d’états contient les états visuels qui font partie de la même catégorie logique, et qui ne peuvent pas être affichés simultanément. Par exemple, le groupe CommonStates comprend des états associés à l’interaction utilisateur avec un périphérique d’entrée tel que la souris. Seul un état d’un groupe d’états peut être affiché à la fois, mais un état provenant d’un seul groupe peut être affiché en même temps qu’un état d’un autre groupe d’états.

Lorsque vous sélectionnez un état, l'enregistrement d'état est activé et les éventuelles modifications que vous apportez seront enregistrées pour cet état. Pour désactiver l’enregistrement de l’état, cliquez sur le bouton d’enregistrement Ee341364.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(FR-FR,Expression.30).png sur la planche graphique, ou sélectionnez Base dans le panneau États.

Pour convertir des objets en contrôle Button

Étant donné que le contrôle Button ne contient aucune partie, vous pouvez convertir des objets en contrôle Button.

  1. Regroupez vos objets dans un panneau de disposition, sélectionnez ce dernier, puis, dans le menu Outils, cliquez sur Créer un contrôle.

  2. Dans la boîte de dialogue qui s’affiche, sélectionnez Button, nommez votre modèle, et sélectionnez l’emplacement de stockage du modèle.

    Pour plus d’informations sur les emplacements, voir Créer une ressource.

  3. Après avoir cliqué sur OK, Microsoft Expression Blend passe en mode de modification de modèle et affiche les objets qui composent votre contrôle Button.

  4. Si le groupe d’objets d’origine comprend un objet TextBlock Ee341364.42165963-00f7-4a33-abcd-b0849edebada(FR-FR,Expression.30).png, ce dernier est converti en objet ContentPresenter Ee341364.51a0c06c-d801-4133-8caf-cf1856a8dfc4(FR-FR,Expression.30).png dans le modèle de contrôle Button. Ceci permet à l’objet Button d’afficher un texte. Si vos objets d’origine ne comportent pas un objet TextBlock, un objet ContentPresenter est automatiquement ajouté au modèle. S’il n’est pas nécessaire d’afficher le texte dans la propriété Contenu de l’objet Button auquel ce modèle est appliqué, vous pouvez supprimer l’objet ContentPresenter.

  5. Vous pouvez continuer à modifier votre modèle dans ce mode. Par exemple, ajoutez ou modifiez des objets, ou sélectionnez un état dans le panneau États pour modifier l’apparence de votre modèle dans cet état.

  6. Pensez à lier certaines des propriétés de pinceau pour les objets de votre modèle aux propriétés suivantes de l’objet Button qui utiliseront finalement votre modèle :

    • Arrière-plan

    • BorderBrush

    • Premier plan

    • BorderThickness

    Pour plus d’informations, voir Véhiculer des propriétés d'objet vers le modèle.

  7. Pour quitter le mode de modification de modèle, cliquez sur [Button] dans la barre de navigation en haut de la planche graphique, ou cliquez sur Étendue supérieure Ee341364.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(FR-FR,Expression.30).png dans le panneau Objets et chronologie.

Pour plus d’informations sur l’application de votre nouveau modèle Button à d’autres objets Button, voir Appliquer ou supprimer une ressource.

Références

Vous trouverez des informations détaillées sur les propriétés et événements du contrôle Button Microsoft Silverlight dans la Galerie de contrôles Silverlight Gallery sur MSDN.

Voir aussi

Tâches

Créer un contrôle à partir d’objets existants

Concepts

Conseils de conception de styles pour les contrôles Silverlight courants

SimpleButton

Définition d'un style pour un contrôle prenant en charge les modèles