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

Le concepteur XAML dans Visual Studio 2012 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.

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.

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.

Mode Design du concepteur XAML

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

Le quadrillage de Grid permet de gérer des lignes et des colonnes dans un volet Grille. 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 Marge 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 :

Commandes du mode Design

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 :

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 %.

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

Fenêtre Périphérique

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

Vue

Spécifie l'orientation et la disposition de votre application. Les modèles de projet pour les applications Windows Store générées à l'aide du mode XAML (grille, fractionnement et vide) peuvent détecter et transmettre les vues mentionnées ci-dessus. Chaque page des modèles fournit ces vues :

  • Paysage. Vue pleine page (L x H). Il s'agit de la vue par défaut.

  • Aligné. S'affiche lorsque l'application est alignée sur un côté par l'utilisateur. L'application effectue un panoramique verticalement sur toutes les pages. Dans cette vue, votre application a une largeur de 320 pixels.

  • Rempli. S'affiche lorsque l'utilisateur aligne deux applications sur le côté. Dans cette vue, la largeur de votre application est limitée par 322 pixels.

  • Portrait. Vue pleine page (H x L). Dans cette vue, les valeurs de largeur et de hauteur de votre application sont échangées.

Selon la vue définie par l'utilisateur, certaines vues peuvent être désactivées. Par exemple, si vous définissez la résolution d'écran à 1280 x à 800, les options Rempli et Aligné sont toutes les deux désactivées. Pour les contrats, certains états visuels, décrits dans la section suivante, peuvent ne pas être disponibles.

État visuel

Spécifie l'état actuel dans le groupe d'états visuels ApplicationViewState qui s'affiche pour vous permettre de modifier l'affichage actuel. Cette option est désactivée si ces rapports sont introuvables dans le document actif. (Les états sont inclus et définis par défaut dans le modèle d'élément Page de base dans Visual Studio.)

Afficher

Spécifie la résolution d'affichage du périphérique pour lequel vous créez votre application.

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.

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.

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.

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.

Fenêtre Structure du document

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.

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 :

Propriétés (fenêtre)

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 des é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.

Ajouts de la communauté

Afficher:
© 2015 Microsoft