Editor di codice XAML
L'editor di codice XAML nell'IDE di Visual Studio include tutti gli strumenti necessari per creare app WPF e UWP per la piattaforma Windows e per Xamarin.Forms. 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:
- Finestra dell'editor di codice XAML, oggetto di questo articolo, in cui si crea e si modifica il codice.
- Finestra di progettazione XAML, in cui si progetta l'interfaccia utente.
- Finestra ancorabile della casella degli strumenti , in cui si aggiungono controlli all'interfaccia utente.
- Pulsante Debug , in cui si esegue il codice ed eseguirne il debug.
È anche possibile modificare il codice in tempo reale durante il debug con XAML Ricaricamento rapido.) - 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, c'è una scheda Progettazione, un pulsante Riquadri di scambio, una scheda XAML e un pulsante POP Out XAML.
Ecco come funzionano:
- La scheda Progettazione modifica lo stato attivo dall'editor di codice XAML alla finestra di progettazione XAML.
- 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, è presente un pulsante Dividi verticale, un pulsante Dividi orizzontale e un pulsante Comprimi riquadri.
Ecco come funzionano:
- Il pulsante Dividi verticale modifica la posizione della finestra di progettazione XAML e l'editor di codice XAML nell'IDE da un allineamento orizzontale a un allineamento verticale.
- Il pulsante Dividi orizzontale modifica la posizione della finestra di progettazione XAML e l'editor di codice XAML nell'IDE da un allineamento verticale a un allineamento orizzontale.
- Il pulsante Comprimi riquadro 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 la descrizione comando 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 Elemento: a sinistra consente di visualizzare e passare a elementi di pari livello o padre.
In particolare, mostra una visualizzazione simile alla struttura che rivela la struttura dei tag del codice. Quando si seleziona dall'elenco, lo stato attivo nell'editor di codice si blocca alla riga di codice che include l'elemento selezionato.
La finestra Membro: 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, lo stato attivo nell'editor di codice si blocca 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 nel rimuovere gli usi non necessari dal codice C# nella scheda MainWindow.xaml.cs .
In tal caso, eseguire la procedura seguente:
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.
Scegliere se correggere tutte le occorrenze nel documento, nel progetto o nella soluzione.
Visualizzare la finestra di dialogo Anteprima e quindi scegliere Applica.
È anche possibile accedere a questa funzionalità dalla barra dei menu. A tale scopo, scegliere Modifica>IntelliSense>Rimuovi e ordina using.
Per altre informazioni sull'uso delle impostazioni, vedere la pagina Ordina 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 al file. Ecco come i colori sono correlati alle azioni eseguite:
Le modifiche apportate dopo l'apertura del file ma non salvate sono contrassegnate 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 attivare e disattivare questa funzionalità, modificare l'opzione Revisioni nelle impostazioni Editor di testo (Strumenti>Opzioni>Editor di testo).
Per altre informazioni sul rilevamento delle modifiche, per includere le righe ondulate (note anche come "squiggles") visualizzate sotto stringhe di codice, vedere la sezione Funzionalità dell'editor della pagina Editor dell'editordi 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, in genere a schede accanto alla visualizzazione predefinita che include la finestra Progettazione e l'editor di codice XAML.
- Progettazione viste : 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: 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. - Rinominare... - 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.
- Rimuovi e ordina 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 uscire dalla posizione corrente nell'editor.
Vedere anche: Visualizzare la definizione e visualizzare e modificare il codice usando Visualizza definizione. - Vai a definizione : passa all'origine di un tipo o di un membro e apre il risultato in una nuova scheda.
Vedere anche: Vai a definizione. - Circondato da... - Usare frammenti di codice racchiusi, che vengono aggiunti intorno a un blocco di codice selezionato.
Vedere anche: Frammenti di espansione e frammenti di codice racchiusi tra loro. - Inserisci frammento: inserisce un frammento di codice nella posizione del cursore.
- Taglia - Autoesplicazione
- Copia - Autoesplicazione
- Incolla - Autoesplicativo
- Struttura: espandere e comprimere sezioni di codice.
Vedere anche: Struttura. - Controllo del codice sorgente: consente di visualizzare la cronologia dei contributi del codice in un repository open source.
Riquadro centrale, barra di scorrimento
La barra di scorrimento può eseguire più operazioni di scorrimento rispetto allo scorrimento del 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 è presente un pulsante Dividi in alto a destra. 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, ad esempio modifiche al codice, punti di interruzione, segnalibri, errori e posizione del cursore.
Altri apprezzano l'uso della modalità mappa, che visualizza 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 menu o una combinazione di tasti di scelta rapida (CTRL K, CTRL++X). IntelliSense è stato migliorato in modo che supporti la visualizzazione di frammenti XAML, che funzionano sia per i frammenti predefiniti che per tutti i frammenti personalizzati aggiunti manualmente. Alcuni frammenti di codice XAML predefiniti includono #region, , Column definitionRow definition, Settere Tag.
Per altre informazioni, vedere le pagine Frammenti di codice e Frammenti di codice C#.
Supporto #region XAML
In Visual Studio, #region supporto è disponibile per gli sviluppatori XAML in WPF, UWP e Xamarin.Forms. In Visual Studio 2019 continuiamo a apportare miglioramenti incrementali al supporto #region. Ad esempio, nella versione 16.4 e successive, #region opzioni mostrano quando 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 altre informazioni sulle aree, vedere la pagina #region (Riferimenti per C#). Per altre informazioni sull'espansione e la compressione delle sezioni di codice, vedere la pagina Struttura .
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 di opzioni.
Selezionare il codice che si desidera racchiudere con un commento e quindi scegliere il pulsante Commento dalla barra degli strumenti nell'IDE. Per invertire l'azione, scegliere il pulsante Rimuovi commento .
Selezionare il codice che si desidera 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 a lampadina visualizzate nel codice XAML fanno parte delle azioni rapide che puoi usare per effettuare il refactoring, generare o modificare in altro modo il codice.
Ecco alcuni esempi di come possono trarre vantaggio dall'esperienza di codifica XAML:
Rimuovere gli spazi dei nomi non necessari. Nell'editor di codice XAML gli spazi dei nomi non necessari vengono visualizzati in testo in grigio. 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.
Rinominare lo spazio dei nomi. Questa funzionalità, disponibile dal menu di scelta rapida del clic con il pulsante destro del mouse dopo aver evidenziato uno spazio dei nomi, semplifica la modifica di più istanze di un'impostazione contemporaneamente. È anche possibile accedere a questa funzionalità usando la barra dei menu, Modifica>refactoring>Rinomina o premendo CTRL+R e 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. Puoi così impostare le proprietà e creare istanze di oggetti nel markup in base alla presenza di un'API senza dover usare code-behind.
Per altre informazioni, vedi la pagina XAML condizionale e i controlli XAML UWP host nelle app desktop (isole XAML).
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 semplificano l'inizio e la fine dei blocchi logici.
Per altre informazioni, vedere la tabella codici Di navigazione.
IntelliCode per XAML
Quando si aggiunge un tag XAML al codice, in genere si inizia con una parentesi uncinata <sinistra. Quando si digita una parentesi angolare, viene visualizzato un menu IntelliCode che elenca diversi tag XAML più diffusi. Scegliere quello che si vuole 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 .
Impostazione
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.
Nota
È anche possibile usare i tasti di scelta rapida per accedere alla finestra di dialogo Opzioni. Ecco come premere CTRL+Q per cercare l'IDE, digitare Opzioni e quindi premere INVIO. Premere quindi CTRL+E per cercare nella finestra di dialogo Opzioni, digitare Editor di testo, premere INVIO, digitare XAML e quindi premere INVIO.
Per altre informazioni sui tasti di scelta rapida, vedere la pagina Suggerimenti per i tasti di scelta rapida per Visual Studio .
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.
| Nome | Altre informazioni |
|---|---|
| Generali | Finestra di dialogo Opzioni: Editor > di testo Tutti i linguaggi |
| Barre di scorrimento | Opzioni, Editor di testo, Tutti i linguaggi, Barre di scorrimento |
| Schede | Opzioni, Editor di testo, Tutti i linguaggi, Schede |
Opzioni dell'editor di testo specifiche di XAML
Nella tabella seguente sono elencate le impostazioni nella finestra di dialogo Opzioni che possono migliorare l'esperienza di modifica quando si sviluppano app basate su XAML. Visitare le informazioni collegate per altre informazioni su queste opzioni e su come usarle.
| Nome | Altre informazioni |
|---|---|
| Formattazione in corso | Opzioni, Editor di testo, XAML, Formattazione |
| Varie | Opzioni, Editor di testo, XAML, Varie |
Suggerimento
L'impostazione maiuscola del nome del metodo del gestore eventi nella sezione Varie è particolarmente utile per gli sviluppatori XAML. Questa impostazione è disattivata per impostazione predefinita perché è nuova, ma è consigliabile impostarla su su per supportare le maiuscole e minuscole appropriate nel codice.
Passaggi successivi
Per altre informazioni su come modificare il codice in tempo reale durante l'esecuzione dell'app in modalità di debug, vedi la pagina xaml Ricaricamento rapido.