Editor di codice XAML

L'editor di codice XAML nel IDE di Visual Studio include tutti gli strumenti necessari per creare app WPF e UWP per la piattaforma Windows, oltre che per Xamarin.Forms o .NET MAUI. Questo articolo descrive sia il ruolo svolto dall'editor di codice quando si sviluppano app basate su XAML che le funzionalità univoche per l'editor di codice XAML in Visual Studio 2019.

Per iniziare, esaminiamo l'IDE (ambiente di sviluppo integrato) con un progetto WPF aperto. L'immagine seguente mostra diversi strumenti dell'IDE chiave che verranno usati insieme all'editor di codice XAML.

Dal basso a sinistra dell'immagine in senso orario, gli strumenti dell'IDE chiave sono i seguenti:

• L'editor di codice XAML finestra, ovvero l'oggetto di questo articolo, in cui crei e modifichi il codice.
• La finestra del designer XAML , dove si progetta l'interfaccia utente.
• La finestra ancorabile della casella degli strumenti , in cui si aggiungono controlli all'interfaccia utente.
• Pulsante Debug, dove esegui il tuo codice e lo sottoponi a debug.
  È anche possibile modificare il codice in tempo reale durante il debug con XAML Hot Reload.
• La finestra Esplora soluzioni, in cui si gestiscono file, progetti e soluzioni.
• La finestra Proprietà, in cui modifichi l'aspetto dell'interfaccia utente e il funzionamento dei controlli dell'interfaccia utente.

Per continuare, scopriamo di più sull'editor di codice XAML.

Interfaccia utente dell'editor di codice XAML

Mentre la finestra dell'editor di codice per le app XAML condivide alcuni elementi dell'interfaccia utente (interfaccia utente) visualizzati anche nell'IDE standard, include anche alcune funzionalità univoche che semplificano lo sviluppo di app XAML.

Ecco un'occhiata alla finestra dell'editor di codice XAML stessa.

Di seguito verranno esaminate le funzioni di ogni elemento dell'interfaccia utente nell'editor di codice.

Prima riga

Nella prima riga nella parte superiore della finestra del codice XAML, a sinistra è presente una scheda Progettazione, un pulsante Scambia Riquadri, una scheda XAML e un pulsante Popup XAML.

Ecco come funzionano:

• La scheda Progettazione modifica lo stato attivo dall'editor di codice XAML allo XAML Designer.
• Il pulsante Scambia Riquadri inverte la posizione della finestra di progettazione XAML e dell'editor di codice XAML nell'IDE.
• La scheda XAML riporta lo stato attivo all'editor di codice XAML.
• Il pulsante POP Out XAML crea una finestra separata dell'editor di codice XAML esterna all'IDE.

Continuando a destra, c'è un pulsante di divisione verticale , un pulsante di divisione orizzontale e un pulsante Comprimi riquadri .

Ecco come funzionano:

• Il pulsante divisione verticale modifica la posizione del Designer XAML e dell'editor di codice XAML nell'IDE da un allineamento orizzontale a uno verticale.
• Il pulsante divisione orizzontale modifica la posizione della finestra di progettazione XAML e dell'editor di codice XAML nell'IDE, passando da un allineamento verticale a uno orizzontale.
• Il pulsante Riquadro di compressione consente di comprimere ciò che si trova nel riquadro inferiore, sia che si tratti dell'editor di codice o della finestra di progettazione. Per ripristinare il riquadro inferiore, scegliere di nuovo lo stesso pulsante, denominato pulsante Espandi riquadro.

Seconda riga

Nella seconda riga nella parte superiore della finestra del codice XAML sono disponibili due elenchi a discesa Window. Tuttavia, se visualizzi il tooltip per questi elementi dell'interfaccia utente, li identifica ulteriormente come "Element: Window" e "Member: Window".

Gli elenchi a discesa Window hanno funzioni diverse, come indicato di seguito:

• La finestra a sinistra dell'elemento aiuta a visualizzare e navigare verso elementi fratelli o padre.

  In particolare, mostra una visualizzazione simile a un contorno che rivela la struttura dei tag del codice. Quando si seleziona dall'elenco, l'attenzione nell'editor di codice si sposta alla riga di codice che include l'elemento selezionato.

  

• Il Membro: finestra a destra consente di visualizzare e passare a attributi o elementi figlio.

  In particolare, mostra un elenco delle proprietà nel codice. Quando si seleziona dall'elenco, il focus nell'editor di codice passa alla riga di codice che include la proprietà selezionata.

  

Riquadro centrale, editor di codice

Il riquadro centrale è la parte "code" dell'editor di codice XAML. Include la maggior parte delle funzionalità disponibili nell'editor di codice dell'IDE . Verranno illustrate diverse funzionalità dell'IDE universale che consentono di sviluppare il codice XAML. Verranno evidenziate anche le funzionalità univoche per XAML nell'IDE.

Azioni rapide

È possibile usare azioni rapide per effettuare il refactoring, generare o modificare il codice con una singola azione.

Ad esempio, un'attività utile che è possibile eseguire usando Azioni rapide consiste nell'Rimuovere gli usi non necessari dal codice C# nella scheda MainWindow.xaml.cs.

Ecco come:

1. Passare il puntatore del mouse su un'istruzione using, scegliere l'icona a forma di lampadina e quindi scegliere Rimuovi utilizzi non necessari dall'elenco a discesa.

   

2. Scegli se desideri correggere tutte le occorrenze nel documento , nel progetto o nella soluzione .

3. Visualizza la finestra di dialogo anteprima e quindi scegli Applica.

È anche possibile accedere a questa funzionalità dalla barra dei menu. A tale scopo, scegliere Modifica>IntelliSense>Rimuovi e ordina utilizzando.

Per altre informazioni sull'uso delle impostazioni, vedere la pagina Sort usings. Per altre informazioni su IntelliSense, vedere la pagina IntelliSense in Visual Studio. Per altre informazioni su alcuni dei modi tipici in cui gli sviluppatori usano azioni rapide, vedere la pagina Azioni rapide comuni.

Rilevamento modifiche

Il colore del margine sinistro consente di tenere traccia delle modifiche apportate in un file. Ecco come i colori sono correlati alle azioni eseguite:

• Le modifiche apportate dopo l'apertura del file, ma non salvate, sono indicate da una barra gialla sul margine sinistro (noto come margine di selezione).

  

• Dopo aver salvato le modifiche (ma prima di chiudere il file), la barra diventa verde.

  

Per disattivare e attivare questa funzionalità, modificare l'opzione Rileva modifiche nelle impostazioni dell' Editor di Testo (Strumenti>Opzioni>Editor di testo).

Per ulteriori informazioni sul rilevamento delle modifiche, inclusi i segni ondulati (chiamati anche "squiggles") che appaiono sotto le stringhe di codice, vedere la sezione funzionalità dell'editor della pagina Funzionalità dell'editor di codice di Visual Studio.

Menu di scelta rapida con il pulsante destro del mouse

Quando modifichi il codice nell'editor di codice XAML, puoi accedere a diverse funzionalità usando il menu di scelta rapida del pulsante destro del mouse. La maggior parte di queste funzionalità è disponibile universalmente nell'IDE di Visual Studio, mentre alcune sono specifiche dell'uso di un editor di codice insieme a una finestra Progettazione.

Ecco cosa fa ogni funzionalità e come è utile:

• Visualizza codice - Apre la finestra del codice del linguaggio di programmazione, che è in genere a schede accanto alla visualizzazione predefinita che include la finestra Progettazione e l'editor di codice XAML.
• Visualizzatore Progettazione - apre la visualizzazione predefinita che include la finestra Progettazione e l'editor di codice XAML. Se si è già nella visualizzazione predefinita, non esegue alcuna operazione.
• Azioni Rapide e Refactoring: Effettua refactoring, genera o modifica il codice con una singola azione. Quando si passa il puntatore del mouse sul codice, viene visualizzata un'icona a forma di lampadina quando è disponibile un'azione rapida o un refactoring.
  Vedere anche: azioni rapide e refactoring del codice.
• Rinomina... - Rinomina solo gli spazi dei nomi. Se non si dispone di uno spazio dei nomi da rinominare, verrà visualizzato un messaggio di errore che indica che è possibile rinominare solo i prefissi dello spazio dei nomi.
• Rimuovere e ordinare gli spazi dei nomi : rimuove gli spazi dei nomi inutilizzati e quindi ordina gli spazi dei nomi che rimangono.
• Visualizza definizione - visualizza in anteprima la definizione di un tipo senza abbandonare la posizione attuale nell'editor.
  Vedere anche: Visualizza definizione e Visualizzare e modificare il codice usando Visualizza definizione.
• Vai alla definizione : consente di passare all'origine di un tipo o di un membro e apre il risultato in una nuova scheda.
  Vedere anche: Vai alla definizione.
• Racchiudi con... - Usa frammenti di codice di contorno che vengono aggiunti intorno a un blocco di codice selezionato.
  Vedere anche: frammenti di codice di espansione e frammenti di codice racchiusi.
• Inserisci frammento di codice: inserisce un frammento di codice nella posizione del cursore.
• Cut - Autoesplicativo
• Copia - Autoesplicativo
• Incolla - Autoesplicazione
• Struttura - Espandere e ridurre sezioni di codice.
  Vedere anche: Struttura.
• controllo del codice sorgente: visualizzare la cronologia dei contributi di codice in un repository open source.

Riquadro centrale, barra di scorrimento

La barra di scorrimento può fare più che semplicemente scorrere il codice. È anche possibile usarlo per aprire un altro riquadro dell'editor di codice. Inoltre, puoi usare la barra di scorrimento per aiutarti a scrivere codice in modo più efficiente aggiungendo annotazioni o usando diverse modalità di visualizzazione.

Dividere la finestra del codice

Nella barra di scorrimento dell'editor di codice, in alto a destra, è presente un pulsante Split. Quando lo si sceglie, è possibile aprire un altro riquadro dell'editor di codice. Ciò è utile perché operano indipendentemente l'uno dall'altro, quindi è possibile usarli per lavorare sul codice in posizioni diverse.

Per altre informazioni su come dividere una finestra dell'editor, vedere la pagina Gestisci finestre dell'editor.

Usare annotazioni o modalità mappa

È anche possibile modificare l'aspetto della barra di scorrimento e le funzionalità aggiuntive contenute. Ad esempio, molte persone amano includere annotazioni nella barra di scorrimento, che forniscono segnali visivi come modifiche al codice, punti di interruzione, segnalibri, errori e posizione del caret.

Altri apprezzano l'uso della modalità mappa , che visualizza le righe di codice in miniatura sulla barra di scorrimento. Gli sviluppatori che hanno un sacco di codice in un file potrebbero trovare che la modalità di mapping tiene traccia delle righe di codice in modo più efficace rispetto alla barra di scorrimento predefinita.

Per altre informazioni su come modificare le impostazioni predefinite della barra di scorrimento, vedere la pagina Personalizzare la barra di scorrimento.

Funzionalità specifiche di XAML

La maggior parte delle funzionalità seguenti è disponibile universalmente nell'IDE di Visual Studio, ma esistono dimensioni aggiunte ad alcune di esse che semplificano la codifica per gli sviluppatori XAML.

Frammenti di codice XAML

I frammenti di codice sono piccoli blocchi di codice riutilizzabili che è possibile inserire in un file di codice usando il comando di menu di scelta rapida Inserisci frammento di codice o una combinazione di tasti di scelta rapida (CTRL+K, CTRL+X). Abbiamo migliorato IntelliSense in modo che supporti la visualizzazione di frammenti XAML, che funzionano sia per i frammenti predefiniti che per i frammenti di codice personalizzati aggiunti manualmente. Alcuni frammenti di codice XAML predefiniti includono #region, Column definition, Row definition, Settere Tag.

Per ulteriori informazioni, consultare le pagine dei frammenti di codice e delle pagine dei frammenti di codice C# .

Supporto #region XAML

In Visual Studio, il supporto #region è disponibile per gli sviluppatori XAML in WPF, UWP, Xamarin.Formse .NET MAUI. In Visual Studio 2019 continuiamo a apportare miglioramenti incrementali al supporto #region. Ad esempio, in versione 16.4 e versioni successive, #region opzioni mostrano come si inizia a digitare <!.

È possibile usare le aree quando si desidera raggruppare sezioni del codice che si desidera espandere o comprimere.

    <!--#region NameOfRegion-->
    Your code is here
    <!--#endregion-->

Per ulteriori informazioni sulle regioni, vedere la pagina #region (Riferimento C#). Per ulteriori informazioni sull'espansione e la riduzione delle sezioni di codice, vedere la pagina Strutturazione.

Commenti XAML

Gli sviluppatori preferiscono spesso documentare il codice usando i commenti. Puoi aggiungere commenti al codice XAML presente nella scheda MainWindow.xaml nei modi seguenti:

• Immettere <!-- prima di un commento e quindi aggiungere --> dopo il commento.

• Immettere <! e quindi scegliere !-- dall'elenco delle opzioni.

  

• Seleziona il codice che vuoi racchiudere con un commento e quindi scegli il pulsante Commento dalla barra degli strumenti dell'IDE. Per invertire l'azione, scegliere il pulsante Rimuovi commento.

  

• Selezionare il codice da racchiudere con un commento e quindi premere CTRL+K, CTRL+C. Per rimuovere il commento dal codice selezionato, premere CTRL+K, CTRL+U.

Per altre informazioni su come usare i commenti nel codice C# presente nella scheda MainWindow.xaml.cs, vedere la pagina commenti della documentazione.

Lampadine XAML

Le icone di lampadina visualizzate nel codice XAML fanno parte delle Azioni rapide che puoi usare per refactoring, generare o modificare in altro modo il codice.

Ecco alcuni esempi di come possono trarre vantaggio dall'esperienza di codifica XAML:

• Rimuovere i namespace non necessari. Nell'editor di codice XAML, gli spazi dei nomi non necessari vengono visualizzati in testo attenuato. Se si passa il puntatore del mouse su un uso non necessario, verrà visualizzata una lampadina. Quando si sceglie l'opzione Rimuovi spazi dei nomi non necessari dall'elenco a discesa, verrà visualizzata un'anteprima di quella che è possibile rimuovere.

  

• Rinomina spazio dei nomi. Questa funzionalità, disponibile dal menu contestuale cliccando con il tasto destro dopo aver evidenziato un namespace, semplifica la modifica contemporanea di più istanze di un'impostazione. È anche possibile accedere a questa funzionalità usando la barra dei menu, Modifica>Refactoring>Rinominaoppure premendo CTRL+Re quindi ctrl+R di nuovo.

  

  Per altre informazioni, vedere la pagina Rinominare un simbolo di codice di refactoring.

XAML condizionale per UWP

XAML condizionale consente di usare il metodo ApiInformation.IsApiContractPresent nel markup XAML. In questo modo è possibile impostare proprietà e creare istanze di oggetti nel markup in base alla presenza di un'API senza dover usare code-behind.

Per ulteriori informazioni, consulta la pagina XAML condizionale e la pagina Integrare controlli XAML UWP nelle app desktop (XAML Islands).

Visualizzatore struttura XAML

La funzionalità Visualizzatore struttura nell'editor di codice mostra le righe della guida alla struttura, ovvero linee tratteggiate verticali che indicano la corrispondenza degli elementi di tag aperti e chiusi nel codice. Queste linee verticali rendono più facile vedere dove iniziano e finiscono i blocchi logici.

Per altre informazioni, vedere la pagina Navigate code.

IntelliCode per XAML

Quando si aggiunge un tag XAML al codice, in genere si inizia con una parentesi angolare sinistra <. Quando si digita una parentesi angolare, viene visualizzato un menu IntelliCode che elenca diversi tag XAML più diffusi. Scegli quello che vuoi aggiungere rapidamente al codice.

È possibile riconoscere le selezioni di IntelliCode perché vengono visualizzate nella parte superiore dell'elenco e sono contrassegnate come stelle.

Per altre informazioni, vedere la pagina Panoramica di IntelliCode.

Impostazioni

Per altre informazioni su tutte le impostazioni nell'IDE di Visual Studio, vedere la pagina Funzionalità dell'editor di codice.

Impostazioni facoltative XAML

Puoi usare la finestra di dialogo Opzioni per modificare le impostazioni predefinite per l'editor di codice XAML. Per visualizzare le impostazioni, scegliere Strumenti >Opzioni>Editor di testo>XAML.

Opzioni dell'editor di testo universale

Nella finestra di dialogo Opzioni per XAML i primi tre elementi seguenti sono universali per tutti i linguaggi di programmazione supportati dall'IDE di Visual Studio. Per altre informazioni su queste opzioni e su come usarle, vedere le informazioni collegate nella tabella seguente.

Opzioni dell'editor di testo specifiche di XAML

La tabella seguente elenca le impostazioni nella finestra di dialogo Opzioni che consente di migliorare l'esperienza di modifica durante lo sviluppo di app basate su XAML. Visitare le informazioni collegate per altre informazioni su queste opzioni e su come usarle.

Passaggi successivi

Per ulteriori informazioni su come modificare il codice in tempo reale mentre stai eseguendo l'app in modalità di debug, consulta la pagina XAML Hot Reload.

Vedere anche

• funzionalità dell'editor di codice di Visual Studio
• XAML nelle app UWP
• XAML nelle applicazioni Xamarin.Forms
• XAML nelle app MAUI .NET