Procedura dettagliata: modifica di XAML in Progettazione WPF

Articolo
08/11/2011

In WPF Designer per Visual Studio è disponibile un editor XAML con molte delle stesse funzionalità offerte in altri editor di linguaggio di Visual Studio. In questo argomento è illustrato come utilizzare funzionalità quali IntelliSense e struttura.

Questa procedura dettagliata prevede l'esecuzione delle attività seguenti:

Creazione di un progetto WPF.
Creazione di risorse.
Visualizzazione dell'evidenziazione della sintassi.
Utilizzo dello spostamento tra tag.
Utilizzo della struttura.
Utilizzo di IntelliSense.
Utilizzo della corrispondenza di parentesi graffe.
Utilizzo della formattazione automatica.

Nota

È possibile che le finestre di dialogo e i comandi di menu visualizzati siano diversi da quelli descritti nella Guida a seconda delle impostazioni attive o dell'edizione del programma. Per modificare le impostazioni, scegliere Importa/Esporta impostazioni dal menu Strumenti. Per ulteriori informazioni, vedere Gestione delle impostazioni.

Prerequisiti

Per completare la procedura dettagliata, è necessario disporre dei componenti seguenti:

Visual Studio 2010.

Creazione del progetto

Il primo passaggio consiste nella creazione del progetto per l'applicazione host.

Per creare il progetto

In Visual Basic o Visual C# creare un nuovo progetto di applicazione WPF denominato XamlEditing. Per ulteriori informazioni, vedere Procedura: creare un nuovo progetto di applicazione WPF.

MainWindow.xaml viene aperto in WPF Designer.

Creazione di risorse

Spesso si utilizzeranno risorse nelle applicazioni WPF. In WPF Designer viene fornita una struttura comprimibile per le sezioni delle risorse e lo spostamento in tali sezioni nella finestra Struttura documento.

Per creare risorse

Aprire MainWindow.xaml in WPF Designer.

In visualizzazione XAML inserire il seguente codice XAML dopo il tag di apertura per MainWindow:

Con il seguente markup XAML viene creato un pennello sfumato lineare con uno spettro di colori.

<Window.Resources>
    <LinearGradientBrush x:Key="backgroundBrush1" StartPoint="0,0" EndPoint="1,1">
        <GradientStop Color="Yellow" Offset="0.0" />
        <GradientStop Color="Red" Offset="0.25" />
        <GradientStop Color="Blue" Offset="0.75" />
        <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
</Window.Resources>

Evidenziazione della sintassi

In WPF Designer il codice XAML risulta più facile da leggere tramite la sintassi basata su colori.

Per visualizzare l'evidenziazione della sintassi

In visualizzazione XAML sostituire l'elemento <Grid> predefinito con il markup seguente.
```
<Grid Name="grid1" Background="{StaticResource backgroundBrush1}">

</Grid>
```
L'elemento, la proprietà e il valore della proprietà presentano ciascuno un colore univoco.

L'estensione di markup viene associata alla proprietà Background. e viene aggiornato il colore di sfondo della griglia in visualizzazione Progettazione.

È possibile modificare il colore degli elementi e degli attributi XAML. Per ulteriori informazioni, vedere Procedura: modificare le impostazioni di visualizzazione XAML.

Spostamento tra tag

È possibile spostarsi da un tag all'altro tramite struttura tag. È anche possibile utilizzare la visualizzazione Struttura documento. Per ulteriori informazioni, vedere Spostamento all'interno della gerarchia di elementi di un documento WPF.

Per utilizzare struttura tag

In visualizzazione XAML fare clic sul tag di apertura per l'elemento <Grid>.
Nella parte inferiore di WPF Designer individuare la struttura tag in cui vengono visualizzate le opzioni Griglia (grid1) Finestra/Griglia.
In struttura tag spostare il puntatore del mouse sull'elemento Finestra.

Verrà visualizzata un'anteprima sottoposta a rendering di MainWindow.
In struttura tag fare clic sul collegamento ipertestuale Finestra.

Il tag di apertura per MainWindow viene evidenziato in visualizzazione XAML.
In visualizzazione XAML fare clic sul tag <Window.Resources>.

In struttura tag viene visualizzata la gerarchia della struttura ad albero XAML fino all'elemento <Window.Resources>.
In Struttura tag fare clic sulla freccia Selezione figlio a destra di Risorse.

L'elemento figlio verrà visualizzato in un popup.
Fare clic su LinearGradientBrush (backgroundBrush1).

L'elemento <LinearGradientBrush> verrà selezionato in visualizzazione XAML.

Struttura

In WPF Designer la struttura comprimibile è pienamente supportata.

Per utilizzare la struttura

In visualizzazione XAML scorrere fino all'elemento <Window.Resources>.
A sinistra del tag di apertura fare clic sul pulsante di compressione.

L'elemento <Window.Resources> viene compresso in una sola riga.
A sinistra del tag di apertura fare clic sul pulsante di espansione.

L'elemento <Window.Resources> viene espanso fino allo stato originale.

IntelliSense

In WPF Designer la funzionalità IntelliSense è pienamente supportata.

Per utilizzare IntelliSense

Nell'elemento grid1 digitare <Gr.

Verrà visualizzato l'elenco IntelliSense, con la classe Grid selezionata.
Premere TAB per completare il tag di apertura.
Digitare .c. Assicurarsi di includere il punto.

Verrà visualizzato l'elenco IntelliSense, in cui è selezionata la prima proprietà che inizia con lettera C.
Utilizzare il tasto freccia GIÙ per scorrere fino alla proprietà ColumnDefinitions.
Premere TAB per completare il tag.

Per ulteriori informazioni sull'utilizzo di IntelliSense per i tipi personalizzati, vedere Procedura: importare uno spazio dei nomi in XAML.

Corrispondenza di parentesi graffe

È possibile spostarsi all'interno di un elemento utilizzando la funzionalità della corrispondenza di parentesi graffe.

Per utilizzare la corrispondenza di parentesi graffe

In visualizzazione XAML fare clic sul tag di apertura per <LinearGradientBrush>:
Premere CTRL+].

Il cursore si sposta alla fine del tag di apertura.
Premere di nuovo CTRL+].

Il cursore si sposta all'inizio del tag di chiusura.
Eliminare la parentesi angolare chiusa '>' dal tag di chiusura dell'elemento <LinearGradientBrush>.
Digitare '>' per completare il tag di chiusura.

In visualizzazione XAML i tag di apertura e di chiusura vengono evidenziati.

Formattazione automatica

È possibile formattare il codice XAML premendo CTRL+KD, nonché specificare le impostazioni di formattazione automatica. Per ulteriori informazioni, vedere Procedura: modificare le impostazioni di visualizzazione XAML.

Per utilizzare la formattazione automatica

In visualizzazione XAML selezionare i quattro elementi <GradientStop>.
Premere MAIUSC+TAB.

Le dichiarazioni dei quattro elementi si spostano a sinistra.
Premere CTRL+KD.

Le dichiarazioni dei quattro elementi vengono rientrate. È possibile notare altre modifiche in XAML.
Nel primo tag di <GradientStop> fare clic nello spazio prima dell'attributo Color.
Premere INVIO per iniziare una nuova riga.
Fare clic nello spazio prima dell'attributo Offset e premere il tasto INVIO per iniziare una nuova riga.
Premere CTRL+KD.

Gli attributi rimangono nelle nuove righe.
Inserire quattro spazi prima dell'attributo Color, quindi premere CTRL+KD.

La posizione dell'attributo Color non cambia.

Vedere anche

Condividi tramite