Share via

Conseils de conception de styles pour le contrôle ComboBox des contrôles Silverlight dans Blend

  • Article

JJ170183.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(fr-fr,VS.120).png

Vous pouvez utiliser le modèle de contrôle ComboBox intégré pour créer un modèle ComboBox personnalisé. Le contrôle Popup contient un contrôle ListBox qui permet aux utilisateurs de sélectionner un élément dans une liste. Par défaut, le contrôle ComboBox se présente comme suit :

JJ170183.f2dbcfc2-1ccd-49d5-9de9-6be35c73ad67(fr-fr,VS.120).png

Parties du modèle ComboBox

Le modèle ComboBox comprend les éléments suivants :

JJ170183.69fada84-8d77-4b89-a14c-18fcbd2da5a9(fr-fr,VS.120).png

Nom de la partie

Type d’objet

JJ170183.B1_1(fr-fr,VS.120).png ContentPresenter

ContentPresenter

JJ170183.B1_2(fr-fr,VS.120).png ContentPresenterBorder

FrameworkElement

JJ170183.B1_3(fr-fr,VS.120).png DropDownToggle

ToggleButton

JJ170183.B1_4(fr-fr,VS.120).png Popup

Popup

Conseil

Pour afficher les parties du modèle, ouvrez le panneau Parties lorsque vous modifiez le modèle.

Conseils pour le contrôle ComboBox

Une zone de liste déroulante est composée d’une fenêtre contextuelle qui contient une liste d’éléments (4), d’une zone dans laquelle l’élément actuellement sélectionné apparaît (1) et d’un bouton bascule permettant d’ouvrir et de fermer la fenêtre contextuelle (3).

JJ170183.collapse_all(fr-fr,VS.120).gifPartie ContentPresenter

La partie ContentPresenter est obligatoire, et son but est d’afficher l’élément en cours. Si vous placez un contenu à l’intérieur de la partie ContentPresenter dans le modèle, ce contenu est affiché chaque fois qu’il n’y a aucun élément sélectionné.

JJ170183.collapse_all(fr-fr,VS.120).gifPartie ContentPresenterBorder

Si IsHitTestVisible est vrai, vous pouvez cliquer sur la partie ContentPresenterBorder pour ouvrir et fermer la fenêtre contextuelle qui se trouvera en bas à gauche de ContentPresenterBorder (2). Un panneau de disposition est un bon choix pour la partie ContentPresenterBorder.

JJ170183.collapse_all(fr-fr,VS.120).gifPartie DropDownToggle

La partie DropDownToggle est facultative, mais vous pouvez l’utiliser comme une autre façon d’ouvrir et de fermer la fenêtre contextuelle.

JJ170183.collapse_all(fr-fr,VS.120).gifPartie Popup

La partie Popup est obligatoire. Il s’agit de la partie dans laquelle les éléments sont affichés. Un ItemsPresenter est utilisé pour indiquer où les éléments doivent être affichés. Le ItemsPresenter doit être placé à l’intérieur de la partie ScrollViewer. La Popup est ouverte par rapport aux limites de l’objet racine du modèle.

États du contrôle ComboBox

Par défaut, le contrôle ComboBox peut se trouver dans l’un des trois états suivants dans le groupe d’états CommonStates qui est visible dans le panneau États lors de la modification d’un modèle ComboBox :

Nom de l’état

Description

Normal

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

MouseOver

Aspect du contrôle ComboBox lorsque l’utilisateur place le pointeur dessus.

Disabled

Aspect du contrôle ComboBox lorsque la propriété IsEnabled est définie sur la valeur False.

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

Nom de l’état

Description

Unfocused

Aspect du contrôle ComboBox lorsqu’il ne possède pas le focus clavier.

Focused

Aspect du contrôle ComboBox lorsqu’il dispose du focus clavier et que le contrôle ComboBox n’est pas développé. 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 ComboBox.

FocusedDropDown

Aspect du contrôle ComboBox lorsqu’il dispose du focus clavier et que le contrôle ComboBox est développé.

Le contrôle ComboBox peut être dans l’un des trois états suivants du groupe d’états ValidationStates :

Nom de l’état

Description

Valid

Aspect du contrôle ComboBox lorsqu’il est valide.

InvalidUnfocused

Aspect du contrôle ComboBox lorsqu’il n’est pas valide et ne possède pas le focus clavier.

InvalidFocused

Aspect du contrôle ComboBox lorsqu’il n’est pas valide et possède le focus clavier.

Conseil

Un groupe d’états contient les états visuels qui appartiennent à une même catégorie logique et ne peuvent pas être affichés simultanément.Le groupe CommonStates, par exemple, comprend des états qui se rapportent à une interaction utilisateur avec un périphérique d’entrée tel que la souris.Un seul état d’un groupe d’états peut être affiché à la fois, mais un état d’un 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 de l’état est activé et toutes les modifications que vous effectuez sont enregistrées pour cet état. Pour désactiver l’enregistrement de l’état, cliquez sur le bouton d’enregistrement JJ170183.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(fr-fr,VS.120).png sur la planche graphique, ou choisissez Base dans le panneau States. Pour modifier l’apparence de votre contrôle lorsque deux états distincts sont actifs, vous pouvez épingler un aperçu d’un état dans un groupe d’états pendant que vous modifiez un état dans un autre groupe d’états.

Liaison de modèle

Vous pouvez lier par modèle les propriétés Background, BorderBrush, Foreground ou BorderThickness. Pour plus d'informations, consultez Véhiculer des propriétés d'objet vers le modèle dans Blend.

Pour convertir des objets en contrôle ComboBox

Le graphique suivant est une conception complète (comp) d’une zone de liste déroulante.

ComboBox

Notes

Il est important de noter que le graphique précédent n’est pas encore un contrôle ComboBox, mais une conception graphique qui ressemble à un contrôle ComboBox.

Cet exemple montre comment utiliser le code XAML à l’étape 2 de la procédure suivante.

  1. Ouvrez un nouveau projet Microsoft Silverlight. En mode Code, recherchez le code suivant, puis supprimez la barre oblique de fermeture (/).

    <Grid x:Name="LayoutRoot" Background="White"/>

  2. Copiez et collez ensuite le code suivant dans votre nouveau projet, après le code que vous avez localisé à l’étape 1.

    <Grid Height="70" Width="120">
<Rectangle 
   x:Name="contentarea" Fill="#FF333333" RadiusX="5" RadiusY="5" 
   Height="20" VerticalAlignment="Top" />
<Rectangle 
   Fill="#FF666666" RadiusX="3" RadiusY="3" HorizontalAlignment="Right" 
   Width="14" Height="18" Margin="0,1,1,0" VerticalAlignment="Top" />
<Path 
   Fill="White" Stretch="Fill" Width="8" Height="5" 
   Data="M6,12 L2,16 L-1,12 L-4,12 L1,17 L3,17 L9,12 z" Margin="0,8,4,0" 
   HorizontalAlignment="Right" VerticalAlignment="Top" />
<Rectangle 
   x:Name="popupbackground" Fill="#FF333333" Stroke="#FF4C4C4C" 
   Margin="0,20,0,0" />
<TextBlock Margin="5,25,0,0" Foreground="White" Text="Lorem"/>
<TextBlock Margin="5,46,0,0" Foreground="White" Text="Ipsum"/>
</Grid>

  3. Ajoutez une balise de fermeture Grid (</Grid>) après le code que vous venez de coller.

  4. Dans le panneau Objets et chronologie, cliquez avec le bouton droit sur Grille, puis cliquez sur Créer un contrôle. Dans la boîte de dialogue Créer un contrôle, cliquez sur ComboBox, puis cliquez sur OK.

  5. Dans le panneau Objets et chronologie, appuyez sur Ctrl, puis cliquez sur les deux éléments TextBlock. Cliquez avec le bouton droit sur un des deux éléments sélectionnés, puis cliquez sur Couper. Cliquez sur **Rétablir l’étendue à **JJ170183.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(fr-fr,VS.120).png, puis cliquez sur Coller. Dans la catégorie Disposition du panneau Propriétés, cliquez sur Options avancées à côté de Width puis cliquez sur Réinitialiser. Répétez l’opération pour Hauteur.

  6. Dans le panneau Objets et chronologie, cliquez avec le bouton droit sur ComboBox, cliquez sur Modifier le modèle, puis cliquez sur Modifier le modèle actuel.

  7. Dans le panneau Objets et chronologie, cliquez avec le bouton droit sur contentarea, puis cliquez sur Grouper, puis sur Grille.

  8. Cliquez avec le bouton droit sur Grille, cliquez sur Créer une partie de ComboBox, puis cliquez sur ContentPresenterBorder.

  9. Dans le panneau Parties, double-cliquez sur ContentPresenter. Dans le panneau Propriétés, dans la catégorie Disposition, définissez Margin sur les valeurs suivantes :

    • Left   5

    • Right   5

    • Top   1

    • Bottom   0

  10. Dans le panneau Objets et chronologie, cliquez sur Rectangle, appuyez sur Ctrl et cliquez sur Tracé. Cliquez avec le bouton droit sur la sélection, cliquez sur Grouper, puis cliquez sur Grille.

  11. Dans le panneau Objets et chronologie, cliquez avec le bouton droit sur Grille, puis cliquez sur Créer une partie de ComboBox puis cliquez sur DropDownToggle. Cliquez sur OK.

  12. Cliquez avec le bouton droit sur Tracé, puis cliquez sur Couper. Cliquez sur **Rétablir l’étendue à **JJ170183.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(fr-fr,VS.120).png, cliquez DropDownToggle, et appuyez sur CTRL+V pour coller.

  13. Dans le panneau Objets et chronologie, sélectionnez Grille. Dans le panneau Parties, double-cliquez sur Popup.

  14. Dans le panneau Outils, double-cliquez sur Grille. Dans la catégorie Disposition du panneau Propriétés, cliquez sur Options avancées à côté de Width puis cliquez sur Réinitialiser. Répétez l’opération pour Hauteur.

  15. Dans le panneau Objets et chronologie, cliquez sur popupbackground, puis faites-le glisser sur la grille que vous venez de créer. Dans la catégorie Disposition du panneau Propriétés, cliquez sur Options avancées à côté de Width puis cliquez sur Réinitialiser. Répétez l’opération pour Height, HorizontalAlignment, VerticalAlignment et Margin.

  16. Dans le panneau Objets et chronologie, faites glisser ScrollViewer sur la nouvelle grille. Dans la catégorie Disposition du panneau Propriétés, cliquez sur Options avancées à côté de Width puis cliquez sur Réinitialiser. Répétez l’opération pour Height, HorizontalAlignment, VerticalAlignment et Margin.

  17. Cliquez sur **Rétablir l’étendue à **JJ170183.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(fr-fr,VS.120).png. Dans le panneau Propriétés, dans la catégorie Disposition, définissez Height sur 20.

  18. Générez votre projet (Ctrl+Shift+B) et testez-le en appuyant sur F5.

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

Références

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

Voir aussi

Concepts

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

SimpleComboBox et SimpleComboBoxItem (prise en charge de WPF dans Blend)

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