Xaml Live Preview : Capturer et modifier l’interface utilisateur de l’application de bureau

Avec XAML Live Preview, vous pouvez capturer l’interface utilisateur d’une application de bureau et l’intégrer dans une fenêtre ancrée dans Visual Studio, ce qui facilite l’utilisation du rechargement à chaud XAML pour modifier l’application, puis afficher ces modifications en temps réel lorsque vous les effectuez.

Fenêtre de prévisualisation en direct XAML

La fenêtre XAML Live Preview est disponible pendant le débogage. Pour l’ouvrir, accédez à Déboguer>Windows>XAML Live Preview.

À compter de Visual Studio 2022 version 17.14, XAML Live Preview et XAML Hot Reload sont disponibles au moment du design dans les applications .NET MAUI et pas seulement pendant une session de débogage. Les appareils et émulateurs Android sont également pris en charge.

Sélectionnez le bouton Afficher dans l'aperçu en direct de XAML dans la barre d’outils de l’application.

Défilement et zoom

Outre le défilement avec les barres de défilement, vous pouvez également utiliser les interactions suivantes :

• Une roulette de souris, verticale et horizontale (si votre souris la prend en charge).
• Le défilement à deux doigts sur le pavé tactile, à la fois vertical et horizontal.
• Touche Ctrl maintenue enfoncée avec une action de glisser de la souris.

Quant au zoom, vous pouvez également utiliser les interactions suivantes :

• Boutons Zoom avant/arrière dans le coin inférieur gauche.
• Appuyez surle raccourci clavier Ctrl +plus (+) ou Ctrl+moins signe (-), si vous préférez utiliser un clavier.
• Appuyer sur la touche Ctrl associé à un mouvement de roulette de souris, ou bien effectuer un geste de pincement pour zoomer avec le pavé tactile. Un bonus supplémentaire de l’utilisation d’une souris est de maintenir une zone de contrôle.

Sélection d’éléments

La sélection d’éléments dans XAML Live Preview est similaire à la sélection dans une application en cours d’exécution. Cela vous permet de trouver des éléments dans l'arborescence visuelle active ou dans le XAML d'origine.

La sélection d’élément est contrôlée par les quatre premiers boutons de barre d’outils (de gauche à droite).

Les boutons de barre d’outils produisent les actions suivantes :

• La sélection d’élément démarre l’action de sélection d’élément ; en d’autres termes, il met en surbrillance les éléments lorsque vous déplacez votre souris sur le contenu de l’application dans XAML Live Preview. Lorsque vous cliquez sur un élément, il est sélectionné dans l’arborescence des visuels en direct. Il accède également à la source si l’élément Sélectionné en préversion est activé et que le code XAML source est disponible. Ce comportement est le même que dans l’Arborescence des Visuels en Direct.
• Afficher les informations d’élément pendant la sélection est un bouton bascule qui contrôle l’affichage de la taille, de la couleur et des informations de police sur l’élément sous votre souris.
• Just My XAML est un bouton bascule qui contrôle les éléments à mettre en surbrillance : tous ou uniquement les éléments avec le code source XAML disponible dans la solution. Ce comportement est le même que dans l’Arborescence des Visuels en Direct.
• Aperçu de l'élément sélectionné est un bouton bascule qui contrôle la navigation vers le XAML source lorsqu’un élément est sélectionné. Elle est désactivée par défaut. Ce comportement est le même que dans l’Arborescence des Visuels en Direct.

Dirigeants

Les règles vous aident à aligner des éléments dans votre application. Ils affichent la distance, dans les unités d’application, vers la règle précédente. De cette façon, ils permettent de vérifier les distances entre différentes parties de votre application.

Le deuxième groupe de boutons de la barre d’outils contrôle les règles, dans l'ordre suivant (de gauche à droite) :

• Ajoutez une règle verticale. Ajoute une unique règle verticale. Si vous cliquez sur ce bouton quelques fois dans une ligne, il place de nouvelles règles afin qu’elles ne chevauchent pas les règles existantes.
• Ajouter une règle horizontale. Ajoute une règle horizontale unique, similaire à la règle verticale.
• Supprimez toutes les règles. Supprime toutes les règles à la fois.
• Sélectionnez la couleur de règle. Modifie la couleur des règles.
• Activer/désactiver la visibilité de la règle. Masque ou affiche toutes les règles en un seul clic.

Les règles sont faciles à utiliser avec le clavier. Vous pouvez naviguer autour d'eux avec la touche Tab. Vous pouvez utiliser les touches fléchées pour déplacer les règles d'un pixel à la fois, ou appuyer sur Ctrl associé aux touches fléchées pour les déplacer de 10 unités d’appli à la fois. La touche Del supprime la règle actuellement sélectionnée. Vous pouvez également supprimer une règle avec une souris en sélectionnant le bouton Supprimer la règle près de l’étiquette.

Vous pouvez également ajouter des règles autour d’un élément lors de l’utilisation de la sélection d’élément. Un clic droit ajoute des règles verticales. Pour ajouter des règles horizontales, sélectionnez et maintenez la touche Maj enfoncée lorsque vous cliquez avec le bouton droit.

Applications multi-fenêtres

Si votre application a plusieurs fenêtres, vous pouvez choisir la fenêtre à afficher à l’aide de la zone de liste déroulante Fenêtre. Vous pouvez également utiliser le bouton Afficher en direct XAML dans la barre d’outils de l’application qui se trouve dans la fenêtre que vous souhaitez afficher en préversion.

Plateformes prises en charge

La version initiale de Visual Studio 2022 prend en charge les plateformes et les scénarios de débogage suivants.

Limites

XAML Live Preview fonctionne en capturant une capture d’écran d’application plusieurs fois par seconde et utilise des API disponibles comme PrintWindow. Il est soumis aux limitations suivantes :

• Si une partie d’une fenêtre d’application est hors écran, cette partie n’est probablement pas susceptible d’afficher les modifications de rechargement à chaud XAML.
• Une fenêtre peut désactiver la capture d’écran et devenir indisponible pour xaml Live Preview à l’aide de SetWindowDisplayAffinity avec WDA_EXCLUDEFROMCAPTURE ou DwmSetWindowAttribute avec DWMWA_CLOAK.

Étapes suivantes

En savoir plus sur le XAML Hot Reload, qui fonctionne étroitement avec XAML Live Preview.

Contenu connexe

Notes de publication de Visual Studio 2022