Création d'une interface utilisateur à l'aide du concepteur XAML dans Visual StudioCreating a UI by using XAML Designer in Visual Studio

Le concepteur XAML dans Visual Studio fournit une interface visuelle pour vous aider à concevoir des applications web et Windows basées sur XAML.The XAML Designer in Visual Studio provides a visual interface to help you design XAML-based Windows and Web apps. Vous pouvez créer 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 .You can create user interfaces for your apps by dragging controls from the Toolbox and setting properties in the Properties window. Vous pouvez également modifier le XAML directement en mode XAML.You can also edit XAML directly in XAML view.

Pour plus d’informations sur les tâches de conception XAML avancées telles que les animations et les comportements, consultez Creating a UI by using Blend for Visual Studio.For advanced XAML design tasks such as animations and behaviors, see Creating a UI by using Blend for Visual Studio. Consultez également Conception XAML dans Visual Studio et Blend pour Visual Studio pour afficher une comparaison des outils.Also see Designing XAML in Visual Studio and Blend for Visual Studio for a comparison between the tools.

Espace de travail du concepteur XMLXAML Designer workspace

L'espace de travail du concepteur XML se compose de plusieurs éléments d'interface graphique.The workspace in XAML Designer consists of several visual interface elements. Ceux-ci incluent la planche graphique, l'Éditeur XAML, la fenêtre Périphérique, la fenêtre Structure du document et la fenêtre Propriétés.These include the artboard, XAML Editor, Device window, Document Outline window, and Properties window. Pour ouvrir le concepteur XAML, cliquez avec le bouton droit sur un fichier XAML dans l' Explorateur de solutions et choisissez Concepteur de vues.To open the XAML Designer, right-click a XAML file in Solution Explorer and choose View Designer.

Création des vuesAuthoring views

Le concepteur XAML fournit un mode XAML et un mode Création synchronisé du balisage XAML rendu de votre application.XAML Designer provides a XAML view and a synchronized Design view of your app's rendered XAML markup. Quand un fichier XAML est ouvert dans Visual Studio, vous pouvez basculer entre le mode Création et le mode XAML à l'aide des onglets Conception et XAML .With a XAML file open in Visual Studio, you can switch between Design view and XAML view by using the Design and XAML tabs. Vous pouvez utiliser le bouton Permuter les volets pour définir la fenêtre qui doit s'afficher au premier plan : la planche graphique ou l'Éditeur XAML.You can use the Swap Panes button to switch which window appears on top: either the artboard or the XAML Editor.

En mode Création, la fenêtre contenant la planche graphique est la fenêtre active et vous pouvez l'utiliser comme surface de travail principale.In Design view, the window containing the artboard is the active window and you can use it as a primary work surface. Vous pouvez l'utiliser pour concevoir visuellement une page dans votre application en ajoutant ou en dessinant des éléments, puis en les modifiant.You can use it to visually design a page in your app by adding or drawing elements, and then by modifying them. Pour plus d'informations, consultez Working with elements in XAML Designer.For more info, see Working with elements in XAML Designer. Cette illustration montre la planche graphique en mode Création.This illustration shows the artboard in Design view.

Mode Création du concepteur XAMLDesign view of XAML Designer

Les fonctionnalités suivantes sont disponibles dans la planche graphique :These features are available in the artboard:

Lignes d'alignementSnaplines
Les lignes d'alignement sont des limites d'alignement qui apparaissent sous forme de lignes en pointillés rouges quand les bords des contrôles sont alignés ou que les lignes de base de texte sont alignées.Snaplines are alignment boundaries that appear as red-dashed lines to show when the edges of controls are aligned, or when text baselines are aligned. Les limites d'alignement n'apparaissent que si l' alignement sur les lignes d'alignement est activé.Alignment boundaries appear only when snapping to snaplines is enabled.

Quadrillage de grilleGrid rails
Les quadrillagesGrid permettent de gérer les lignes et les colonnes dans un panneau Grid .Grid rails are used to manage rows and columns in a Grid panel. Vous pouvez créer et supprimer des lignes et des colonnes, ainsi qu'ajuster leurs largeurs et hauteurs relatives.You can create and delete rows and columns, and you can adjust their relative widths and heights. Le quadrillage de grille vertical, qui apparaît à gauche de la planche graphique, est utilisé pour les lignes, et la ligne horizontale, qui apparaît en haut, est utilisée pour les colonnes.The vertical Grid rail, which appears on the left of the artboard, is used for rows, and the horizontal line, which appears at the top, is used for columns.

Ornements de grilleGrid adorners
Un ornement Grid apparaît comme un triangle doté d'une ligne verticale ou horizontale qui lui est associée sur le quadrillage de Grid .A Grid adorner appears as a triangle that has a vertical or horizontal line attached to it on the Grid rail. Quand vous faites glisser un ornement Grid , les largeurs ou hauteurs des lignes ou colonnes adjacentes se mettent à jour au fur et à mesure que vous déplacez la souris.When you drag a Grid adorner, the widths or heights of adjacent columns or rows update as you move the mouse.

Les ornementsGrid permettent de contrôler la largeur et la hauteur des lignes et des colonnes d'une Grid.Grid adorners are used to control the width and height of a Grid's rows and columns. Vous pouvez ajouter une nouvelle colonne ou ligne en cliquant sur le quadrillage de Grid .You can add a new column or row by clicking in the Grid rails. Quand vous ajoutez une nouvelle ligne ou ligne de colonne pour un panneau Grid qui comporte deux ou plusieurs colonnes ou lignes, une mini-barre d'outils apparaît en dehors du quadrillage pour vous permettre de définir la largeur et la hauteur explicitement.When you add a new row or column line for a Grid panel that has two or more columns or rows, a mini-toolbar appears outside of the rail that enables you to set width and height explicitly. La mini-barre d'outils vous permet de définir des options de dimensionnement pour les lignes et les colonnes de Grid .The mini-toolbar enables you to set sizing options for Grid rows and columns.

Poignées de redimensionnementResize handles
Des poignées de redimensionnement apparaissent sur les contrôles sélectionnés et vous permettent de redimensionner le contrôle.Resize handles appear on selected controls and enable you to resize the control. Quand 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.When you resize a control, width and height values typically appear to help you size the control. Pour plus d'informations sur la manipulation de contrôles en mode Design, consultez Working with elements in XAML Designer.For more info about manipulating controls in Design view, see Working with elements in XAML Designer.

MargesMargins
Les marges représentent la quantité d'espace fixe entre le bord d'un contrôle et le bord du conteneur associé.Margins represent the amount of fixed space between the edge of a control and the edge of its container. Vous pouvez définir les marges d’un contrôle à l’aide des propriétés Margin sous Disposition dans la fenêtre Propriétés.You can set the margins of a control by using the Margin properties under Layout in the Properties window.

Ornements de margeMargin adorners
Vous pouvez utiliser des ornements de marge pour modifier les marges d'un élément par rapport à son conteneur de disposition.You can use margin adorners to change the margins of an element relative to its layout container. Quand un ornement de marge est ouvert, une marge n'est pas définie et l'ornement de marge affiche une chaîne interrompue.When a margin adorner is open, a margin is not set and the margin adorner displays a broken chain. Quand la marge n'est pas définie et que le conteneur de disposition est redimensionné au moment de l'exécution, les éléments restent en place.When the margin is not set, elements will remain in place when the layout container is resized at run time. Quand un ornement de marge est fermé, un ornement de marge affiche une chaîne ininterrompue, et les éléments se déplacent avec la marge au fur et à mesure que le conteneur de disposition est redimensionné au moment de l'exécution (la marge reste fixe).When a margin adorner is closed, a margin adorner displays an unbroken chain, and elements will move with the margin as the layout container is resized at run time (the margin remains fixed).

Poignées d'élémentElement handles
Vous pouvez modifier un élément à l'aide des poignées d'élément qui apparaissent sur la planche graphique quand vous déplacez le pointeur sur les angles de la zone bleue qui entoure un élément.You can modify an element by using the element handles that appear on the artboard when you move the pointer over the corners of the blue box that surrounds an element. Ces poignées permettent de faire pivoter un élément, de le redimensionner, retourner, déplacer ou d'y ajouter un rayon d'angle.These handles enable you to rotate, resize, flip, move, or add a corner radius to the element. Le symbole de la poignée d'élément varie selon les fonctions et change par rapport à l'emplacement exact du pointeur.The symbol for the element handle varies by function, and changes depending on the exact location of the pointer. Si les poignées d'élément ne s'affichent pas, vérifiez que l'élément est sélectionné.If you don't see the element handles, make sure the element is selected.

En mode Création, des commandes supplémentaires de la planche graphique sont disponibles dans la partie inférieure gauche de la zone de l'écran, comme indiqué ci-après :In Design view, additional artboard commands are available in the lower left area of the screen, as shown here:

Commandes du mode CréationDesign view commands

Les commandes suivantes sont disponibles dans cette barre d'outils :These commands are available on this toolbar:

ZoomZoom
Le zoom vous permet de dimensionner l'aire de conception.Zoom enables you to size the design surface. Vous pouvez effectuer un zoom de 12,5 % à 800 % ou sélectionner des options comme Ajuster à la sélection et Ajuster à tout.You can zoom from 12.5% to 800%, or select options such as Fit to Selection and Fit to All.

Afficher/Masquer la grille d'accrochageShow/Hide snap grid
Affiche ou masque la grille d'accrochage qui indique le quadrillage.Displays or hides the snap grid that shows the gridlines. Le quadrillage est utilisé quand l' alignement sur le quadrillage ou l' alignement sur les lignes d'alignement est activé.Gridlines are used when either snapping to gridlines or snapping to snaplines is enabled.

Activer/Désactiver l'alignement sur le quadrillageTurn on/off snapping to gridlines
Si l' alignement sur le quadrillage est activé quand vous faites glisser un élément sur la planche graphique, celui-ci tend à s'aligner sur les lignes de quadrillage horizontales ou verticales les plus proches.If snapping to gridlines is enabled when you drag an element on the artboard, the element tends to align with the closest horizontal and vertical gridlines.

Activer/Désactiver l'alignement sur les lignes d'alignementTurn on/off snapping to snaplines
Les lignes d'alignement vous aident à aligner les contrôles les uns par rapport aux autres.Snaplines help you align controls relative to each other. Si l' alignement sur les lignes d'alignement est activé, quand vous faites glisser un contrôle par rapport à d'autres contrôles, des limites d'alignement apparaissent quand les bords et le texte de certains contrôles sont alignés horizontalement ou verticalement.If snapping to snaplines is enabled, when you drag a control relative to other controls, alignment boundaries appear when the edges and the text of some controls are aligned horizontally or vertically. Une limite d'alignement apparaît sous la forme d'une ligne en pointillés rouge.An alignment boundary appears as a red-dashed line.

En mode XAML, la fenêtre de l'éditeur XAML est la fenêtre active, et l'éditeur XAML est votre principal outil de création.In XAML view, the window containing the XAML editor is the active window, and the XAML editor is your primary authoring tool. Le langage XAML (Extensible Application Markup Language) fournit un vocabulaire XML déclaratif permettant de spécifier l'interface utilisateur d'une application.The Extensible Application Markup Language (XAML) provides a declarative, XML-based vocabulary for specifying an application's user interface. Le mode XAML inclut IntelliSense, la mise en forme automatique, la mise en surbrillance de la syntaxe et la navigation de balises.XAML view includes IntelliSense, automatic formatting, syntax highlighting, and tag navigation. Cette illustration montre le mode XAML :This illustration shows XAML view:

Vue XAMLXAML view

Barre Mode fractionnéSplit view bar
La barre Mode fractionné apparaît en haut du mode XAML quand l'éditeur XAML s'affiche dans la fenêtre inférieure.The split view bar appears at the top of XAML view when the XAML editor is in the lower window. La barre Mode fractionné vous permet de contrôler les tailles relatives du mode Création et du mode XAML.The split view bar enables you to control the relative sizes of Design view and XAML view. Vous pouvez également échanger les emplacements des vues (à l'aide du bouton Permuter les volets ), spécifier si les vues sont réorganisées horizontalement ou verticalement et réduire l'une ou l'autre des vues.You can also exchange the locations of the views (using the Swap Panes button), specify whether the views are arranged horizontally or vertically, and collapse either view.

Zoom de balisageMarkup Zoom
Le zoom de balisage vous permet de dimensionner le mode XAML.Markup zoom enables you to size XAML view. Vous pouvez effectuer un zoom de 20 % à 400 %.You can zoom from 20% to 400%.

Fenêtre PériphériqueDevice window

La fenêtre Appareil du concepteur XAML vous permet de faire des simulations à l’aide de plusieurs vues, écrans et options d’affichage pour votre projet au moment du design.The Device window in XAML Designer enables you to simulate at design-time various views, displays, and display options for your project. La fenêtre Périphérique est disponible dans le menu Design quand vous travaillez dans le concepteur XAML.The Device window is available on the Design menu when you are working in the XAML Designer. Voici à quoi elle ressemble :Here's what it looks like:

Fenêtre AppareilDevice window

Les options disponibles dans la fenêtre Périphérique sont les suivantes :These are the options available in the Device window:

AfficherDisplay
Spécifie différentes tailles et résolutions d'affichage pour votre application.Specifies different display sizes and resolutions for the app.

OrientationOrientation
Spécifie différentes orientations de l'application : Paysage ou Portrait.Specifies different orientations for the app: Landscape or Portrait.

BordEdge
Spécifie différents alignements de bord de votre application : Les deux, Gauche, Droitou Aucun.Specifies different edge alignments for your app: Both, Left, Right, or None.

Contraste élevéHigh Contrast
Affiche un aperçu de l'application en fonction du paramètre de contraste sélectionnéPreview the app based on the selected contrast setting. Ce paramètre, lorsqu'il est défini sur une valeur différente de Par défaut, remplace la propriété RequestedTheme définie dans App.xaml.This setting, when set to a value other than Default, will override the RequestedTheme property set in App.xaml.

Substituer la mise à l'échelleOverride scaling
Active ou désactive l'émulation de la mise à l'échelle de document dans l'aire de conception.Turns on and off emulation of document scaling within the design surface. Cela vous permet d'augmenter le pourcentage de mise à l'échelle d'un facteur.This enables you to increase the scaling percentage by one factor. Cochez la case pour activer l'émulation.Select the check box to turn on emulation. Par exemple, si votre pourcentage de mise à l'échelle est de 100 %, le document dans l'aire de conception bénéficiera d'une mise à l'échelle pouvant atteindre 140 %.For instance, if your scaling percentage is 100%, the document within the design surface will scale up to 140%. Cette option est désactivée si le pourcentage de mise à l'échelle actuel est 180.This option is disabled if the current scaling percentage is 180.

Largeur minimaleMinimum width
Spécifie le paramètre de largeur minimale.Specifies the minimum width setting. La largeur minimale peut être modifiée dans App.xaml.The minimum width can be changed in App.xaml.

ThèmeTheme
Spécifie le thème d'application.Specifies the app theme. Par exemple, vous pouvez basculer entre un thème Sombre et un thème Clair.For example, you might switch between a Dark and a Light theme.

Afficher le chromeShow chrome
Active et désactive le frame de tablette simulée autour de votre application en mode Création.Turns on and off the simulated tablet frame around your app in Design view. Cochez la case pour afficher le frame.Select the check box to show the frame.

Détourer pour afficherClip to display
Spécifie le mode d'affichage.Specifies the display mode. Cochez la case pour détourer la taille du document selon la taille d'affichage.Select the check box to clip the document size to the display size.

Fenêtre Structure du documentDocument Outline window

La fenêtre Structure du document dans le concepteur XAML vous permet d'effectuer les tâches suivantes :The Document Outline window in XAML Designer helps you perform these tasks:

  • Afficher la structure hiérarchique de tous les éléments de la planche graphique.View the hierarchical structure of all elements on the artboard.

  • Sélectionner des éléments pour pouvoir les modifier (les déplacer dans la hiérarchie, les modifier sur la planche graphique, définir leurs propriétés dans la fenêtre Propriétés, etc.).Select elements so that you can modify them (move them around in the hierarchy, modify them on the artboard, set their properties in the Properties window, and so on). Pour plus d'informations, consultez Working with elements in XAML DesignerFor more info, see Working with elements in XAML Designer

  • Créer et modifier les modèles des éléments qui sont des contrôles.Create and modify templates for elements that are controls.

  • Utiliser le menu contextuel des éléments sélectionnés.Use the context menu for selected elements. Le même menu est également disponible pour les éléments sélectionnés dans la planche graphique.The same menu is also available for selected elements in the artboard.

    Pour afficher la fenêtre Structure du document, dans la barre de menus, choisissez Affichage, Autres fenêtres, Structure du document.To view the Document Outline window, on the menu bar choose View, Other Windows, Document Outline.

    Fenêtre Structure du documentDocument Outline window

    Les options disponibles dans la fenêtre Structure du document sont les suivantes :These are the options available in the Document Outline window:

    Structure du documentDocument Outline
    La vue principale de la fenêtre Structure du document affiche la hiérarchie d'un document dans une arborescence.The main view in the Document Outline window displays the hierarchy of a document in a tree structure. Vous pouvez utiliser la nature hiérarchique de la structure du document pour consulter le document à des niveaux de détail différents, et pour verrouiller et masquer des éléments séparément ou en groupes.You can use the hierarchical nature of the document outline to examine the document at varying levels of detail, and to lock and hide elements singly or in groups.

    Afficher/MasquerShow/hide
    Affiche ou masque les éléments de la planche graphique qui correspondent aux éléments de la structure du document.Displays or hides artboard elements that correspond to items in the Document Outline. Utilisez les boutons Afficher/Masquer , qui affichent le symbole d'un œil en cas d'affichage, ou appuyez sur Ctrl+H pour masquer les éléments, et sur Maj+Ctrl+H pour les afficher.Use the Show/hide buttons, which display a symbol of an eye when shown, or press CTRL+H to hide elements and SHIFT+CTRL+H to display them.

    Verrouiller/DéverrouillerLock/unlock
    Verrouille ou déverrouille les éléments de la planche graphique qui correspondent aux éléments de la structure du document.Locks or unlocks artboard elements that correspond to items in the Document Outline. Les éléments verrouillés ne peuvent pas être modifiés.Locked elements can't be modified. Utilisez les boutons Verrouiller/Déverrouiller , qui affichent un symbole de cadenas en cas de verrouillage, ou appuyez sur Ctrl+L pour verrouiller des éléments, et sur Maj+Ctrl+L pour les déverrouiller.Use the Lock/unlock buttons, which display a padlock symbol when locked, or press CTRL+L to lock elements and SHIFT+CTRL+L to unlock them.

    Rétablir l'étendue à pageRootReturn scope to pageRoot
    L'option en haut de la fenêtre Structure du document, qui présente un symbole de flèche vers le haut, retourne la structure du document à la portée précédente.The option at the top of the Document Outline window, which shows an up arrow symbol, returns the document outline to the previous scope. La portée supérieure n'est applicable que quand vous êtes dans la portée d'un style ou d'un modèle.Scoping up is applicable only when you're in the scope of a style or template.

Fenêtre PropriétésProperties window

La fenêtre Propriétés vous permet de définir des valeurs de propriété sur les contrôles.The Properties window enables you to set property values on controls. Voici à quoi elle ressemble :Here's what it looks like:

Fenêtre PropriétésProperties window

Plusieurs options apparaissent en haut de la fenêtre Propriétés.There are various options at the top of the Properties window. Vous pouvez modifier le nom de l'élément actuellement sélectionné à l'aide de la zone Nom .You can change the name of the currently selected element by using the Name box. Dans le coin supérieur gauche, il existe une icône qui représente l'élément actuellement sélectionné.In the upper-left corner, there's an icon that represents the currently selected element. Pour réorganiser les propriétés par catégorie ou par ordre alphabétique, cliquez sur Catégorie, Nomou Source dans la liste Réorganiser par .To arrange the properties by category or alphabetically, click Category, Name, or Source in the Arrange by list. Pour afficher la liste des événements pour un contrôle, cliquez sur le bouton Événements , symbolisé par un éclair.To see the list of events for a control, click the Events button, which displays a lightning bolt symbol. Pour rechercher une propriété, commencez à taper son nom dans la zone Propriétés de recherche .To search for a property, start to type the name of the property in the Search Properties box. La fenêtre Propriétés affiche les propriétés correspondant aux termes de recherche en cours de frappe.The Properties window displays the properties that match your search as you type. Certaines propriétés vous permettent de définir des propriétés avancées en sélectionnant un bouton de flèche vers le bas.Some properties allow you to set advanced properties by selecting a down arrow button. Pour plus d’informations sur l’utilisation des propriétés et la gestion des événements, consultez Démarrage rapide : ajout de contrôles et gestion des événementsFor more info on using properties and handling events, see Quickstart: adding controls and handling events

À droite de chaque valeur de propriété figure un marqueur de propriété qui apparaît comme un symbole de zone.To the right of each property value is a property marker that appears as a box symbol. L'apparence du marqueur de propriété indique s'il y a une liaison de données ou une ressource appliquée à la propriété.The appearance of the property marker indicates whether there's a data binding or a resource applied to the property. Par exemple, un symbole de zone vide indique une valeur par défaut, un symbole de zone noire indique généralement qu'une ressource locale a été appliquée, et enfin une zone orange indique généralement qu'une liaison de données a été appliquée.For example, a white box symbol indicates a default value, a black box symbol typically indicates that a local resource has been applied, and an orange box typically indicates a data binding has been applied. Quand vous cliquez sur le marqueur de propriété, vous pouvez accéder à la définition d'un style, ouvrir le générateur de liaisons de données ou ouvrir le sélecteur de ressources.When you click the property marker, you can navigate to the definition of a style, open the data binding builder, or open the resource picker.

Voir aussiSee Also

Working with elements in XAML Designer Working with elements in XAML Designer
Guide pratique pour créer et appliquer une ressource How to create and apply a resource
Procédure pas à pas : liaison aux données dans le concepteur XAMLWalkthrough: Binding to data in XAML Designer