Partager via


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 animée lors d’un clic sur le bouton en ajoutant un déclencheur d’événements 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 :

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 Cc294749.0d8b8d29-1af9-418f-8741-be3097d76eab(FR-FR,Expression.30).png 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 Cc294749.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(FR-FR,Expression.30).png génère un objet TracéCc294749.e1882d38-c773-4abe-a2b9-10abd293e119(FR-FR,Expression.30).png. L’icône ImageCc294749.adb61060-da5f-4279-8c0d-3681bfeb145c(FR-FR,Expression.30).png apparaît dans le panneau Outils après sélection du contrôle Image dans le panneau Composants.

Du panneau Outils à la planche graphique

Cc294749.abd88d9d-ab6c-444e-8037-469cdcb5586a(FR-FR,Expression.30).png

Cc294749.25182a96-9a69-478a-9cfe-5b360e6a9bea(FR-FR,Expression.30).png

Objet tracé nommé Path_40, représentant la forme de l’échantillon de couleurs orange.

Cc294749.eb6fad93-f17e-4f62-a926-8c8651862891(FR-FR,Expression.30).png

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.

Cc294749.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(FR-FR,Expression.30).png

Objet rectangle nommé Rectangle_44, qui représente l’une des puces de peinture sur l’échantillon de couleur.

Cc294749.a5d608f2-bba2-48c5-8b15-2c115db86acc(FR-FR,Expression.30).png

Objet image nommé photo_bathroom, qui représente l’image d’arrière-plan de la pièce.

Cc294749.f0c1ff71-7814-42ba-806b-7ea92d616e69(FR-FR,Expression.30).png

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 Cc294749.ae750268-92e8-403a-9e07-b662da4e9e1e(FR-FR,Expression.30).png

Ellipse Cc294749.d7a04618-e35a-44f9-b78c-1f22e38016c1(FR-FR,Expression.30).png

Tracé (généré par les outils de dessin Ligne Cc294749.eb618397-5283-48be-8396-3449be7b6fbf(FR-FR,Expression.30).png, Plume Cc294749.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(FR-FR,Expression.30).png et Crayon Cc294749.509dc167-734f-46c9-b012-987ee63450cd(FR-FR,Expression.30).png)

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 (canevas) Cc294749.95e40288-f7a6-4ddc-9d6a-68d0aa46d621(FR-FR,Expression.30).png

Dock (ancrage) Cc294749.db9f1ff5-6bca-441d-b289-c6781a478a5b(FR-FR,Expression.30).png

Grid (grille) Cc294749.a87ee957-7fbf-4135-a6ab-6de7e63160aa(FR-FR,Expression.30).png

Stack (empilement) Cc294749.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(FR-FR,Expression.30).png

Wrap (renvoi à la ligne) Cc294749.91486eda-6173-4ce8-9610-4f296dcb83d7(FR-FR,Expression.30).png

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 (zone de texte) Cc294749.343296b4-5c7d-4145-84cc-91b08ba67a1b(FR-FR,Expression.30).png

TextBlock (bloc de texte) Cc294749.42165963-00f7-4a33-abcd-b0849edebada(FR-FR,Expression.30).png

RichTextBox (zone de texte enrichi) Cc294749.0ee48635-456b-4ebd-b8e4-ce3658417b8e(FR-FR,Expression.30).png

Label (étiquette) Cc294749.a27042f1-4067-4239-b99a-8b2e4c223de0(FR-FR,Expression.30).png

PasswordBox (zone de mot de passe) Cc294749.31e4dc7e-8cf4-4014-83e4-9b50ec6ee663(FR-FR,Expression.30).png

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 et Modifier un style.

Button Cc294749.05df1779-a68f-436b-b834-a91b7995a3ec(FR-FR,Expression.30).png

ListBox Cc294749.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(FR-FR,Expression.30).png

Menu Cc294749.015a263c-0b2b-4253-ac57-b86fcb8c9591(FR-FR,Expression.30).png

RadioButton Cc294749.33646a24-f5a1-4b74-9496-e0aaddb922c6(FR-FR,Expression.30).png

CheckBox Cc294749.91bc7bff-27d2-4dfe-93ab-844f2952186f(FR-FR,Expression.30).png

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 Cc294749.be354518-c54c-4f86-9c57-0b4a9d384b3e(FR-FR,Expression.30).png

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 incluant une image et du texte, il suffit de faire glisser un panneau de disposition StackPanel, 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 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 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 Cc294749.adb61060-da5f-4279-8c0d-3681bfeb145c(FR-FR,Expression.30).png

ScrollBar Cc294749.6513a026-499e-4296-8a67-7558b466bd33(FR-FR,Expression.30).png

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 Tracer un contrôle de contenu.

CheckBox Cc294749.91bc7bff-27d2-4dfe-93ab-844f2952186f(FR-FR,Expression.30).png

RadioButton Cc294749.33646a24-f5a1-4b74-9496-e0aaddb922c6(FR-FR,Expression.30).png

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 Tracer un contrôle d'éléments.

ComboBox Cc294749.b174a511-dd12-4a45-a986-034de7693de9(FR-FR,Expression.30).png

ListBox Cc294749.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(FR-FR,Expression.30).png

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 Cc294749.f13847cd-7fdf-4757-a648-d5ece98fcaea(FR-FR,Expression.30).png

TabItem

MenuItem Cc294749.82c89430-1209-4aa1-b534-cf1cedac74c7(FR-FR,Expression.30).png

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 Définition d'un style pour un contrôle prenant en charge les modèles.