Concevoir en XAML dans Visual StudioDesign XAML in Visual Studio

Visual Studio et Blend pour Visual Studio fournissent tous deux des outils visuels conçus pour générer des interfaces utilisateur attrayantes et des expériences multimédias élaborées avec XAML pour différents types d’applications.Visual Studio and Blend for Visual Studio both provide visual tools for building engaging user interfaces and rich media experiences with XAML for a variety of app types. Les deux outils partagent un ensemble commun de fonctionnalités, dont un éditeur XAML visuel, mais Blend pour Visual Studio propose des outils de conception supplémentaires conçus pour des tâches plus avancées telles que l’animation et les comportements.Both tools share a common set of features including a visual XAML editor, but Blend for Visual Studio provides additional design tools for more advanced tasks such as animation and behaviors.

Le processus de conception d’une application dépend de l’outil que vous choisissez et de votre plateforme cible.The process of designing an app depends on the tool you choose and your target platform. Cet article compare les outils de conception XAML dans Visual Studio et Blend pour Visual Studio.This article compares the XAML design tools in Visual Studio and Blend for Visual Studio. Pour obtenir des procédures pas à pas plus détaillées de l’utilisation des outils, consultez les rubriques suivantes :For more detailed walkthroughs of using the tools, see the following topics:

Choisir l’outil appropriéChoose the right tool

Votre sélection des outils de conception dépend en grande partie de vos compétences.Your choice of design tools is largely dependent on your skill set. Si vous êtes davantage orienté code, vous pouvez écrire du code XAML dans Visual Studio pour accomplir des tâches de conception avancées.If you are more code-oriented, you can write XAML code in Visual Studio to accomplish advanced design tasks. Si vous êtes plus orientée conception, Blend pour Visual Studio vous permet d'effectuer des tâches avancées sans écrire de code.If you are more design-oriented, Blend for Visual Studio lets you perform advanced tasks without writing code.

Vous pouvez basculer entre Visual Studio et Blend pour Visual Studio, et vous pouvez même ouvrir le même projet simultanément dans les deux environnements.You can switch back and forth between Visual Studio and Blend for Visual Studio, and you can even have the same project open in both at the same time. Les modifications apportées aux fichiers XAML dans un environnement IDE peuvent être appliquées via le rechargement automatique quand vous basculez vers l'autre environnement IDE.Changes made to XAML files in one IDE can be applied via automatic reload when you switch to the other IDE. Vous pouvez contrôler le comportement de rechargement par le biais des options disponibles dans la boîte de dialogue Outils > Options de l’un ou l’autre environnement IDE.You can control the reload behavior via options in the Tools > Options dialog box in either IDE.

Fonctionnalités partagéesShared Capabilities

Pour la plupart des tâches de base, l'IDE de Visual Studio et l'IDE de Blend pour Visual Studio partagent le même ensemble de fenêtres et de fonctionnalités, avec quelques différences subtiles.For most basic tasks, the IDE for Visual Studio and Blend for Visual Studio share the same set of windows and capabilities, with some subtle differences. Voici quelques points clés :Some highlights include:

  • Une interface utilisateur cohérente : vous pouvez concevoir vos applications dans le contexte familier de l'interface utilisateur de Visual Studio, ce qui rend le passage d'un IDE à un autre plus agréable et plus productif.A consistent user interface: You can design your applications within the familiar context of the Visual Studio user interface, which makes switching between IDEs a more pleasant and productive experience. Blend pour Visual Studio utilise le thème sombre de Visual Studio qui vous permet de vous concentrer sur le contenu que vous créez en améliorant le contraste entre le contenu et l'interface utilisateur.Blend for Visual Studio uses the Visual Studio Dark theme that helps you focus on the content you are designing by improving the contrast between your content and the user interface. Consultez Créer une IU à l’aide du concepteur XAML.See Create a UI by using XAML Designer.

    Environnement IDE Blend for Visual Studio

  • XAML IntelliSense : les deux IDE prennent en charge toutes les fonctionnalités courantes que vous pouvez attendre d'IntelliSense, notamment la saisie semi-automatique des instructions, la prise en charge des opérations courantes de l'éditeur telles que l'ajout de commentaires et la mise en forme de code, ainsi que la navigation des ressources, la liaison et le code.XAML IntelliSense: Both IDEs support all of the common capabilities you would expect from IntelliSense including statement completion, support for common editor operations like commenting and formatting code, and navigation to resources, binding, and code.

  • Fonctionnalités de débogage de base : vous pouvez maintenant déboguer dans Blend, notamment en définissant des points d'arrêt dans votre code afin de déboguer votre application en cours d'exécution.Basic debugging capabilities: You can now debug in Blend, including setting breakpoints in your code to debug your running app. Pour maintenir une expérience de débogage cohérente avec Visual Studio, Blend pour Visual Studio inclut la plupart des fenêtres de débogage et barres d’outils de Visual Studio.To maintain a consistent debugging experience with Visual Studio, Blend for Visual Studio includes most of Visual Studio's debugging windows and toolbars. Certaines fonctionnalités de débogage avancées, telles que les diagnostics et l'analyse du code, sont disponibles uniquement dans Visual Studio.Advanced debugging capabilities such as diagnostics and code analysis are only available in Visual Studio. Consultez Déboguer dans Visual Studio.See Debug in Visual Studio.

  • Expérience de rechargement de fichier : vous pouvez modifier vos fichiers XAML dans Blend pour Visual Studio ou dans Visual Studio. Vos fichiers modifiés sont alors rechargés automatiquement quand vous passez de l'un à l'autre.File reload experience: You can edit your XAML files in either Blend for Visual Studio or Visual Studio, and have your edited files reload automatically as you switch between them. Pour minimiser les interruptions de flux de travail, vous pouvez maintenant définir vos préférences de rechargement des fichiers dans la boîte de dialogue correspondante.To minimize workflow interruptions, you can now set your file reload preferences in the file reload dialog.

    Expérience de rechargement de fichier

  • Dispositions et paramètres synchronisés : les dispositions personnalisées vous permettent d'enregistrer et d'appliquer des personnalisations de disposition de fenêtre Outil.Synchronized Layouts and Settings: Custom layouts enable you to save and apply tool window layout customizations. Visual Studio synchronise ces personnalisations et ces préférences à la fois pour Visual Studio et pour Blend pour Visual Studio sur différents ordinateurs quand vous vous connectez avec le même compte Microsoft.Visual Studio synchronizes these customizations and preferences for both Visual Studio and Blend for Visual Studio across machines when you sign in with the same Microsoft account. Consultez Personnaliser l’IDE Visual Studio.See Personalize the Visual Studio IDE.

  • Un Explorateur de solutions commun : Explorateur de solutions vous offre une vue organisée de vos projets et de leurs fichiers, ainsi qu’un accès aux commandes qui s’y rapportent.A common Solution Explorer: Solution Explorer provides you with an organized view of your projects and their files, as well as ready access to the commands associated with them. Avec l'Explorateur de solutions, il est plus facile de travailler avec des grands projets d'entreprise.With Solution Explorer, it is easier to work with big enterprise projects. Consultez Projets et solutions.See Solutions and projects.

  • Team Explorer : Team Explorer vous permet de gérer vos projets avec les référentiels GIT ou TFS afin de faciliter la collaboration d'équipe.Team Explorer: With Team Explorer you can manage your projects with GIT or TFS repositories to facilitate team collaboration. Consultez Travailler dans Team Explorer.See Work in Team Explorer.

  • NuGet : vous pouvez gérer les packages NuGet aussi bien dans Visual Studio que dans Blend pour Visual Studio.NuGet: You can manage NuGet packages in both Visual Studio and Blend for Visual Studio. NuGet est un gestionnaire de package pour le .NET Framework qui simplifie l'installation et la suppression de packages d'une solution.NuGet is a package manager for the .NET Framework that simplifies the installation and removal of packages from a solution.

Fonctionnalités avancées dans Blend pour Visual StudioAdvanced Capabilities in Blend for Visual Studio

Pour accroître votre productivité, utilisez Blend pour Visual Studio pour les tâches suivantes.To increase your productivity, consider using Blend for Visual Studio for the following tasks. Il s'agit des domaines où Blend pur Visual Studio s'avère plus rapide et plus riche en fonctionnalités que le concepteur Visual Studio ou le code seul.These are the areas where Blend for Visual Studio offers more speed and functionality than the Visual Studio designer or code alone.

ÀTo Visual StudioVisual Studio Blend pour Visual StudioBlend for Visual Studio Complément d'informationMore information
Créer des animationsCreate animations Il n'existe aucun outil de conception d'animations ; vous devez les créer par programmation.There is no design tool for animations; you have to create them programmatically. Cela nécessite une bonne connaissance du système d'animation et de minutage de WPF, ainsi que des compétences étendues en matière de codage.This requires an understanding of the animation and timing system in WPF and extensive coding expertise. Vous créez les animations de manière visuelle et pouvez en afficher un aperçu dans Blend pour Visual Studio.You create animations visually and can preview them in Blend for Visual Studio. Il s'agit d'une méthode plus rapide et plus précise que celle qui consiste à créer des animations dans le code.This is faster and more accurate than building your animations in code. Vous pouvez ajouter des déclencheurs pour gérer l'interaction des utilisateurs et basculer vers le code pour ajouter des gestionnaires d'événements et d'autres fonctionnalités.You can add triggers to handle user interaction, and you can switch to code to add event handlers and other functionality. Animer des objetsAnimate objects
Transformer des formes et du texte en tracés pour une manipulation plus facileTurn shapes and text into paths for easier manipulation Non pris en charge.Not supported. Vous pouvez modifier les formes (telles que des rectangles et des ellipses) de manière subtile ou radicale en les convertissant en tracés, ce qui confère un meilleur contrôle d'édition.You can make subtle or dramatic changes to shapes (such as rectangles and ellipses) by converting them to paths, which provide better editing control. Vous pouvez remodeler ou combiner des tracés et créer des tracés composites à partir de plusieurs formes.You can reshape or combine paths, and create compound paths from multiple shapes.

Vous pouvez aussi convertir des blocs de texte en tracés pour les manipuler en tant qu'images vectorielles.You can also convert text blocks into paths to manipulate them as vector images.
Dessiner des formes et des tracésDraw shapes and paths
Ajouter de l’interactivité à vos conceptions d’interface utilisateurAdd interactivity to your UI designs Nécessite du code C#, Visual Basic ou C++.Requires C#, Visual Basic, or C++ code. Glissez-déplacez des comportements vers des contrôles pour ajouter de l'interactivité à vos conceptions statiques.Drag and drop behaviors onto controls to add interactivity to your static designs. Les comportements sont des extraits de code prêts à l'emploi qui encapsulent des fonctionnalités, telles que le glisser-déplacer, le zoom et les changements d'état visuel.Behaviors are ready-to-use code snippets that encapsulate functionality such as drag/drop, zoom, and visual state changes. Vous avez le choix entre un ensemble croissant de comportements, et vous pouvez créer les vôtres.There's a growing set of behaviors from which you can choose, and you can create your own.

Vous pouvez ensuite personnaliser chaque comportement en modifiant ses propriétés dans Blend pour Visual Studio ou en ajoutant des gestionnaires d'événements dans le code.You can then customize each behavior by changing its properties in Blend for Visual Studio or by adding event handlers in code.
Insérer des contrôles et modifier leur comportementInsert controls and modify their behavior
Utiliser une illustration AdobeUse Adobe artwork Non pris en charge.Not supported. Importez une conception graphique Adobe FXG, PhotoShop ou Illustrator, puis implémentez l'interface utilisateur dans Blend pour Visual Studio.Import Adobe FXG, PhotoShop, or Illustrator artwork and implement the UI in Blend for Visual Studio. Insérer des images, des vidéos et des clips audioInsert images, videos, and audio clips
Modifier des contrôles, des modèles et des stylesEdit controls, templates, and styles Nécessite du codage et une connaissance des styles et modèles WPF.Requires coding and knowledge of WPF styles and templates. Transformez une image en contrôle.Turn any image into a control.

Utilisez les outils d'édition de modèle pour apporter des modifications à des contrôles, styles et modèles en quelques clics de souris.Use the template editing tools to make changes to controls, styles, and templates with just a few mouse clicks.

Par exemple, vous pouvez utiliser les ressources de style Blend pour Visual Studio pour implémenter des contrôles WPF courants (tels que des boutons, zones de liste, barres de défilement, menus, etc.) et modifier leur couleur, style ou modèle sous-jacent directement dans Blend pour Visual Studio.For example, you can use Blend for Visual Studio style resources to implement common WPF controls (such as buttons, list boxes, scroll bars, menus, etc.), and change their color, style, or underlying template directly in Blend for Visual Studio. Vous pouvez ensuite basculer vers le code pour apporter des touches finales, le cas échéant.You can then switch to code for finishing touches if you want.
Modifier le style des objetsModify the style of objects
Connecter votre interface utilisateur à des donnéesConnect your UI to data Vous pouvez créer une source de données à partir de ressources, telles que des bases de données SQL Server, des services WCF ou web, des objets ou des listes SharePoint, et lier la source de données aux contrôles de votre interface utilisateur.You can create a data source from resources such as SQL Server databases, WCF or web services, objects, or SharePoint lists, and bind the data source to your UI controls.

Des données doivent être créées manuellement au moment de la conception pour une expérience de conception interactive.Design-time data must be created by hand for an interactive design experience.
Créez des exemples de données en toute simplicité à des fins de prototypage et de test.Create sample data easily for prototyping and testing. Passez à des données en direct dès que vous êtes prêt.Switch to live data when you're ready.

Les capacités de génération de données de Blend pour Visual Studio sont remarquables (vous pouvez facilement ajouter noms, nombres, URL et photos à la volée) et peuvent vous faire gagner beaucoup de temps.Blend for Visual Studio's data generation capabilities are outstanding (you can add names, numbers, URLs, and photos easily on the fly), and can save you a lot of time.

Pour les données en direct, vous pouvez lier les contrôles de votre interface utilisateur à un fichier XML ou à une source de données CLR.For live data, you can bind your UI controls to an XML file or to any CLR data source.
Afficher des donnéesDisplay data

Pour plus d’informations sur la conception XAML avancée, consultez Créer une interface utilisateur à l’aide de Blend pour Visual Studio.For more information about advanced XAML design, see Create a UI by using Blend for Visual Studio.