Vue d'ensemble des concepteurs WPF et Silverlight

Les concepteurs WPF et Silverlight prennent en charge la conception visuelle pour la création d'applications WPF et Silverlight. Vous pouvez générer des interfaces utilisateur pour vos applications en faisant glisser des contrôles à partir de la boîte à outils et en définissant des propriétés dans la fenêtre Propriétés. En outre, vous pouvez directement modifier le code XAML dans l'éditeur XAML. L'illustration suivante montre les concepteurs WPF et Silverlight et certaines de leurs fenêtres.

Lorsque vous démarrez le concepteur WPF ou Silverlight pour la première fois, les fenêtres Sources de données et Structure du document sont réduites sur le côté gauche de Visual Studio. Si vous affichez et épinglez les onglets sur la gauche, vous visualisez la vue précédente, qui constitue une disposition utile de l'aire de conception.

Cette rubrique contient les sections suivantes :

• Mode Design

• mode XAML

• Fenêtre Propriétés

• Fenêtre Sources de données

• Structure du document, fenêtre

• Génération d'interfaces utilisateur complètes et interactives

• Collaboration avec Expression Blend

Mode Design

Le mode Design fournit une aire de conception visuelle pour la génération de vos contrôles et applications WPF et Silverlight. Elle contient un rendu du code XAML actuellement dans la vue XAML. Lorsque vous modifiez des contrôles sur l'aire de conception, le mode XAML se met à jour pour refléter les modifications apportées. Le mode Design fournit de nombreuses fonctionnalités permettant de réorganiser les contrôles dans la fenêtre ou la page de votre application WPF. L'illustration suivante montre quelques fonctionnalités du mode Design.

Zoom

Le contrôle Zoom vous permet de dimensionner l'aire de conception. Vous pouvez effectuer un zoom de 10 % à 20x. Votre paramètre de zoom est enregistré dans le fichier .suo de la solution.

Panoramique

Lorsque l'aire de conception fait l'objet d'un zoom, et que des barres de défilement horizontale et verticale apparaissent, vous pouvez effectuer un panoramique pour visualiser des parties de l'aire de conception qui figurent en dehors de l'écran. Appuyez sur la barre d'espace et maintenez-la enfoncée, puis faites glisser l'aire de conception à laquelle appliquer le panoramique.

Ajuster à la fenêtre

Le bouton Ajuster à la fenêtre vous permet de dimensionner l'aire de conception en fonction de l'écran disponible en mode Design. Cette fonction s'avère utile si vous avez effectué un zoom avant ou arrière très puissant.

Rails de grille

Les rails de grille permettent de gérer les lignes et les colonnes dans un contrôle Grid. Vous pouvez créer et supprimer des colonnes et des lignes, ainsi qu'ajuster leurs largeurs et hauteurs relatives. Pour plus d'informations, consultez Comment : ajouter des lignes et des colonnes à une grille.

Quadrillage

Le quadrillage sert à contrôler la largeur et la hauteur des lignes et colonnes d'un contrôle Grid. Vous pouvez ajouter une nouvelle colonne ou ligne en cliquant sur les rails situés au-dessus et à gauche de Grid. Pour plus d'informations, consultez Comment : ajouter des lignes et des colonnes à une grille.

Indicateurs de quadrillage

Un indicateur de quadrillage s'affiche sous la forme d'un triangle sur le rail de grille. Lorsque vous faites glisser un indicateur de quadrillage ou le quadrillage lui-même, la largeur ou la hauteur des colonnes ou des lignes adjacentes se mettent à jour en fonction du déplacement de la souris. Pour plus d'informations, consultez Comment : ajouter des lignes et des colonnes à une grille.

Poignée de déplacement

Une poignée de déplacement apparaît dans l'angle supérieur gauche d'un contrôle de panneau sélectionné et vous permet de déplacer ce panneau. Cliquez sur la poignée de déplacement et faites glisser le contrôle vers la position souhaitée sur l'aire de conception. Pour plus d'informations, consultez Comment : sélectionner et déplacer des éléments sur l'aire de conception.

Poignées de redimensionnement

Des poignées de redimensionnement apparaissent sur les contrôles sélectionnés et vous permettent de redimensionner le contrôle. Lorsque vous redimensionnez un contrôle, les valeurs de largeur et de hauteur s'affichent généralement pour permettre de déterminer la taille du contrôle avec précision.

Lignes de marge

Les marges représentent la quantité d'espace fixe entre le bord d'un contrôle et le bord du conteneur associé. Définissez les marges d'un contrôle en cliquant sur ses lignes de marge. Pour plus d'informations, consultez Comment : définir des marges pour un contrôle dans le Concepteur WPF.

Stubs de marge

Un stub de marge apparaît sur un contrôle sélectionné lorsque sa marge a la valeur 0. Cliquez sur le stub de marge pour affecter à une distance de marge le bord correspondant du conteneur. Pour plus d'informations, consultez Comment : définir des marges pour un contrôle dans le Concepteur WPF.

Lignes d'alignement (SnapLines)

Les lignes d'alignement vous aident à aligner des contrôles les uns par rapport aux autres. Si les lignes d'alignement sont activées, lorsque vous faites glisser un contrôle par rapport à d'autres contrôles, les lignes d'alignement s'affichent lorsque le bord et le texte de contrôles sont alignés horizontalement ou verticalement. Pour plus d'informations, consultez Comment : aligner à la fois sur les lignes de base du texte et les marges.

Barre d'informations

La barre d'informations apparaît en haut du mode Design et affiche des informations à propos des problèmes de rendu en mode Design. Dans certains cas, vous pouvez cliquer sur la barre d'informations pour obtenir des informations supplémentaires à propos du problème. L'illustration suivante présente une vue développée de la barre d'informations.

Barre de dimensionnement

Lorsque vous déplacez le pointeur de la souris sur un rail de grille pour un contrôle Grid qui possèdent deux ou plus colonnes ou lignes, la barre de dimensionnement apparaît en dehors du rail. Cette barre vous permet de définir des options de dimensionnement fixes, proportionnelles et automatiques pour les lignes et les colonnes du contrôle Grid. Pour plus d'informations, consultez Comment : dimensionner des lignes et des colonnes dans un contrôle Grille.

Balise de dimensionnement racine

La balise de dimensionnement racine s'affiche dans l'angle inférieur droit de la fenêtre en mode Design lorsque la fenêtre est sélectionnée. Elle vous permet de faire passer la taille racine de la fenêtre de automatique à fixe et inversement. Pour plus d'informations, consultez Attributs au moment du design.

mode XAML

Le langage XAML (Extensible Application Markup Language) fournit un vocabulaire XML déclaratif permettant de spécifier l'interface utilisateur d'une application. Les concepteurs WPF et Silverlight fournissent une vue XAML et un mode Design synchronisé du balisage XAML rendu de votre application. La vue XAML inclut IntelliSense, la mise en forme automatique, la mise en surbrillance de la syntaxe et la navigation de balises. L'illustration suivante présente certaines des fonctionnalités XAML disponibles.

Barre de l'affichage fractionné

La barre de l'affichage fractionné vous permet de contrôler les tailles relatives du mode Design et de la vue XAML. Vous pouvez également échanger des vues, spécifier si l'affichage fractionné est horizontal ou vertical, ainsi que réduire une vue. Pour plus d'informations, consultez Affichage fractionné : afficher à la fois l'aire de conception WPF et XAML.

IntelliSense pour les extensions de balisage

En plus de la fonctionnalité IntelliSense de langage standard, la vue XAML prend en charge IntelliSense pour les extensions de balisage. Lorsque vous tapez une accolade ouvrante ({) dans la vue XAML, IntelliSense affiche les extensions de balisage disponibles. Lorsque vous choisissez une extension de balisage dans la liste, IntelliSense affiche les attributs disponibles. Pour plus d'informations, consultez Procédure pas à pas : édition de XAML dans le Concepteur WPF.

Navigateur des balises

Le navigateur de balises apparaît au-dessous de la vue XAML et vous permet d'atteindre toute balise parent de la balise actuellement sélectionnée dans la vue XAML. Lorsque vous déplacez le pointeur de la souris sur une balise dans le navigateur de balises, un aperçu miniature est affiché pour cet élément. Procédure pas à pas : édition de XAML dans le Concepteur WPF.

Zoom

Le contrôle Zoom vous permet de dimensionner la vue XAML. Vous pouvez effectuer un zoom de 20 % à 400 %.

Fenêtre Propriétés

La fenêtre Propriétés vous permet de définir des valeurs de propriété sur les contrôles en mode Design. L'illustration suivante montre un exemple de la fenêtre Propriétés.

La partie supérieure de la fenêtre Propriétés contient différentes options. Pour modifier le nom du contrôle actuellement sélectionné, positionnez votre curseur dans la zone Nom et tapez le nom. L'angle supérieur droit affiche un aperçu miniature du contrôle actuellement sélectionné. Pour répertorier les propriétés par catégorie ou par ordre alphabétique, cliquez sur le bouton Par catégorie ou Alphabétique. Pour trier les propriétés par source, cliquez sur le bouton Trier par source de propriété. Pour afficher la liste des événements d'un contrôle, cliquez sur le bouton Événements. Pour rechercher une propriété, commencez à taper son nom dans la zone Rechercher. Les propriétés qui correspondent à votre recherche s'affichent au fur et à mesure de la saisie dans la fenêtre.

À droite du nom des propriétés, dans la première colonne, figure un marqueur de propriété. Ce marqueur de propriété indique s'il y a une liaison de données ou une ressource appliquées à la propriété. Lorsque vous cliquez sur le marqueur de propriété, vous pouvez ouvrir le générateur de liaisons de données ou le sélecteur de ressource, ou accéder à la définition d'une ressource. L'illustration suivante présente les options qui sont disponibles lorsque vous cliquez sur le marqueur de propriété d'un style.

Générateur de liaisons de données

Le générateur de liaisons de données vous permet de créer des liaisons de données sans taper de code XAML. Vous pouvez créer des liaisons vers des ressources, des contextes de données et des propriétés d'élément. Vous pouvez également appliquer des convertisseurs de valeur. Pour plus d'informations, consultez Procédure pas à pas : création d'une liaison de données à l'aide du Concepteur WPF et Procédure pas à pas : utilisation d'un DesignInstance à lier aux données dans le concepteur.

Éditeur de marges

L'éditeur de marges vous permet d'afficher chaque paramètre de marge et de connaître son impact sur le positionnement du contrôle. Vous pouvez également modifier les marges d'un contrôle ou celles de plusieurs contrôles avec l'éditeur de marges. Pour plus d'informations, consultez Comment : définir des marges pour un contrôle dans le Concepteur WPF.

Sélecteur de ressource

Le sélecteur de ressource vous permet de rechercher et d'assigner des ressources aux propriétés de la fenêtre Propriétés. Vous pouvez également extraire des valeurs codées en dur des ressources pour encourager leur réutilisation. Pour plus d'informations, consultez Utilisation des ressources.

Éditeur Pinceau

L'éditeur Pinceau vous permet de créer de nombreux genres de pinceaux différents dans la fenêtre Propriétés. Pour plus d'informations, consultez Comment : créer un pinceau à l'aide de l'éditeur Pinceau.

Fenêtre Sources de données

Vous pouvez intégrer rapidement des données dans votre application WPF à l'aide de la Sources de données (fenêtre). Lorsque vous avez établi une connexion de données, vous pouvez faire glisser des tables de données sur l'aire de conception. La logique métier et les liaisons de données sont alors générées automatiquement. Vous pouvez créer une liaison avec un objet, un groupe de données ADO.NET, un Entity Data Model ou un service. Pour plus d'informations, consultez Liaison de contrôles WPF avec des données dans Visual Studio.

Structure du document, fenêtre

La fenêtre Structure du document fournit une vue hiérarchique d'un document XAML. Vous pouvez utiliser la fenêtre Structure du document pour visualiser, sélectionner ou supprimer des éléments XAML. L'illustration suivante montre un exemple de la fenêtre Propriétés.

Pour plus d'informations, consultez Navigation dans la hiérarchie des éléments d'un document WPF.

Génération d'interfaces utilisateur complètes et interactives

Dans WPF, les classes Window et Page sont des surfaces visuelles sur lesquelles vous affichez des informations destinées à l'utilisateur. Habituellement, vous générez des applications WPF en ajoutant des contrôles à Window et en développant des réponses aux actions de l'utilisateur, comme des clics de souris ou des utilisations de touches. Un contrôle est un élément d'interface utilisateur discret qui affiche des données ou accepte une entrée de données.

Lorsqu'un utilisateur exécute une action sur Window ou l'un de ses contrôles, celle-ci génère un événement. Votre application réagit à ces événements et les traite lorsqu'ils se produisent. Pour plus d'informations, consultez Comment : créer un gestionnaire d'événements simple.

WPF contient divers contrôles que vous pouvez ajouter à une fenêtre : contrôles qui affichent des zones de texte, boutons, listes déroulantes, cases d'option et pages Web. Pour obtenir la liste de tous les contrôles que vous pouvez utiliser dans une fenêtre, consultez Bibliothèque de contrôles. Si un contrôle existant ne répond pas à vos besoins, WPF vous permet également de créer vos propres contrôles personnalisés à l'aide des classes UserControl et Control.

Grâce à la fonction de glisser-déplacer du concepteur WPF ou Silverlight, vous pouvez créer des applications WPF facilement. Il suffit de sélectionner les contrôles avec le pointeur de la souris et de les ajouter à l'emplacement souhaité dans la fenêtre. Le concepteur fournit des outils (lignes d'alignement et zoom continu, par exemple) qui simplifient la réorganisation des contrôles.

Enfin, si vous devez créer des éléments d'interface personnalisés, les espaces de noms System.Windows.Media et System.Windows.Shapes contiennent une large sélection de classes pour restituer des lignes, des cercles et d'autres formes directement dans une fenêtre.

Aide à la création de fenêtres et de contrôles

Pour des informations pas à pas sur l'utilisation de ces fonctionnalités, consultez les rubriques d'aide suivantes.

Description	Rubrique d'aide
Création d'une application WPF avec Visual Studio	Comment : créer un projet d'application WPF
Utilisation de contrôles dans une fenêtre.	Comment : sélectionner et déplacer des éléments sur l'aire de conception
Création de gestionnaires d'événements pour des contrôles.	Comment : créer un gestionnaire d'événements simple
Gestion d'événements d'une fenêtre et contrôles de la fenêtre.	Comment : utiliser les événements attachés
Navigation dans une disposition WPF ou Silverlight.	Navigation dans la hiérarchie des éléments d'un document WPF
Création de dispositions dynamiques.	Dispositions dans le Concepteur WPF
Création de contrôles WPF personnalisés.	Comment : créer un projet de bibliothèque UserControl WPF
Création de liaisons de données.	Liaison de données dans le Concepteur WPF

Collaboration avec Expression Blend

WPF fournit une séparation renforcée du contenu et de la présentation, qui permet aux développeurs de logiciels et aux concepteurs graphiques de collaborer sur l'apparence et le comportement d'une application. Le concepteur WPF et Silverlight est optimisé pour les développeurs de logiciels, et Expression Blend est optimisé pour les concepteurs graphiques. Pour plus d'informations, consultez Collaboration avec Expression Blend.

Voir aussi

Concepts

Concepteur WPF pour les développeurs Windows Forms

Collaboration avec Expression Blend

Autres ressources

Concepteur WPF

Bibliothèque de contrôles

Intégration du format XAML au format WPF

Historique des modifications

Date	Historique	Motif
Mars 2011	Informations mises à jour sur la fenêtre Propriétés et l'éditeur de marges.	Améliorations apportées aux informations.