Présentation générale des contrôles

Microsoft Expression Blend fournit une liste complète des contrôles qui permettent de concevoir une interface utilisateur souple pour vos applications Windows Presentation Foundation (WPF) et Silverlight 2.

Remarque :
Pour obtenir la liste des contrôles qui sont disponibles dans les projets Microsoft Silverlight 1.0, voir la section « contrôles » de la Vue d’ensemble de Silverlight 1.0.

Expression Blend vous permet d’aller au-delà de la simple utilisation de contrôles WPF par défaut ou système. Vous pourrez personnaliser et styliser les contrôles selon vos préférences d’exécution. Vous pouvez également, à l’aide des ressources d’Expression Blend, conférer à vos contrôles personnalisés un aspect unique, attrayant, pour différencier votre application des autres afin de créer une expérience spécifique ou pour élaborer une interface utilisateur cohérente dans l’ensemble de vos applications. L’un des plus grands avantages du modèle d’édition de contrôles utilisé dans Expression Blend est de permettre aux concepteurs de définir l’aspect d’une application en même temps que les développeurs écrivent la logique de programmation. Comme un concepteur peut créer une conception directement, celle-ci ne sera pas perdue lors de la conversion de la maquette à la mise en œuvre.

Qu’est-ce que les contrôles ?

Les contrôles (ou éléments de conception d’interface utilisateur) sont les éléments visibles d’une application. Les contrôles (comme les boutons ou les listes d’éléments sélectionnables) permettent aux utilisateurs d’entrer en interaction avec votre application. Si vous comprenez les contrôles auxquels vous avez accès dans Expression Blend et comment les personnaliser, vous pourrez facilement définir avec précision l’aspect et le comportement général de votre application

Expression Blend vous permet d’utiliser visuellement des contrôles sur la planche graphique et de configurer leur apparence et leur comportement dans le Panneau Propriétés et le Panneau Interaction. Par exemple, vous pouvez ajouter un contrôle Button à la planche graphique, changer son aspect en modifiant des valeurs dans le panneau Propriétés, puis démarrer une chronologie animée lors d’un clic sur le bouton en ajoutant un déclencheur d’événements pour le bouton dans le panneau Interaction.

Outre ces actions simples, vous pouvez également effectuer les interventions suivantes sur un contrôle :

• Convertir une propriété (comme une couleur de pinceau) en une ressource que vous pouvez appliquer à d’autres contrôles pour créer un aspect unique et cohérent pour votre application. Pour obtenir un exemple, voir Créer une ressource.

• Créer un nouveau modèle et un nouveau style pour un contrôle qui définissent son aspect et son comportement, conférant ainsi à votre application un aspect unique et cohérent. Les modèles et les styles peuvent inclure des déclencheurs, et ils peuvent utiliser des ressources pour définir des propriétés. Pour plus d’informations, voir Styles and templates ci-après. Pour obtenir des exemples WPF, voir Créer une ressource de style et Créer ou modifier un modèle de contrôle. Pour obtenir des exemples Silverlight 2, voir Créer un modèle réutilisable pour un contrôle système et Créer une apparence pour un contrôle dans un projet Silverlight 2.

• Ajouter des animations et de l’interactivité à votre contrôle. Pour obtenir un exemple, voir Créer une animation simple.

• Programmer un comportement plus complexe pour votre contrôle dans des méthodes de gestionnaire d’événements, dans un fichier code-behind. Pour obtenir un exemple WPF, voir Créer une nouvelle méthode de gestionnaire d’événements. Pour obtenir un exemple Silverlight 2, voir Charger une nouvelle page dynamiquement dans votre application Silverlight 2.

• Concevoir vos propres contrôles personnalisés et les utiliser dans Expression Blend. Pour obtenir des exemples WPF, voir Essayez ! créer un contrôle WPF personnalisé et Essayez ! Créer un contrôle utilisateur WPF. Pour obtenir un exemple Silverlight 2, voir Créer un contrôle utilisateur dans votre projet Silverlight 2.

Haut de la page

Catégories de contrôles

Dans Expression Blend, vous pouvez utiliser différents types de contrôles pour concevoir rapidement une application visuellement unique.

Tous les contrôles sont disponibles à partir de la Bibliothèque de composants en cliquant sur le bouton Bibliothèque de composants  au bas de la Boîte à outils. La boîte à outils se trouve du côté gauche d’Expression Blend. Lorsque vous sélectionnez un élément d’interface utilisateur à partir de la Bibliothèque de composants, l’icône pour cet élément apparaît au-dessus du bouton Bibliothèque de composants, ce qui vous permet de facilement sélectionner de nouveau cet élément ultérieurement. Les éléments d’interface utilisateur les plus courants sont déjà affichés au-dessus du bouton Bibliothèque de composants afin que vous puissiez les localiser rapidement.

L’illustration suivante montre la planche graphique après que certains éléments d’interface utilisateur courants ont été ajoutés en tant qu’objets. L’outil Plume  génère un tracé . L’icône Image  apparaît dans la Boîte à outils après sélection du contrôle Image dans la Bibliothèque de composants.

De la boîte à outils à la planche graphique

	Objet tracé nommé Path_40, représentant la forme de l’échantillon de couleurs orange.		Objet bouton sans nom, qui représente le bouton dans l’application qui est intitulé « Reset Image ». Sous Objets et chronologie, le trait de soulignement (_) sert à identifier la touche d’accès rapide pour le bouton.
	Objet rectangle nommé Rectangle_44, qui représente l’une des puces de peinture sur l’échantillon de couleur.		Objet image nommé photo_bathroom, qui représente l’image d’arrière-plan de la pièce.
	Bloc sans nom identifié par le texte qu’il contient, qui représente le titre de l’application, « Color Swatch Sample Pack 1 ».

Pour choisir le contrôle à utiliser, associez les contrôles aux catégories suivantes :

Catégorie	Utilisation	Exemples
Formes (disponibles dans les projets Silverlight 1.0)	Servent à créer des éléments visuels élaborés à l’aide d’ellipses, de lignes et de rectangles, dont l’aspect peut être simple ou complexe et coloré, selon vos préférences. Pour plus d’informations, voir Dessin de formes et de tracés. Vous pouvez personnaliser l’aspect et le comportement de ces éléments dans Expression Blend à l’aide du panneau Propriétés, ou de simples styles (sans modèles). Pour plus d’informations, voir Modifier un style.	Rectangle  Ellipse  Tracé (généré par les outils de dessin Ligne , Plume  et Crayon )
Panneaux de disposition	Utilisé comme conteneur pour d’autres éléments d’interface utilisateur, pour spécifier leur position et comportement de redimensionnement de fenêtre. Contrairement à la plupart des éléments d’interface utilisateur, certains panneaux de disposition (par exemple la grille) peuvent contenir plusieurs éléments enfants. L’organisation et la disposition de la conception de votre application s’en trouvent facilitées. Pour plus d’informations, voir Disposition. Vous pouvez personnaliser l’aspect et le comportement de ces éléments dans Expression Blend à l’aide du panneau Propriétés, ou de simples styles (sans modèles). Pour plus d’informations, voir Modifier un style.	Canvas (canevas)  (disponible dans les projets Silverlight 1.0) Dock (ancrage)  Grid (grille)  Stack (empilement)  Wrap (renvoi à la ligne)
Document/Texte	Sert à définir la présentation d’un document et la mise en forme d’un texte. Pour plus d’informations, voir Vue d’ensemble du texte et de la typographie. Vous pouvez personnaliser l’aspect et le comportement de ces éléments dans Expression Blend à l’aide du panneau Propriétés, ou de simples styles (sans modèles). Pour plus d’informations, voir Créer ou modifier un modèle de contrôle et Modifier un style.	TextBox (zone de texte)  TextBlock (bloc de texte)  (disponible dans les projets Silverlight 1.0) RichTextBox (zone de texte enrichi)  Label (étiquette)  PasswordBox (zone de mot de passe)
des contrôles.	Permettent à l’utilisateur d’entrer en interaction avec votre application. Vous pouvez personnaliser l’aspect et le comportement de ces éléments dans Expression Blend à l’aide du panneau Propriétés, ou de simples styles (sans modèles). Pour plus d’informations, voir Créer ou modifier un modèle de contrôle et Modifier un style.	Button  ListBox Menu  RadioButton CheckBox
Décorateurs	Servent à appliquer des effets à un autre élément. Les décorateurs peuvent inclure un élément enfant spécifique, généralement l’élément dont ils déterminent l’aspect. En général, ces éléments sont utilisés dans des modèles qui sont appliqués à d’autres contrôles, par exemple l’élément ButtonChrome dans le modèle d’un bouton. Vous pouvez personnaliser l’aspect et le comportement des éléments eux-mêmes d’un décorateur à l’aide du panneau Propriétés, ou de simples styles (sans modèles). Pour plus d’informations, voir Modifier un style.	Border  ButtonChrome Viewbox

Pour plus d’informations sur les caractéristiques de ces types de contrôle, voir la rubrique sur les familles de types dans la section Windows Presentation Foundation de MSDN.

Haut de la page

Création et modification de contrôles

Vous pouvez ajouter un contrôle à la planche graphique en double-cliquant sur son icône dans la boîte à outils, ou en sélectionnant son icône dans la boîte à outils, puis en utilisant la souris pour dessiner l’élément sur la planche graphique. Pour plus d’informations, voir les rubriques de procédures répertoriées dans Contrôles. En double-cliquant sur un contrôle dans la Bibliothèque de composants, vous l’insérez dans l’élément actif courant avec la taille par défaut. Ce procédé est pratique car dans de nombreux cas la taille par défaut est réglée à la valeur Auto et le contrôle se dimensionne correctement à chaque ajout de contenu.

Une fois que vous avez ajouté un contrôle à la planche graphique dans Expression Blend, il devient un objet dans votre application. Vous pouvez modifier les objets de nombreuses manières en utilisant les poignées situées sur les objets pour les redimensionner, les déplacer, les faire pivoter, les retourner ou les incliner, ou en utilisant le panneau Propriétés dans lequel vous pouvez entrer des valeurs précises de taille, de position et de rotation. Pour plus d’informations, voir Ajouter ou modifier un objet, ou les rubriques de procédures qui sont répertoriées dans Utiliser des objets et des propriétés.

Expression Blend est unique de par la manière dont vous pouvez manipuler des contrôles. Vous pouvez placer n’importe quel autre contrôle, panneau ou élément de forme dans un contrôle. Cela permet notamment de combiner plusieurs contrôles. Par exemple, si vous souhaitez créer un bouton incluant une image et du texte, vous placez simplement un contrôle de panneau d’empilement dans le bouton, puis ajoutez un contrôle d’image et un contrôle de texte dans le panneau d’empilement.

Les contrôles respectent certaines règles d’héritage. Par exemple, certains contrôles agissent comme un élément parent et peuvent avoir des éléments enfants (contenu) imbriqués. D’autres contrôles ne prennent pas en charge les éléments enfants. Expression Blend essaie toujours d’ajouter des éléments enfants à la racine (ou au panneau de premier plan) à l’intérieur d’un document. Cela signifie que l’élément LayoutRoot est considéré comme étant la racine lors du début d’un travail dans Expression Blend et sera, par défaut, la destination de tous les éléments enfants insérés dans le document. Si vous souhaitez ajouter des éléments enfants à un autre contrôle dans un document, vous devez activer ce contrôle en double-cliquant sur son nom sous Objets et chronologie. Une mise en surbrillance jaune identifie l’élément activé afin que vous sachiez où un nouveau contrôle sera ajouté.

Expression Blend prend en charge les différents types de contrôles suivants, classés par catégories selon le type d’héritage qu’ils prennent en charge :

Catégorie	Description	Exemples
Contrôles simples	Les contrôles simples sont composés des contrôles proprement dits et des propriétés pouvant y être définies. Les contrôles simples ne prennent pas de contenu. En d’autres mots, ils ne peuvent pas contenir d’éléments enfants.	Image  (disponible dans les projets Silverlight 1.0) ScrollBar
Contrôles de contenu	Les contrôles de contenu peuvent prendre un autre élément (ou peuvent afficher une chaîne sous forme de texte pour des scénarios simples). Les contrôles de contenu ont une propriété Content. Cela signifie qu’ils peuvent contenir un contenu spécifique comme une chaîne. En outre, les contrôles de contenu peuvent contenir un autre élément, par exemple un panneau de disposition. Pour obtenir un exemple, voir la rubrique Créer un contrôle de contenu.	CheckBox  RadioButton
Contrôles d’éléments	Les contrôles d’éléments incluent une collection d’éléments enfants. Vous pouvez ajouter manuellement des éléments à la propriété Items collection, ou vous pouvez lier une collection de données à la propriété ItemsSource. Les contrôles d’éléments exposent des collections d’éléments et n’ont ni propriété Content ni propriété Header. Pour obtenir un exemple, voir la rubrique Créer un contrôle d’éléments.	ComboBox  ListBox
Contrôles avec en-tête	Les contrôles avec en-tête incluent un élément enfant d’en-tête qui nomme le contrôle. Les contrôles avec en-tête peuvent inclure un contenu (contrôle de contenu avec en-tête), ou une collection d’éléments (contrôle d’éléments avec en-tête). Pour obtenir un exemple, voir la rubrique Créer un contrôle avec en-tête.	TabControl  TabItem MenuItem

Pour plus d’informations sur les caractéristiques de ces types de contrôle, voir Modèles de contenu dans la section Windows Presentation Foundation de MSDN.

Haut de la page

Styles et modèles

Comme cela a déjà été mentionné dans la rubrique Présentation générale des contrôles, vous pouvez personnaliser des contrôles de nombreuses manières, notamment en créant des modèles et des styles pour les contrôles, conférant ainsi à votre application un aspect unique et cohérent. Les modèles et les styles définissent respectivement les composants d’un contrôle et le comportement par défaut de ce dernier. Vous créez des modèles et des styles en effectuant des copies des styles et des modèles système par défaut d’un contrôle (parce que vous ne pouvez pas modifier des styles et des modèles système). La modification des modèles et des styles permet de créer facilement de nouveaux contrôles dans le mode Création d’Expression Blend, sans devoir utiliser de code. Pour plus d’informations, voir Vue d'ensemble des styles et modèles.

Haut de la page