Création d'une interface utilisateur à l'aide du concepteur XAML

Le concepteur XAML dans Visual Studio 2013 fournit une interface graphique pour vous aider à concevoir des applications de Windows Store générées à l'aide des applications XAML, WPF et Silverlight. 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. En outre, vous pouvez directement modifier le code XAML en mode XAML.

Espace de travail du concepteur XAML

L'espace de travail du concepteur XAML dans Visual Studio se compose de plusieurs éléments d'interface graphique. Ceux-ci incluent la planche graphique, la Boîte à outils, la fenêtre Périphérique, la fenêtre Structure du document, l'Explorateur de solutions, la fenêtre Propriétés et l'Éditeur XAML. Pour ouvrir le concepteur XAML, cliquez avec le bouton droit sur une page XAML dans l'Explorateur de solutions et sélectionnez Concepteur de vues.

Modes de conception

Le concepteur XAML fournit un mode XAML et un mode Design synchronisé du balisage XAML rendu de votre application. Un document XAML ouvert dans Visual Studio vous permet de basculer entre le mode Design et le mode XAML à l'aide des onglets Conception et XAML. En mode Design, la fenêtre contenant la planche graphique est la fenêtre active que vous pouvez utiliser comme surface de travail principale. Vous pouvez l'utiliser pour concevoir visuellement une page de votre application en ajoutant ou en dessinant des éléments, puis en les modifiant. Pour plus d'informations, consultez Travailler avec des éléments dans le concepteur XAML. Cette illustration montre la planche graphique en mode Design.

Vous pouvez utiliser le bouton Permuter les volets pour basculer vers la fenêtre qui s'affiche au-dessus : la planche graphique ou l'Éditeur XAML.

Ces fonctionnalités sont disponibles dans la planche graphique :

• Lignes d'alignement
  Les lignes d'alignement sont des limites d'alignement qui apparaissent comme des lignes pointillées rouge lorsque les bords des contrôles sont alignés ou lorsque les lignes de base de texte sont alignées. Les limites d'alignement apparaissent uniquement lorsque l'alignement sur les lignes d'alignement est activé.

• Quadrillage de grille
  Les rails Grid permettent de gérer les lignes et les colonnes dans un panneau Grid. Vous pouvez créer et supprimer des lignes et des colonnes, ainsi qu'ajuster leurs largeurs et hauteurs relatives. 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.

• Ornements de grille
  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. Lorsque vous faites glisser un ornement Grid, les largeurs ou les hauteurs des colonnes ou des lignes adjacentes se mettent à jour au fur et à mesure que vous déplacez la souris.

  Les ornements de Grid permettent de contrôler la largeur et la hauteur des lignes et des colonnes d'une Grid. Vous pouvez ajouter une nouvelle colonne ou ligne en cliquant sur le quadrillage de Grid. Lorsque vous ajoutez une nouvelle ligne ou ligne de colonne pour un panneau de 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. La mini-barre d'outils vous permet de définir des options de dimensionnement fixes, à une taille d'étoile et automatiques pour les lignes et les colonnes de Grid.

• 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. Pour plus d'informations sur la manipulation de contrôles en mode Design, consultez Travailler avec des éléments dans le concepteur XAML.

• Marges
  Les marges représentent la quantité d'espace fixe entre le bord d'un contrôle et le bord du conteneur associé. 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.

• Ornements de marge
  Vous pouvez utiliser des ornements de marge pour modifier les marges d'un élément par rapport à son conteneur de disposition. Lorsqu'un ornement de marge est ouvert, une marge n'est pas définie et l'ornement de marge affiche une chaîne interrompue. Lorsque la marge n'est pas définie, les éléments restent en place lorsque le conteneur de disposition est redimensionné au moment de l'exécution. Lorsqu'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).

• 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 lorsque vous déplacez le pointeur sur les angles de la zone bleue qui entoure un élément. Ces poignées permettent de faire pivoter, redimensionner, retourner, déplacer ou ajouter un rayon d'angle à l'élément. Le symbole de la poignée d'élément varie selon les fonctions et change par rapport à l'emplacement exact du pointeur. Si les poignées d'élément ne s'affichent pas, vérifiez que l'élément est sélectionné.

En mode Design, 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 :

Ces commandes sont disponibles sur cette barre d'outils :

• Zoom
  Le zoom vous permet de dimensionner l'aire de conception. Vous pouvez effectuer un zoom de 12,5 % à 800 % ou sélectionner des options telles que Ajuster à la sélection et Ajuster à tout.

• Afficher/Masquer la grille d'accrochage
  Affiche ou masque la grille d'accrochage qui indique le quadrillage. Le quadrillage est utilisé lorsque l'option Aligner sur le quadrillage ou Aligner sur les lignes d'alignement est activée.

• Activer ou désactiver l'alignement sur le quadrillage
  Si l'option Aligner sur le quadrillage est activée lorsque vous faites glisser un élément vers la planche graphique, l'élément a tendance à s'aligner sur les quadrillages horizontaux et verticaux les plus proches.

• Activer l'alignement sur les lignes d'alignement/Désactiver l'accrochage aux contrôles
  Les lignes d'alignement vous aident à aligner des contrôles les uns par rapport aux autres. Si l'option d'alignement sur les lignes d'alignement est activée, lorsque vous faites glisser un contrôle par rapport à d'autres contrôles, les limites d'alignement s'affichent lorsque les bords et le texte de certains contrôles sont alignés horizontalement ou verticalement. Une limite d'alignement apparaît sous forme de ligne en pointillés rouge.

En mode XAML, la fenêtre contenant l'éditeur XAML est la fenêtre active et l'éditeur XAML est votre outil de conception principal. Le langage XAML (Extensible Application Markup Language) fournit un vocabulaire XML déclaratif permettant de spécifier l'interface utilisateur d'une application. Le mode XAML inclut IntelliSense, la mise en forme automatique, la mise en surbrillance de la syntaxe et la navigation de balises. Cette illustration montre le mode XAML :

• Barre Mode fractionné
  La barre d'affichage fractionné apparaît en haut du mode XAML lorsque l'éditeur XAML s'affiche dans la fenêtre inférieure. La barre Mode fractionné vous permet de contrôler les tailles relatives du mode Design et du mode XAML. 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.

• Zoom de balisage
  Le zoom de balisage vous permet de dimensionner le mode XAML. Vous pouvez effectuer un zoom de 20 % à 400 %.

Fenêtre Périphérique

La fenêtre Périphérique du concepteur XAML pour Visual Studio vous permet de faire des simulations à l'aide de différentes options de vues, d'écrans et d'affichage pour votre application. La fenêtre Périphérique est disponible dans le menu Design lorsque vous travaillez dans le concepteur XAML. Voici un aperçu de ce à quoi il ressemble :

Il s'agit des options disponibles dans la fenêtre Périphérique :

• Afficher
  Spécifie différentes tailles et résolutions d'affichage de votre application.

• Orientation
  Spécifie différentes orientations pour l'application : Paysage ou Portrait.

• Bord
  Spécifie différents alignements de bord pour votre application : Les deux, Gauche, Droite ou Aucun.

• Contraste élevé
  Affiche l'aperçu de l'application en fonction du paramètre de contraste sélectionné. 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.

• Substituer la mise à l'échelle
  Active ou désactive l'émulation de la mise à l'échelle de document dans l'aire de conception. Cela vous permet d'augmenter le pourcentage de mise à l'échelle d'un facteur. Activez la case à cocher pour activer l'émulation. 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 jusqu'à 140 %. Cette option est désactivée si le pourcentage en cours de mise à l'échelle est de 180.

• Largeur minimale
  Spécifie le paramètre de largeur minimale. La largeur minimale peut être modifiée dans App.xaml.

• Thème
  Spécifie le thème d'application.

• Afficher le chrome
  Active et désactive le frame de tablette simulée autour de votre application en mode Design. Activez la case à cocher pour afficher le frame.

• Détourer pour afficher
  Spécifie le mode d'affichage. Activez la case à cocher pour détourer la taille du document par rapport à la taille d'affichage.

Fenêtre Structure du document

La fenêtre Structure du document dans le concepteur XAML vous permet d'effectuer les tâches suivantes :

• Afficher la structure hiérarchique de tous les éléments de la planche graphique.

• Sélectionnez les é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.). Pour plus d'informations, consultez Travailler avec des éléments dans le concepteur XAML

• Créez et modifiez les modèles des éléments qui sont des contrôles.

• Utilisez le menu contextuel pour les éléments sélectionnés. Le même menu est également disponible pour les éléments sélectionnés dans la planche graphique.

Les options disponibles dans la fenêtre Structure du document incluent :

• Structure du document
  La vue principale de la fenêtre Structure du document affiche la hiérarchie d'un document dans une arborescence. 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.

• Afficher/Masquer
  Affiche ou masque les éléments de la planche graphique qui correspondent aux éléments de la structure du document. Utilisez les boutons Afficher/Masquer qui affichent le symbole d'un œil en cas d'affichage, ou appuyez sur la touche Ctrl+H afin de masquer les éléments et sur Maj+Ctrl+H pour les afficher.

• Verrouiller/Déverrouiller
  Verrouille ou déverrouille les éléments de la planche graphique qui correspondent aux éléments de la structure du document. Les éléments verrouillés ne peuvent pas être modifiés. 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 Maj+Ctrl+L pour les déverrouiller.

• Rétablir l’étendue à
  L'option en haut de la fenêtre Structure du document, qui présente un symbole de flèche supérieur, retourne la structure du document à la portée précédente. La portée supérieure n’est applicable que lorsque vous êtes dans la portée d'un style ou d'un modèle.

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. Voici un aperçu de ce à quoi il ressemble :

Plusieurs options apparaissent en haut de la fenêtre Propriétés. Vous pouvez modifier le nom de l'élément actuellement sélectionné à l'aide de la zone Nom. Dans le coin supérieur gauche, il existe une icône qui représente l'élément actuellement sélectionné. Pour réorganiser les propriétés par catégorie ou par ordre alphabétique, cliquez sur Catégorie, Nom ou Source dans la liste Réorganiser par. Pour afficher la liste des événements pour un contrôle, cliquez sur le bouton Événements qui affiche un symbole d'éclair. Pour rechercher une propriété, commencez à saisir 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. 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. 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 d'événements

À droite de chaque valeur de propriété figure un marqueur de propriété qui apparaît comme un symbole de zone. L'apparence de ce marqueur de propriété indique s'il y a une liaison de données ou une ressource appliquée à la propriété. 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. Lorsque vous cliquez sur le marqueur de propriété, vous pouvez ouvrir le générateur de liaisons de données ou ouvrir le sélecteur de ressources, pour accéder à la définition d'un style.

Voir aussi

Tâches

Comment créer et appliquer une ressource

Comment lier des données dans le concepteur XAML

Concepts

Travailler avec des éléments dans le concepteur XAML

Autres ressources

Interface utilisateur du concepteur XAML, référence