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 avoir une comparaison des outils.Also see Design 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 Appareil, 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 Design du concepteur XAML

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

Lignes d’alignement : 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 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.

Quadrillages : les quadrillages de Grid permettent de gérer les lignes et les colonnes dans un panneau Grille.Grid rails 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 grille : un ornement de grille apparaît sous la forme d’un triangle avec une ligne verticale ou horizontale qui y est rattachée sur le quadrillage.Grid adorners 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 de grille, 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 ornements de grille permettent de contrôler la largeur et la hauteur des lignes et des colonnes d’une grille.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.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 Grille qui comporte 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 grille.The mini-toolbar enables you to set sizing options for Grid rows and columns.

Poignées de redimensionnement : des poignées de redimensionnement apparaissent sur les contrôles sélectionnés et vous permettent de les redimensionner.Resize handles 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 des contrôles en mode Création, consultez Travailler avec des éléments dans le concepteur XAML.For more information about manipulating controls in Design view, see Working with elements in XAML Designer.

Marges : les marges représentent la quantité d’espace fixe entre le bord d’un contrôle et le bord de son conteneur.Margins 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 marge : vous pouvez utiliser des ornements de marge pour modifier les marges d’un élément par rapport à son conteneur de disposition.Margin adorners 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 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 move with the margin as the layout container is resized at run time (the margin remains fixed).

Poignées d’élément : 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.Element handles 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 Design

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

Zoom : le zoom vous permet de dimensionner l’aire de conception.Zoom 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’accrochage : affiche ou masque la grille d’accrochage qui montre le quadrillage.Show/Hide snap grid Displays or hides the snap grid that shows the gridlines. Le quadrillage est utilisé quand vous activez l’alignement sur le quadrillage ou l’alignement sur les lignes d’alignement.Gridlines are used when you enable either snapping to gridlines or snapping to snaplines.

Activer/désactiver l’accrochage au quadrillage : si l’accrochage au 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.Turn on/off snapping to gridlines 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 les lignes d’alignement : les lignes d’alignement vous aident à aligner les contrôles les uns par rapport aux autres.Turn on/off snapping to snaplines 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:

Mode XAML

Barre Mode fractionné : la barre Mode fractionné apparaît en haut de la vue XAML quand l’éditeur XAML se trouve dans la fenêtre du bas.Split view bar 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 balisage : le zoom de balisage vous permet de dimensionner la vue XAML.Markup Zoom 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 Appareil 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 Périphérique

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

Affichage : spécifie différentes tailles et résolutions d’affichage pour l’application.Display Specifies different display sizes and resolutions for the app.

Orientation : spécifie différentes orientations pour l’application : Paysage ou Portrait.Orientation Specifies different orientations for the app: Landscape or Portrait.

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

Contraste élevé : affiche un aperçu de l’application en fonction du paramètre de contraste sélectionné.High Contrast Preview the app based on the selected contrast setting. Ce paramètre, quand 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, overrides the RequestedTheme property set in App.xaml.

Substituer la mise à l’échelle : active ou désactive l’émulation de la mise à l’échelle de document dans l’aire de conception.Override scaling 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 minimale : spécifie le paramètre de largeur minimale.Minimum width Specifies the minimum width setting. La largeur minimale peut être changée dans App.xaml.The minimum width can be changed in App.xaml.

Thème : spécifie le thème de l’application.Theme 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 chrome : active et désactive le cadre de tablette simulé autour de votre application en mode Création.Show chrome 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 afficher : spécifie le mode d’affichage.Clip to display 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 Travailler avec des éléments dans le concepteur XAML.For more information, 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 document

    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 document : la vue principale de la fenêtre Structure du document affiche la hiérarchie d’un document dans une arborescence.Document Outline 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/masquer : affiche ou masque les éléments de la planche graphique qui correspondent aux éléments de la structure du document.Show/hide 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 Mah+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éverrouiller : verrouille ou déverrouille les éléments de la planche graphique qui correspondent aux éléments de la structure du document.Lock/unlock 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 à la racine de la page : l’option en haut de la fenêtre Structure du document, qui présente un symbole de flèche vers le haut, rétablit la structure du document à l’étendue précédente.Return scope to pageRoot 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és

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 information 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