Strumenti di progettazione del runtime XAML per WinUI 3

Visual Studio include un set di strumenti di runtime che consentono di progettare, scorrere ed esaminare il codice XAML winUI 3 mentre l'app è in esecuzione. Usati insieme, offrono un ciclo rapido di modifica-ricaricamento-ispezione che mostra l'interfaccia utente reale, ovvero stili reali, modelli di dati reali, animazioni reali, piuttosto che un'approssimazione statica.

Gli strumenti di runtime descritti in questo articolo sono utili sia che un designer sia disponibile oppure no. Questo articolo illustra il flusso di lavoro.

Cosa userai

Prerequisites

• Visual Studio 2022 versione 17.0 o successiva (sono inclusi XAML Ricaricamento rapido e Live Visual Tree).
• Un progetto WinUI 3 che usa il SDK per app di Windows. Vedere Creare ed eseguire un progetto WinUI 3 per crearne uno.
• Il progetto deve avere come destinazione .NET 6 o versione successiva (C#) o usare C++/WinRT.

Passaggio 1: Avviare l'app nel debugger

Premere F5 (o Debug>Avvia il debug). Xaml Ricaricamento rapido viene attivato automaticamente quando il debugger è collegato.

La barra degli strumenti XAML Ricaricamento rapido viene visualizzata nell'overlay dell'app. Se non viene visualizzato, verificare che l'impostazione sia abilitata:

1. Passare a Strumenti>Opzioni>debug>Ricaricamento rapido XAML.
2. Verificare che l'opzione Abilita Ricaricamento rapido XAML sia selezionata.

Passaggio 2: Modificare XAML e visualizzare immediatamente le modifiche

Con l'app in esecuzione, passa a un file .xaml qualsiasi nell'editor e apporta una modifica, ad esempio cambia un colore Background o aggiungi un nuovo Button. L'app in esecuzione viene aggiornata entro un secondo o due secondi, senza riavviare.

Cosa Ricaricamento rapido può e non può fare

Ricaricamento rapido gestisce le modifiche più comuni:

• Aggiunta, rimozione o riordinamento di elementi
• Modifica dei valori delle proprietà (colori, margini, testo, dimensioni)
• Aggiungere o modificare stili e dizionari di risorse
• Modifica del contenuto del modello di dati

Alcune modifiche richiedono un riavvio:

• Aggiunta di nuove classi, gestori di eventi code-behind o modifiche x:Class
• Modificare i dizionari uniti App.xaml (talvolta)
• Modifica delle x:Bind espressioni che fanno riferimento a nuove proprietà

Quando Ricaricamento rapido non può applicare una modifica, la barra degli strumenti visualizza una notifica. È sufficiente riavviare l'app per raccogliere tali modifiche.

Per altre informazioni, vedi Ricaricamento rapido XAML.

Passaggio 3: Esaminare la struttura ad albero visuale e le proprietà

Aprire la finestra Struttura ad albero visuale attiva (Debug>Windows>Live Visual Tree). Questa finestra mostra ogni elemento nell'albero dell'interfaccia utente dell'app in esecuzione, organizzato in base alle relazioni padre-figlio.

Selezionare gli elementi visivamente

1. Nella barra degli strumenti Live Visual Tree, attiva Select Element in the Running Application (il pulsante con mirino).
2. Fai clic su un elemento qualsiasi nell'app in esecuzione: l'albero passa a quell'elemento e Esplora proprietà attive ne mostra le proprietà.

Questo è l'equivalente in fase di esecuzione del fare clic su un elemento in una superficie di progettazione, tranne per il fatto che rispecchia esattamente ciò di cui viene eseguito il rendering nell'app, inclusi gli elementi creati dinamicamente nel codice.

Modificare le proprietà in fase di esecuzione

In Esplora proprietà attive è possibile modificare i valori delle proprietà in tempo reale. Per esempio:

• Modificare un oggetto Margin per regolare la spaziatura e visualizzare immediatamente l'effetto.
• Imposta Visibility su Collapsed per verificare cosa accade quando un elemento è nascosto.
• Regola Width o Height per testare i layout reattivi.

Queste modifiche di runtime non vengono salvate di nuovo nel file XAML, ma sono destinate alla sperimentazione. Dopo aver trovato i valori desiderati, digitarli nel .xaml file (dove Ricaricamento rapido li preleva e li rende permanenti).

Passaggio 4: Usare l'anteprima in tempo reale XAML

Xaml Live Preview esegue il rendering dell'app in esecuzione all'interno di una scheda Visual Studio, in modo da poter visualizzare l'app e l'origine XAML affiancata senza passare da una finestra all'altra.

Per aprirlo: Debug>Windows>XAML Live Preview.

Ciò è particolarmente utile nelle configurazioni a monitor singolo in cui Alt-Tabbing tra l'app e Visual Studio è scomodo.

Per altre informazioni, vedi Xaml Live Preview.For more information, see XAML Live Preview.

Consigliato: creare una pagina di playground della UI

Crea una pagina di prova dedicata all’interno del progetto, ovvero una pagina il cui unico scopo è permetterti di sperimentare con controlli, stili e layout. In questo modo si ottiene un scratchpad sempre pronto per l'iterazione visiva e si associa in modo particolarmente efficace con gli strumenti di runtime precedenti.

Configura il playground

1. Fare clic con il pulsante destro del mouse sul progetto in Esplora soluzioni e scegliere Aggiungi>nuova pagina>vuota (WinUI 3). Chiamalo UIPlayground.xaml.

2. In UIPlayground.xamlaggiungere un oggetto ScrollViewer con sezioni per ogni controllo o pattern da provare:

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

3. Rendere il parco giochi facile da raggiungere. Durante lo sviluppo, impostarlo come pagina di avvio in App.xaml.cs:

   // In App.xaml.cs, OnLaunched method — swap in for quick playground access:
   // rootFrame.Navigate(typeof(UIPlayground));
   

   In alternativa, se l'app usa un NavigationView, aggiungi una voce di menu che venga visualizzata solo nelle build di debug. Ad esempio, nel code-behind della finestra 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
   

   dove NavView è il x:Name del controllo NavigationView.

Come usare il playground

1. Premere F5 per avviare l'app e passare alla pagina del playground.
2. Apri il file .xaml affiancato all'app in esecuzione (oppure utilizza XAML Live Preview).
3. Aggiungere o modificare controlli nell'editor XAML: Ricaricamento rapido esegue immediatamente il push delle modifiche.
4. Usa Live Visual Tree per fare clic sui controlli visualizzati e ispezionare i relativi valori effettivi del layout in Live Property Explorer.
5. Quando sei soddisfatto dell'aspetto di un controllo, copia il codice XAML nella tua pagina reale.

Questo modello offre un ciclo "type-reload-inspect" e, poiché esegue codice reale, vengono visualizzati modelli di dati reali, stili reali e animazioni reali.

Confronto tra gli approcci in fase di progettazione e in fase di esecuzione

Ecco come vengono mappate le attività comuni di progettazione dell'interfaccia utente agli strumenti di runtime:

Suggerimenti per un flusso di lavoro efficiente

• Usa l'app Gallery di WinUI 3. Installarlo dal Microsoft Store o compilarlo da GitHub. Mostra ogni controllo WinUI 3 con esempi interattivi e XAML pronti per la copia. Si consideri un catalogo visivo che è possibile esplorare prima di scrivere XAML.
• Mantieni aperta la pagina del playground. Consideralo come una guida di stile vivente per la tua app.
• Usare d:DesignHeight e d:DesignWidth. Anche senza la finestra di progettazione, questi attributi consentono a IntelliSense di mantenere le dimensioni coerenti delle pagine quando vengono aperte nell'editor.
• Combina con la finestra Errori di associazione XAML. Aprirlo da Debug>Windows>Errori di associazioneXAML per rilevare gli errori di associazione che la finestra di progettazione non avrebbe mai mostrato.
• Usa il toolkit della community. Il Windows Community Toolkit fornisce controlli e helper che riducono la quantità di layout necessario per il codice manuale.

Contenuti correlati

• ricaricamento rapido XAML
• Anteprima di XAML Live
• Esaminare le proprietà XAML durante il debug
• Scegliere il visualizzatore della struttura ad albero visuale corretto
• Panoramica dei controlli
• App raccolta di WinUI 3