Sélection et utilisation de contrôles interactifs

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 Microsoft Silverlight.

Expression Blend vous permet d’aller au-delà de la simple utilisation de contrôles 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 Objets et chronologie. 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 d’animation lors d’un clic sur le bouton en ajoutant un comportement depuis le panneau Composants.

Pour plus d’informations, voir Panneau Propriétés et Panneau Objets et chronologie.

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 la section « Styles et modèles » ci-après.

  Pour plus d’informations, voir les rubriques suivantes :

  • Créer un style

  • Créer ou modifier un modèle

  • Créer un modèle réutilisable pour appliquer un style à un contrôle système

  • Créer un habillage pour les contrôles de votre projet

• 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 plus d’informations, voir Créer une nouvelle méthode de gestionnaire d’événements et Essayez ! Charger une nouvelle page dynamiquement dans votre application Silverlight.

• Concevoir vos propres contrôles personnalisés et les utiliser dans Expression Blend.

  Pour plus d’informations, voir les rubriques suivantes :

  • Créer un contrôle utilisateur dans votre projet

  • Créer un contrôle utilisateur vide

  • Essayez ! Créez un contrôle avec des propriétés personnalisées

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 dans le panneau Composants en cliquant sur Composants  au bas du panneau Outils. Le panneau Outils se trouve du côté gauche de Expression Blend. Lorsque vous sélectionnez un élément d’interface utilisateur à partir du panneau Composants, l’icône pour cet élément apparaît sous le bouton 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 sous le bouton Composants afin que vous puissiez les localiser rapidement.

Pour plus d’informations, voir Panneau Composants et Panneau Outils.

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 objet Path. L’icône Image s’affiche dans le panneau Outils après la sélection du contrôle Image dans le panneau Composants.

Du panneau 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 ». Dans le panneau 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	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   Path (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 Organisation des objets. 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   Dock   Grid   Stack   Wrap
Document/Texte	Sert à définir la présentation d’un document et la mise en forme d’un texte. Pour plus d’informations, voir Dessiner du texte. 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 et Modifier un style.	TextBox   TextBlock   RichTextBox   Label   PasswordBox
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 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 à propos des caractéristiques de ces types de contrôle, voir la rubrique Familles de types  dans la section Windows Presentation Foundation  de MSDN.

Création et modification de contrôles

Vous pouvez ajouter un contrôle à la planche graphique en double-cliquant sur son icône dans le panneau Outils, ou en sélectionnant son icône dans le panneau 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 sous Sélection et utilisation de contrôles interactifs.

En double-cliquant sur un contrôle dans le panneau 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 contenant une image et du texte, il suffit de faire glisser un panneau de disposition StackPanel sur le bouton, puis d’ajouter un contrôle d’image et de texte dans le panneau de disposition StackPanel .

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 de la première opération 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 dans le panneau 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   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 possèdent 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 Tracer 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é de collection Items , ou vous pouvez lier une collection de données à la propriété ItemsSource . Les contrôles d’éléments indiquent des collections d’éléments et ne possèdent ni propriété Content ni propriété Header . Pour obtenir un exemple, voir la rubrique Tracer 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 Tracer 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 .

Styles et modèles

Comme cela a déjà été mentionné, vous pouvez personnaliser les 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 Application d’un style à un contrôle prenant en charge les modèles.

Copyright © 2011 Microsoft Corporation. Tous droits réservés.