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

Article
10/09/2014

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

Blend for Visual Studio est fourni avec de nombreux contrôles Microsoft Silverlight que vous pouvez utiliser pour une formidable expérience utilisateur. Vous pouvez également télécharger des contrôles à partir de sources fiables.

Pour plus d'informations, consultez Import a custom control by adding a reference (Blend).

Si vous trouvez un contrôle qui correspond à vos besoins mais ne ressemble pas à ce que vous désirez, et si ce contrôle prend en charge les modèles, vous pouvez modifier les modèles de ce contrôle pour en changer l’aspect.

Pour simplifier les choses, vous pouvez vous concentrer sur votre conception en commençant par tout dessiner sur la planche graphique, en utilisant des outils de dessin, et en important des conceptions graphiques et d’autres composants. Lorsque vous avez terminé, vous pouvez utiliser la commande Créer un contrôle pour convertir vos objets en un modèle pour tous les contrôles.

Liaison de modèle

Les contrôles possèdent des propriétés auxquelles il est possible de lier les objets d’un modèle. Cette opération s’appelle liaison de modèle. En liant des parties du modèle à un contrôle, vous créez des paramètres pour le modèle en toute efficacité. Par exemple, au lieu de dire « Cet objet Rectangle est bleu », vous dites, « Cet objet Rectangle est de la même couleur que l’objet Background du contrôle ». Par conséquent, lorsque vous appliquez le modèle à un contrôle dont les propriétés Background sont différentes, le résultat est un modèle de couleur différente.

Pour lier par modèle une propriété, sélectionnez un objet dans un modèle, cliquez sur Options avancées dans le panneau Propriétés, puis choisissez une propriété dans Liaison de modèle.

Certaines propriétés, telles que OpacityMask, Font, FontSize, LayoutTransform et RenderTransform, n’ont pas besoin d’être liées à un modèle. Elles s’appliquent automatiquement aux objets dans les modèles.

Propriétés Content et Header

Plusieurs contrôles contiennent une propriété Content (Button, CheckBox, RadioButton, par exemple) ou une propriété Header (TabItem et MenuItem). Les propriétés Content et Header peuvent être utilisées pour afficher le contenu de tout type.

Pour afficher tout type de contenu

Si vous voulez afficher tout type de contenu (pas simplement du texte), vous avez besoin d’un objet ContentPresenter dans votre modèle avec une propriété Content (ou Header) liée par modèle à la propriété Content (ou Header) du contrôle. Si vous utilisez Créer un contrôle pour transformer une conception graphique en modèle, Blend ajoute un objet ContentPresenter au modèle. Si vous utilisiez un objet TextBlock pour afficher du contenu, supprimez-le après avoir transformé la conception graphique en contrôle. L’objet ContentPresenter affiche le contenu précédemment affiché dans l’objet TextBlock.

Pour afficher du texte

Si vous souhaitez afficher uniquement du texte, vous pouvez utiliser un objet TextBlock plutôt qu’un objet ContentPresenter. Placez l’objet TextBlock dans le modèle, puis liez par modèle la propriété Text de l’objet TextBlock à la propriété Content (ou Header) de l’objet Button. Si vous utilisez Créer un contrôle pour transformer la conception graphique en modèle, et si vous utilisiez un objet TextBlock pour afficher du contenu, supprimez l’objet ContentPresenter qu’Blend a ajouté au modèle. Lorsque vous ajoutez du texte à la propriété Content (ou Header) d’un contrôle avec ce style appliqué, l’objet TextBlock affiche ce texte.

Créer un ContentControl

Lorsque vous utilisez Créer un contrôle pour transformer une conception graphique contenant un objet TextBlock en modèle d’objet ContentControl (un bouton, par exemple), Blend effectue les opérations suivantes :

Place un objet ContentPresenter dans le modèle à la place de l’objet TextBlock.
Copie les propriétés Disposition de l’objet TextBlock vers l’objet ContentPresenter.
Copie les propriétés Typography de l’objet TextBlock vers le style du contrôle.
Copie la propriété Text de l’objet TextBlock vers l’instance de la propriété Content du contrôle.

Créer une TextBox

Lorsque vous utilisez Créer un contrôle pour transformer une conception graphique contenant un objet TextBlock en modèle d’objet TextBox, Blend effectue les opérations suivantes :

Place un objet ScrollViewer représentant la partie ContentElement dans le modèle à la place de l’objet TextBlock.
Copie les propriétés Disposition de l’objet TextBlock vers la partie ContentElement.
Copie les propriétés Typography de l’objet TextBlock vers le style TextBox.
Copie la propriété Text de l’objet TextBlock vers l’instance du contrôle TextBox.

États visuels

Les états visuels inclus dans un groupe d’états s’excluent mutuellement. Toutefois, les états inclus dans un groupe sont indépendants de ceux inclus dans un autre groupe. Cela signifie qu’il est possible d’appliquer un état de chaque groupe à tout moment sans créer de conflit.

La modification d’une propriété d’un objet dans plusieurs états inclus dans le même groupe est une pratique courante. Par exemple, vous pouvez remplacer la propriété Fill de l’objet Rectangle par les états MouseOver, Pressed et Disabled. Cela fonctionne parce qu’un seul état du groupe d’états CommonStates est appliqué en même temps. Toutefois, la modification de la propriété d’un objet dans plusieurs groupes d’états annule la nature indépendante des groupes d’états et engendre des conflits lorsque plusieurs états essaient de définir la propriété du même objet en même temps. Blend affiche un avertissement lorsqu’un conflit entre états est détecté.

Important

Chaque nom d’état doit être unique au sein d’un modèle, même entre les groupes d’états.

État visuel Normal

Chaque groupe d’états possède un état par défaut. Par exemple, CommonStates possède l’état Normal et CheckedStates l’état Unchecked. Il est conseillé de ne pas modifier l’état par défaut lorsque vous modifiez les propriétés d’un objet. Par exemple, pour une case à cocher, la coche et les rectangles sont vides (masqués) dans Base, mais affichés dans Checked (pour la coche) et dans Focused (pour le rectangle).

N’oubliez pas que Base n’est pas un état. C’est pourquoi vous ne pouvez pas définir ni contrôler des transitions depuis et vers Base. Par exemple, vous ne pouvez pas définir une transition de Base à MouseOver car Base n'est pas un état. Base représente le modèle dans sa forme de base, sans état appliqué. Seuls les états doivent être pris en compte lors de la définition de vos transitions.

Lorsque vous créez vos propres modèles de contrôles, vous devez définir un état normal dans chaque groupe d’états et le définir par défaut lors du chargement du contrôle correspondant. Si le contrôle (un Button, par exemple) n’est pas dans son état normal lors de son chargement, la transition (depuis l’état Normal vers l’état MouseOver, par exemple) ne s’exécute pas.