Travailler avec des éléments dans le concepteur XAML

Vous pouvez ajouter des éléments (contrôles, dispositions et formes) à votre application en XAML, en code ou en utilisant le concepteur XAML. Cette rubrique décrit comment utiliser des éléments dans le concepteur XAML.

Ajout d'un élément à une disposition

La disposition est le processus de dimensionnement et de positionnement des éléments dans une interface utilisateur. Pour positionner les éléments visuels, vous devez les placer dans une disposition Panel. Un Panel a une propriété enfant qui est une collection de types FrameworkElement. Vous pouvez utiliser différents éléments enfants de Panel, tels que Canvas, StackPanel et Grid, pour servir de conteneurs de disposition, et positionner et organiser des éléments sur une page.

Par défaut, un panneau Grid est utilisé comme conteneur de disposition de niveau supérieur dans un document de page, dans une Application Windows Store conçue pour Windows à l'aide de JavaScript. Vous pouvez ajouter des panneaux de disposition, des contrôles ou d'autres éléments dans la mise en page de niveau supérieur.

Pour ajouter un élément à une disposition

• Dans la fenêtre Structure du document d'un projet Visual Studio, effectuez l'une des opérations suivantes :

  • Double-cliquez sur un élément dans la boîte à outils (ou sélectionnez un élément dans la boîte à outils et appuyez sur entrée).

  • Faites glisser un élément de la boîte à outils vers la planche graphique.

  • Dans la boîte à outils, sélectionnez l'un des outils de dessin (par exemple, Ellipse ou Rectangle), puis dessinez un élément dans le panneau actif.

Modification de l'ordre de superposition des éléments

Lorsque deux éléments de la planche graphique sont dans le concepteur XAML, un élément apparaît devant l'autre dans l'ordre de superposition. À la fin de la liste des éléments de la fenêtre Structure du document se trouve l'élément le plus en avant (sauf lorsque la propriété ZIndex pour un élément est définie). Lorsque vous insérez un élément dans un document ou un conteneur de disposition, il est automatiquement placé devant les autres éléments dans l'élément conteneur actif. Pour modifier l'ordre des éléments, vous pouvez utiliser les commandes Ordre ou faire glisser les éléments dans l'arborescence d'objets de la fenêtre Structure du document.

Pour changer l'ordre de superposition

• Effectuez l'une des opérations suivantes :

  • Dans la fenêtre Structure du document, faites glisser les éléments vers le haut ou vers le bas pour créer l'ordre de superposition souhaité.

  • Cliquez avec le bouton droit sur l'élément dans la fenêtre Structure du document ou la planche graphique dont vous souhaitez modifier l'ordre de superposition, pointez sur Ordre, puis cliquez sur l'une des options suivantes :

    • Mettre au premier plan pour amener l'élément au début de l'ordre.

    • Avancer d'un index pour faire avancer l'élément d'un niveau dans l'ordre.

    • Reculer d'un index pour faire reculer l'élément d'un niveau dans l'ordre.

    • Mettre en arrière-plan pour envoyer l'élément à la fin de l'ordre.

  • Modifiez la propriété ZIndex dans la section Disposition de la fenêtre Propriétés. Pour ce qui est de la superposition des éléments, la propriété ZIndex est prioritaire sur l'ordre des éléments affichés dans la fenêtre Structure du document. Un élément dont la valeur ZIndex est plus basse apparaît devant lorsque des éléments se chevauchent.

Modification de l'alignement d'un élément

Vous pouvez aligner des éléments dans la planche graphique à l'aide des commandes de menu ou en faisant glisser des éléments vers les lignes d'alignement.

Une ligne d'alignement est un repère visuel qui vous aide à aligner un élément par rapport à d'autres éléments dans l'application.

Pour aligner plusieurs éléments à l'aide de commandes de menu

1. Sélectionnez les éléments que vous souhaitez aligner. Vous pouvez sélectionner plusieurs éléments en appuyant sur la touche CTRL et en la maintenant enfoncée pendant la sélection des éléments.

2. Sélectionnez l'une des propriétés suivantes sous HorizontalAlignment dans la section Disposition de la fenêtre Propriétés : Gauche, Centre, Droite ou Étirer.

3. Sélectionnez l'une des propriétés suivantes sous VerticalAlignment dans la section Disposition de la fenêtre Propriétés : Haut, Centre, Bas ou Étirer.

Pour aligner plusieurs éléments à l'aide des lignes d'alignement

• Dans le concepteur XAML, dans une disposition contenant au moins deux éléments, faites glisser ou redimensionnez l'un des éléments afin que le bord soit aligné avec un autre élément.

  Lorsque les bords sont alignés, une limite d'alignement apparaît pour indiquer l'alignement. La limite d'alignement est une ligne en pointillés rouge. Les limites d'alignement apparaissent uniquement lorsque l'alignement sur les lignes d'alignement est activé. Pour obtenir une illustration de la planche graphique montrant une limite d'alignement, consultez Création d'une interface utilisateur à l'aide du concepteur XAML.

Modification des marges d'un élément

Dans le concepteur XAML, les marges déterminent la quantité d'espace vide autour d'un élément sur la planche graphique. Par exemple, les marges spécifient l'espace entre les bords extérieurs d'un élément et les limites d'un panneau Grid contenant cet élément. Les marges spécifient également la quantité d'espace entre les éléments contenus dans un StackPanel.

Pour modifier les marges d'un élément

1. Sélectionnez l'élément pour lequel vous souhaitez modifier les marges.

2. Sous Disposition dans la fenêtre Propriétés, modifiez la valeur (en pixels ou en unités indépendantes des périphériques, qui sont approximativement de 1/96 de pouce) d'une ou de plusieurs propriétés Marge (Haut, Gauche, Droite ou Bas).

Pour modifier les marges d'un élément dans la planche graphique

• Pour modifier les marges d'un élément par rapport à son conteneur de disposition, cliquez sur les ornements de marge qui apparaissant autour de l'élément dans la planche graphique lorsque l'élément est sélectionné et se trouve dans un conteneur de disposition. Pour obtenir une illustration des ornements de marge, consultez Création d'une interface utilisateur à l'aide du concepteur XAML.

  Si un ornement de marge est ouvert, verticalement ou horizontalement, la marge n'est pas définie. Si un ornement de marge est fermé, cela signifie que la marge en question est définie.

  Lorsque vous ouvrez un ornement de marge et que la marge opposée n'est pas définie, celle-ci se voit affecter la valeur appropriée selon l'emplacement de l'élément dans la planche graphique. Pour les marges opposées, telles que les marges Gauche et Droite, au moins une propriété est toujours définie.

  Important

  Les éléments placés à l'intérieur de certains conteneurs de disposition (par exemple, un Canvas) n'ont pas d'ornements de marge. Les éléments placés dans un StackPanel ont des ornements de marge pour les marges de gauche et de droite ou les marges supérieure et inférieure, en fonction de l'orientation du StackPanel.

Regroupement et dégroupement d'éléments

Le regroupement de plusieurs éléments dans le concepteur XAML crée un conteneur de disposition et place ces éléments dans le conteneur. Le fait de regrouper des éléments dans un conteneur de disposition permet de faciliter la sélection, le déplacement et la transformation du groupe, comme si les éléments de ce groupe ne constituaient qu'un seul élément. Le regroupement est également utile pour l'identification d'éléments liés les uns aux autres d'une certaine façon, tels que les boutons qui composent un élément de navigation. Lorsque vous dissociez des éléments, vous supprimez simplement le conteneur de disposition contenant ceux-ci.

Pour regrouper des éléments dans un nouveau conteneur de disposition

1. Sélectionnez les éléments que vous souhaitez regrouper. (Pour sélectionner plusieurs éléments, appuyez sur la touche CTRL et maintenez-la enfoncée pendant que vous cliquez dessus.)

2. Cliquez avec le bouton droit de la souris sur les éléments sélectionnés, pointez vers Grouper, puis cliquez sur le type de conteneur de disposition dans lequel vous souhaitez que le groupe réside.

   Conseil

   Si vous sélectionnez Viewbox, T:Windows.UI.Xaml.Controls.Border ou ScrollViewer pour regrouper les éléments, ceux-ci sont placés dans un nouveau panneau Grid dans Viewbox, Border ou ScrollViewer. Si vous dissociez des éléments dans l'un de ces conteneurs de disposition, seul le panneau Viewbox, Border ou ScrollViewer est supprimé. Le panneau Grid est conservé. Pour supprimer le panneau Grid, redissociez les éléments.

Pour dissocier des éléments et supprimer la disposition

• Cliquez avec le bouton droit sur le groupe que vous souhaitez dissocier et cliquez sur Dissocier.

Vous pouvez également regrouper ou dissocier des éléments en cliquant avec le bouton droit sur les éléments sélectionnés dans la fenêtre Structure du document et en cliquant sur Grouper et Dissocier.

Réinitialisation de la disposition des éléments

La commande Réinitialiser la disposition permet de restaurer les valeurs par défaut des propriétés de disposition spécifiques d'un élément. Cette commande vous permet de réinitialiser la marge, l'alignement, la largeur, la hauteur et la taille d'un élément, de manière individuelle ou collective.

Pour réinitialiser la disposition des éléments

• Dans la fenêtre Structure du document ou dans la planche graphique, cliquez avec le bouton droit sur l'élément, sélectionnez Réinitialiser la disposition, puis cliquez sur la propriété à réinitialiser (ou cliquez sur Tous afin de réinitialiser toutes les propriétés de disposition pour l'élément).

Voir aussi

Concepts

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