Outils de conception du runtime XAML pour WinUI 3

Visual Studio inclut un ensemble d’outils d’exécution qui vous permettent de concevoir, d’itérer et d’inspecter votre XAML WinUI 3 pendant l’exécution de votre application. Utilisés ensemble, ils vous offrent un cycle rapide de modification-rechargement-inspection qui affiche votre véritable interface utilisateur — styles réels, modèles de données réels, animations réelles — plutôt qu’une approximation statique.

Remarque

Le concepteur XAML de Visual Studio (l’onglet Création par glisser-déposer) ne prend actuellement pas en charge les projets WinUI 3. Si vous avez ouvert un .xaml fichier et que vous voyez uniquement l’éditeur XML, votre installation n’est pas interrompue , le concepteur n’est pas disponible pour WinUI 3. La demande de fonctionnalité fait l’objet d’un suivi sur Developer Community : Ajouter la prise en charge du Concepteur XAML pour les applications de bureau WinUI 3. Pour plus d’informations sur l’effort d’ingénierie, consultez la discussion windowsAppSDK #4710.

Les outils d’exécution décrits dans cet article sont utiles si un concepteur est disponible ou non. Cet article décrit le flux de travail.

Ce que vous allez utiliser

Tool	Qu’est-ce que cela fait ?	Comment l’ouvrir
XAML Rechargement à chaud	Envoie (push) des modifications XAML à votre application en cours d’exécution sans redémarrer	Automatique : modifier n’importe quel `.xaml` fichier lors du débogage
Arborescence visuelle dynamique	Affiche l’arborescence complète des éléments d’exécution et vous permet de sélectionner des éléments dans l’application	Déboguer>> l'arborescence d’éléments visuels Windows
Live Property Explorer	Affiche et vous permet de modifier chaque propriété sur l’élément sélectionné au moment de l’exécution	Débogage>Windows>Explorateur de propriétés dynamiques
Aperçu XAML en direct	Affiche votre application en cours d’exécution à l’intérieur de Visual Studio pour vous permettre d’inspecter sans changer de fenêtre	Débogage>Windows>Aperçu en direct XAML

Tip

Ancrez l’Arborescence visuelle active et l’Explorateur de propriétés actif côte à côte. Ensemble, ils vous donnent une vue d’inspection détaillée qui affiche les valeurs d’exécution réelles.

Prerequisites

Visual Studio 2022 version 17.0 ou version ultérieure (XAML Rechargement à chaud et Live Visual Tree sont inclus).
Un projet WinUI 3 utilisant le SDK d'application Windows. Consultez Créer et exécuter un projet WinUI 3 pour en créer un.
Votre projet doit cibler .NET 6 ou version ultérieure (C#) ou utiliser C++/WinRT.

Étape 1 : Démarrez votre application dans le débogueur

Appuyez sur F5 (ou déboguer>démarrer le débogage). XAML Rechargement à chaud s’active automatiquement lorsque le débogueur se connecte.

La barre d’outils XAML Rechargement à chaud s’affiche sur la superposition intégrée à l’application. Si vous ne le voyez pas, vérifiez que le paramètre est activé :

Accédez à Outils>Débogage>>.
Vérifiez que l’option Activer le Rechargement à chaud XAML est cochée.

Important

Le débogueur est nécessaire pour XAML Rechargement à chaud. L’exécution sans débogage (Ctrl+F5) désactive Rechargement à chaud, l’arborescence des visuels en direct et l’Explorateur de propriétés dynamiques.

Étape 2 : Modifier XAML et voir instantanément les modifications

Une fois votre application en cours d’exécution, basculez vers n’importe quel .xaml fichier dans l’éditeur et apportez une modification, par exemple, modifiez une Background couleur ou ajoutez un nouveau Buttonfichier. L’application en cours d’exécution se met à jour en une ou deux secondes, sans redémarrer.

Ce que Rechargement à chaud peut et ne peut pas faire

Rechargement à chaud gère les modifications les plus courantes :

Ajout, suppression ou réorganisation d’éléments
Modification des valeurs des propriétés (couleurs, marges, texte, tailles)
Ajout ou modification de styles et de dictionnaires de ressources
Modification du contenu du modèle de données

Certaines modifications nécessitent un redémarrage :

Ajout de nouvelles classes, de gestionnaires d’événements du code sous-jacent ou de modifications x:Class
Modification des App.xaml dictionnaires fusionnés (parfois)
Modification d’expressions x:Bind qui référencent de nouvelles propriétés

Lorsque Rechargement à chaud ne peut pas appliquer de modification, la barre d'outils affiche une notification. Redémarrez simplement l’application pour récupérer ces modifications.

Pour plus d’informations, consultez XAML Rechargement à chaud.

Étape 3 : Inspecter l’arborescence visuelle et les propriétés

Ouvrez la fenêtre Arborescence de visuels dynamiques (Débogage>Windows>Live Visual Tree). Cette fenêtre affiche chaque élément de l’arborescence de l’interface utilisateur de votre application en cours d’exécution, organisé par les relations parent-enfant.

Sélectionner des éléments visuellement

Dans la barre d’outils Arborescence visuelle active, activez Sélectionner un élément dans l’application en cours d’exécution (le bouton en forme de viseur).
Cliquez sur n’importe quel élément dans votre application en cours d’exécution : l’arborescence accède à cet élément et l’Explorateur de propriétés live affiche ses propriétés.

Il s’agit de l’équivalent d’exécution d’un clic sur un élément sur une surface de conception, sauf qu’il reflète exactement ce que votre application restitue, y compris les éléments créés dynamiquement dans le code.

Modifier les propriétés au moment de l’exécution

Dans Live Property Explorer, vous pouvez modifier les valeurs de propriété en temps réel. Par exemple:

Modifiez l’espacement d’un Margin pour voir immédiatement l’effet.
Définissez Visibility sur Collapsed pour tester ce qui se passe lorsqu’un élément est masqué.
Ajustez Height ou Width pour tester les mises en page responsives.

Ces modifications d’exécution ne sont pas enregistrées dans votre fichier XAML. Elles sont destinées à l’expérimentation. Une fois que vous avez trouvé des valeurs comme vous le souhaitez, tapez-les dans votre .xaml fichier (où Rechargement à chaud les récupère et les rend permanents).

Étape 4 : Utiliser XAML Live Preview

XAML Live Preview affiche votre application en cours d’exécution dans un onglet Visual Studio. Vous pouvez donc afficher l’application et votre source XAML côte à côte sans changer de fenêtre.

Pour l’ouvrir : Debug>Windows>XAML Live Preview.

Cela est particulièrement utile sur les configurations à moniteur unique où Alt-Tabbing entre l’application et Visual Studio est peu pratique.

Pour plus d’informations, consultez XAML Live Preview.

Recommandé : Créer une page de terrain de jeu d’interface utilisateur

Créez une page de terrain de jeu dédiée dans votre projet , une page dont seul objectif est de vous permettre d’expérimenter des contrôles, des styles et des mises en page. Cela vous donne un bloc-notes qui est toujours prêt pour l’itération visuelle, et il s’associe particulièrement bien aux outils d’exécution ci-dessus.

Configurer le terrain de jeu

Cliquez avec le bouton droit sur votre projet dans Explorateur de solutions, puis sélectionnez Ajouter>un nouvel élément>vide (WinUI 3). Nommez-le UIPlayground.xaml.

Dans UIPlayground.xaml, ajoutez une ScrollViewer section avec pour chaque contrôle ou modèle que vous souhaitez essayer :

<Page
    x:Class="MyApp.UIPlayground"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <ScrollViewer Padding="24">
        <StackPanel Spacing="24">

            <!-- Section: Buttons -->
            <TextBlock Text="Buttons" Style="{StaticResource SubtitleTextBlockStyle}"/>
            <StackPanel Orientation="Horizontal" Spacing="8">
                <Button Content="Standard"/>
                <Button Content="Accent" Style="{StaticResource AccentButtonStyle}"/>
                <ToggleButton Content="Toggle"/>
                <HyperlinkButton Content="Link" NavigateUri="https://learn.microsoft.com"/>
            </StackPanel>

            <!-- Section: Text input -->
            <TextBlock Text="Text input" Style="{StaticResource SubtitleTextBlockStyle}"/>
            <TextBox PlaceholderText="Type here..." Width="300" HorizontalAlignment="Left"/>
            <PasswordBox PlaceholderText="Password" Width="300" HorizontalAlignment="Left"/>

            <!-- Add more sections as needed -->

        </StackPanel>
    </ScrollViewer>
</Page>

Rendre le terrain de jeu facile à atteindre. Pendant le développement, définissez-le comme page de démarrage dans App.xaml.cs:
```
// In App.xaml.cs, OnLaunched method — swap in for quick playground access:
// rootFrame.Navigate(typeof(UIPlayground));
```
Ou, si votre application utilise un NavigationView, ajoutez un élément de menu qui apparaît uniquement dans les versions de débogage. Par exemple, dans le code-behind de votre fenêtre principale :
```
// In your main window or shell page constructor, after InitializeComponent():
#if DEBUG
    NavView.MenuItems.Add(new NavigationViewItem
    {
        Content = "UI Playground",
        Tag = typeof(UIPlayground)
    });
#endif
```
où NavView est le x:Name de votre contrôle NavigationView.

Comment utiliser le terrain de jeu

Appuyez sur F5 pour démarrer l’application et accédez à la page de terrain de jeu.
Ouvrez le .xaml fichier côte à côte avec l’application en cours d’exécution (ou utilisez XAML Live Preview).
Ajouter ou modifier des contrôles dans l’éditeur XAML : Rechargement à chaud envoie des modifications instantanément.
Utilisez Live Visual Tree pour cliquer sur les contrôles rendus et inspecter leurs valeurs de disposition réelles dans Live Property Explorer.
Lorsque vous êtes satisfait de l’apparence d’un contrôle, copiez le code XAML dans votre page réelle.

Ce modèle vous donne un cycle « type-reload-inspect » et, étant donné qu’il exécute du code réel, vous voyez des modèles de données réels, des styles réels et des animations réelles.

Comparaison des approches au moment de la conception et au moment de l’exécution

Voici comment les tâches courantes de conception de l’interface utilisateur sont mappées aux outils d’exécution :

Tâche	Outil d’exécution
Ajouter un contrôle à la page	Tapez l’élément XAML : IntelliSense termine la balise et les propriétés requises
Afficher un aperçu du contrôle	Voyez-le en direct dans l’application en cours d’exécution via Rechargement à chaud
Sélectionner un élément à inspecter	Utiliser Live Visual Tree>Sélectionner un élément (réticule)
Afficher ou modifier les propriétés	Utiliser Live Property Explorer
Ajuster la taille ou la position	Modifier `Width`, `Margin`, `Height` dans XAML ou dans Live Property Explorer

Conseils pour un flux de travail efficace

Utilisez l’application Galerie WinUI 3. Installez-le à partir du Microsoft Store ou générez-le à partir de GitHub. Il affiche chaque contrôle WinUI 3 avec des exemples interactifs et du code XAML prêt pour la copie. Considérez-le comme un catalogue visuel que vous pouvez parcourir avant d’écrire XAML.
Laissez votre page de playground ouverte. Traitez-le comme un guide de style vivant pour votre application.
Utiliser d:DesignHeight et d:DesignWidth. Même sans le concepteur, ces attributs aident IntelliSense à conserver une taille cohérente lorsque vous les ouvrez dans l’éditeur.
Combinez avec la fenêtre Échecs de liaison XAML. Ouvrez-le à partir du débogage>Windows>Échecs de liaisonXAML pour intercepter les erreurs de liaison que le concepteur n’aurait jamais affichées.
Utilisez la boîte à outils de la communauté. La Windows Community Toolkit fournit des contrôles et des assistances qui réduisent la quantité de disposition dont vous avez besoin pour coder manuellement.

Commentaires

Cette page a-t-elle été utile ?

Last updated on 2026-09-19