Création d'une interface utilisateur à l'aide de Blend pour Visual StudioCreating a UI by using Blend for Visual Studio

Blend pour Visual Studio vous aide à concevoir des applications web et Windows basées sur XAML.Blend for Visual Studio helps you design XAML-based Windows and Web applications. Il fournit la même expérience de conception XAML de base que Visual Studio et ajoute des concepteurs visuels pour des tâches avancées telles que les animations et les comportements.It provides the same basic XAML design experience as Visual Studio and adds visual designers for advanced tasks such as animations and behaviors. Pour obtenir une comparaison entre Blend et Visual Studio, consultez Conception XAML dans Visual Studio et Blend pour Visual Studio.For a comparison between Blend and Visual Studio, see Design XAML in Visual Studio and Blend for Visual Studio.

Blend pour Visual Studio est un composant de Visual Studio.Blend for Visual Studio is a component of Visual Studio. Pour installer Blend, dans le programme d’installation de Visual Studio, choisissez la charge de travail Développement de la plateforme universelle Windows ou Développement .NET Desktop.To install Blend, in the Visual Studio Installer choose either the Universal Windows Platform development or .NET desktop development workload. Ces deux charges de travail incluent le composant Blend pour Visual Studio.Both of these workloads include the Blend for Visual Studio component.

Composants de la charge de travail UWP    Composants de la charge de travail Développement .NET Desktop

Si vous débutez avec Blend pour Visual Studio, prenez un moment pour vous familiariser avec les fonctionnalités uniques de l’espace de travail.If you're new to Blend for Visual Studio, take a moment to become familiar with the unique features of the workspace. Cette rubrique vous en livre une présentation rapide.This topic takes you on a quick tour.

Note

Pour parcourir les fonctionnalités de conception partagées telles que la planche graphique, la fenêtre Structure du document et la fenêtre Périphérique, consultez Création d’une interface utilisateur à l’aide du concepteur XAML.To tour the shared design features such as the artboard, Document Outline window, and Device window, see Creating a UI by using XAML Designer.

Présentation du panneau OutilsTour of the Tools panel

Vous pouvez utiliser le panneau Outils dans Blend pour Visual Studio pour créer et modifier les objets de votre application.You can use the Tools panel in Blend for Visual Studio to create and modify objects in your application. Vous créez les objets en sélectionnant un outil, puis en dessinant sur la planche graphique à l'aide de la souris.You create the objects by selecting a tool and drawing on the artboard with your mouse.

Volet Outils

Outils de sélection Outils de sélection Permet de sélectionner les objets et les tracés.Selection tools Select objects and paths.

L’outil Sélection directe permet de sélectionner les objets imbriqués et les segments de tracé.Use the Direct Selection tool to select nested objects and path segments.
Légende A Outils Dégradé et PinceauGradient and brush tools
Outils d’affichage Outils d’affichage Permet d’ajuster la vue de la planche graphique, par exemple pour l’affichage panoramique et le zoom.View tools Adjust the view of the artboard, such as for panning and zooming. Légende B Outils de tracéPath tools
Outils Pinceau Outils Pinceau Permet de manipuler les attributs visuels d’un objet, notamment de transformer un pinceau, peindre un objet ou sélectionner les attributs d’un objet pour les appliquer à un autre.Brush tools Work with the visual attributes of an object, such as transforming a brush, painting an object, or selecting the attributes of one object to apply them to another object. Légende C Outils FormeShape tools
Outils d’objet Outils d’objet Permet de dessiner les objets les plus courants sur la planche graphique, tels que les tracés, les formes, les panneaux de disposition, le texte et les contrôles.Object tools Draw the most common objects on the artboard, such as paths, shapes, layout panels, text, and controls. Légende D Panneaux de dispositionLayout panels
Outils de composant Outils de composant Donne accès au panneau Composants et affiche le dernier composant utilisé de la bibliothèque.Asset tools Access the Assets panel and to show the most recently used asset from the library. Légende E Contrôles de texteText controls
Légende F Contrôles courantsCommon controls

Regardez une courte vidéo : Configurer les fonctionnalités installées La barre d’outils.Watch a short video: Configure installed features The Toolbar.

Présentation du panneau ComposantsTour of the Assets panel

Tous les contrôles se trouvent dans le panneau Composants, à l’image de la boîte à outils de Visual Studio.You can find all controls in the Assets panel, similar to the Toolbox in Visual Studio. Outre les contrôles, vous y trouverez tout ce que vous pouvez ajouter à la planche graphique dans le panneau Composants, notamment des styles, des médias, des comportements et des effets.In addition to controls, you'll find everything you can add to your artboard in the Assets panel, including styles, media, behaviors, and effects.

Volet Composants

Zone de recherche Tapez un élément dans la zone Rechercher pour filtrer la liste des composants.Search box Type in the Search box to filter the list of assets.
Mode Grille et mode Liste Mode Grille et mode Liste Passez du mode Grille au mode Liste, et inversement, dans l’affichage des composants.Grid mode and List mode Switch between the Grid mode view and the List mode view of assets.
Catégories Composants Catégories Composants Cliquez sur une catégorie ou une sous-catégorie pour afficher la liste des composants dans cette catégorie.Assets categories Click a category or subcategory to view the list of assets in that category.
Styles Styles Affiche tous les styles contenus dans le dictionnaire de ressources.Styles Show all the styles that are contained in the resource dictionary.
Description Description Affiche une description de la catégorie ou sous-catégorie de composants sélectionnée.Description View a description of the selected assets category or subcategory.

Présentation du panneau Objets et chronologieTour of the Objects and Timeline panel

Ce panneau permet de disposer les objets sur la planche graphique et éventuellement de les animer.Use this panel to organize the objects on your artboard and, if you want, to animate them.

Volet Objets et chronologie en mode animation

Liste d’objets Liste d’objets Affiche une arborescence visuelle d’un document.Objects view View a visual tree of a document. Vous pouvez explorer divers niveaux de détail.You can drill down to varying levels of detail. Vous pouvez aussi ajouter des couches pour mieux disposer les objets sur la planche graphique.You can also add layers to further organize objects on the artboard. Vous pouvez ainsi les verrouiller et les masquer en groupe.That way you can lock and hide them as a group.
Indicateur du mode d’enregistrement Indicateur du mode d’enregistrement Indique si vous enregistrez les modifications apportées aux propriétés dans une chronologie.Record mode indicator See whether you're recording property changes in a timeline.
Sélecteur de tables de montage séquentiel Sélecteur de tables de montage séquentiel Affiche la liste des tables de montage séquentiel que vous avez créées.Storyboard picker View a list of storyboards that you've created.
Fermer la table de montage séquentiel Fermer la table de montage séquentiel Ferme la table de montage séquentiel active.Close storyboard Close the current storyboard.
Options de table de montage séquentiel Options de table de montage séquentiel Permet de créer, dupliquer, inverser, supprimer, renommer ou fermer une table de montage séquentiel.Storyboard options Create, duplicate, reverse, delete, rename, or close a storyboard.
Contrôles de lecture Contrôles de lecture Permet de parcourir la chronologie.Playback controls Navigate through the timeline. Vous pouvez également faire glisser la tête de lecture pour naviguer (ou lire à vitesse variable) dans la chronologie.You can also drag the playhead to navigate through (or scrub) the timeline.
Rétablir l’étendue à Rétablir l’étendue à Permet de rétablir l’objet racine précédent ou l’étendue précédente de la liste d’objets.Return scope to Scope the objects view back to the previous root object or previous scope. Cela n’est possible qu’à l’occasion de la modification d’un style ou d’un modèle.You can do this only when you're modifying a style or template.
Enregistrer une image clé Enregistrer une image clé Permet d’enregistrer une capture instantanée des propriétés de l’objet sélectionné au moment dans le temps actuel.Record a keyframe Record a snapshot of the properties of the selected object at the current point in time.
Options d’alignement Options d’alignement Permet de définir l’alignement de la chronologie, la résolution d’alignement, et de désactiver l’alignement de la chronologie.Snapping options Set timeline snapping, snap resolution, and turn off timeline snapping.
Afficher ou masquer Verrouiller/déverrouiller Afficher/masquer, Verrouiller/déverrouiller Permet d’afficher ou de masquer les options de visibilité et de verrouillage de la liste d’objets.Show/hide, Lock/unlock Show or hide the visibility and locking options for the objects view.
Position de la tête de lecture dans la chronologie Position de la tête de lecture dans la chronologie Affiche le temps actuel en millisecondes.Playhead position on the timeline Show the current time in milliseconds. Il est également possible d’entrer une valeur de temps directement dans ce champ pour atteindre un instant particulier.You can also enter a time value directly in this field to jump to a particular point in time. La précision dépend de la résolution d’alignement définie dans Options d’alignement.The precision depends on the snap resolution set in the Snapping Options.
Tête de lecture Tête de lecture Indique à quel point dans le temps se situe l’animation.Playhead Determine what point in time the animation is at. Vous pouvez faire glisser la tête de lecture sur la chronologie pour afficher un aperçu de l'animation.You can drag the playhead across the timeline to preview animation.
Images clés définies sur les chronologies Images clés définies sur les chronologies Permet de modifier une valeur de propriété à un moment précis dans le temps.Keyframes set on timelines Change a property value at a specific point in time.
Modifier l’ordre des objets Modifier l’ordre des objets Permet de définir l’ordre d’affichage des objets.Change order of objects Set the display order of objects. Cliquez sur ce bouton pour organiser les objets dans la vue de structure selon l’ordre de plan (de l’avant vers l’arrière) ou l’ordre des balises (ordre dans lequel elles sont affichées dans la vue XAML).Click this button to arrange objects in the structure view by Z order (front-to-back) or by markup order (the order in which they appear in XAML view).
Zoom de la chronologie Zoom de la chronologie Permet de définir la résolution du zoom de la chronologie.Timeline zoom Set the zoom resolution of the timeline. Un zoom avant permet de modifier une animation avec plus de détails, alors qu'un zoom arrière donne un plus large aperçu de ce qu'il se passe sur une période plus longue.Zooming in lets you edit an animation with more detail, and zooming out shows more of an overview of what is happening over longer periods of time. Si vous faites un zoom avant, mais que vous ne pouvez pas définir d’image clé à un moment précis dans le temps, vérifiez que la résolution d’alignement définie est suffisamment élevée.If you zoom in but can't set a keyframe at the position in time that you want, verify that the snap resolution is set high enough.
Légende 16 Zone de composition de la chronologie Permet d’afficher la chronologie et de déplacer des images clés en les faisant glisser ou via leurs menus contextuels.Timeline composition area View the timeline, and move keyframes around by dragging them or using their shortcut menus.

Présentation du panneau PropriétésTour of the Properties panel

Cet panneau permet d'afficher et de modifier les propriétés d'un objet.Use this panel to view and modify the properties of an object. Vous pouvez aussi les définir directement sur la planche graphique.You can also set them directly on the artboard. Dans ce cas, les modifications apportées aux propriétés sont répercutées dans le panneau Propriétés.If you do, the property changes will be reflected in the Properties panel.

Panneau Propriétés

Catégories Permet de développer et de réduire les catégories de propriétés.Categories Expand and collapse categories of properties. Cliquez sur Développer Développer et Réduire Réduire pour afficher ou masquer les détails de catégorie.Click Expand Expand and Collapse Collapse to show or hide category details.

Nom et Type Nom et Type Affiche l’icône, le nom et le type de l’objet sélectionné.Name and Type View the icon, name and type of the selected object.
Réorganiser par Réorganiser par Permet d’organiser les propriétés par ordre alphabétique par nom, source ou catégorie.Arrange by Arrange properties alphabetically by name, source, or category.
Propriétés de pinceau Propriétés de pinceau Permet de définir les propriétés visuelles des pinceaux, tels que les pinceaux Remplissage, Trait et Premier plan.Brush properties Set the visual properties for brushes such as Fill brush, Stroke brush, and Foreground brush.
Éditeur de couleur Éditeur de couleurs Utilisez cette option pour les pinceaux de dégradé et de couleur unie.Color editor Use for solid color and gradient brushes.
Sélecteur de couleurs Sélecteur de couleurs Permet de sélectionner une couleur.Color picker Select a color.
Échantillons de couleur Échantillons de couleur Présentent la couleur initiale, la couleur active et la dernière couleur.Color chips View the initial color, current color, and last color
Compte-gouttes Compte-gouttes Permet d’utiliser la couleur de tout élément sur l’écran.Eyedroppers Use the color of any element on your screen. La Pipette de couleur est disponible quand le Pinceau couleur unie est sélectionné.The Color eyedropper is available when the Solid color brush is selected. La Pipette de dégradé est disponible lorsque le Pinceau de dégradé est sélectionné.The Gradient eyedropper is available when the Gradient brush is selected.
Propriétés et événements Propriétés et événements Permet de définir les propriétés ou de choisir des événements pour un élément sélectionné.Properties and Events Set properties or choose events for a selected element.
Zone de recherche Zone de recherche Permet de rechercher des propriétés.Search box Search for properties. Filtrez les propriétés affichées en complétant la zone Rechercher.Filter the properties that are displayed by typing in the Search box.
Onglets Éditeur de pinceau Onglets Éditeur de pinceau Utilisez cette option pour sélectionner un éditeur de pinceau.Brush editor tabs Use to select a brush editor. Vous pouvez choisir Aucun pinceau, Pinceau couleur unie, Pinceau de dégradé, Pinceau mosaïque ou Ressource pinceau.You can choose No brush, Solid Color brush, Gradient brush, Tile brush, or Brush resource.
Ressources de couleur Ressources de couleur Permet d’appliquer exactement la même couleur à différentes propriétés.Color resources Apply the exact same color to different properties. L’onglet Ressources de couleur inclut les ressources locales et les ressources système.The Color Resources tab includes Local Resources and System Resources.
Espace de couleurs RVB Espace de couleurs RVB Permet de modifier la couleur en ajustant les valeurs des éditeurs de nombres R, V ou B (rouge, vert, bleu).RGB color space Modify the color by adjusting the values for the R, G, or B (red, green, blue) number editors.
Canal alpha Canal alpha Modifiez la valeur alpha à l’aide de l’éditeur de nombres en regard de A.Alpha channel Modify the Alpha value by using the number editor next to A.
Convertir la couleur en ressource Convertir la couleur en ressource Permet de convertir la couleur sélectionnée en ressource de couleur.Convert color to resource Convert the selected color to a color resource. Les ressources de couleur sont disponibles quand vous cliquez sur l'onglet Ressources de couleur.Color resources are available when you click the Color resources tab.
Valeur hexadécimale Affiche la valeur hexadécimale de la couleur affichée.Hex value View the hexadecimal value of the color displayed.
Légende 16 Curseur de dégradé S’affiche uniquement si un pinceau de dégradé est sélectionné.Gradient slider Appears only if a gradient brush is selected.
Afficher les propriétés avancées Afficher les propriétés avancées Affiche les catégories de propriétés moins fréquemment utilisées.Show advanced properties View categories of properties that are less commonly used.

Regardez une courte vidéo : Configurer les fonctionnalités installées Panneau Propriétés.Watch a short video: Configure installed features Properties panel.

Voir aussiSee also