Creazione di un'interfaccia utente tramite XAML Designer

La finestra di progettazione XAML in Visual Studio 2012 fornisce un'interfaccia visiva per consentire la progettazione di app di Windows Store compilate mediante app XAML, WPF e Silverlight. È possibile creare le interfacce utente per le app trascinando i controlli dalla Casella degli strumenti e impostando le proprietà nella finestra Proprietà. È possibile inoltre modificare il codice XAML direttamente nella visualizzazione XAML.

L'area di lavoro nella finestra di progettazione XAML in Visual Studio è costituita da diversi elementi dell'interfaccia visiva. Tali elementi includono la tavola da disegno, la casella degli strumenti, la finestra Dispositivo, la finestra Struttura documento, Esplora soluzioni, la finestra Proprietà e l'editor XAML. Per aprire la finestra di progettazione XAML, fare clic con il pulsante destro del mouse su una pagina XAML in Esplora Risorse e selezionare Progettazione visualizzazioni.

La finestra di progettazione XAML fornisce una visualizzazione XAML e una visualizzazione Progettazione sincronizzata del markup XAML sottoposto a rendering dell'app. Con un documento XAML aperto in Visual Studio, è possibile passare dalla visualizzazione Progettazione alla visualizzazione XAML e viceversa utilizzando le schede XAML e Progettazione. Nella visualizzazione Progettazione, la finestra che contiene la tavola da disegno è la finestra attiva e può essere utilizzata come area di lavoro primaria. Tale area consente di progettare visivamente una pagina nell'app aggiungendo o trascinando elementi per poi modificarli. Per ulteriori informazioni, vedi Utilizzo di elementi in XAML Designer. Di seguito viene mostrata la tavola da disegno nella visualizzazione Progettazione.

Visualizzazione Progettazione della finestra di progettazione XAML

È possibile utilizzare il pulsante Scambia riquadri per mostrare in primo piano alternativamente la tavola da disegno o l'editor XAML.

Nella tavola da disegno sono disponibili le seguenti funzionalità:

Guide di allineamento

Le guide di allineamento sono limiti di allineamento visualizzati come linee tratteggiate rosse quando i bordi dei controlli o le linee di base del testo sono allineate. Tale limite viene visualizzato solo quando è abilitato l'allineamento alle guide di allineamento.

Sbarre della griglia

Le sbarre diGrid consentono di gestire righe e colonne in un pannello Grid. È possibile creare ed eliminare righe e colonne e regolarne la larghezza e l'altezza relative. La sbarra verticale, che si trova sulla sinistra della tavola da disegno, è utilizzata per le righe, mentre la linea orizzontale, visualizzata in alto, è utilizzata per le colonne.

Strumenti decorativi della griglia

Uno strumento decorativo di Grid viene visualizzato come triangolo con una linea verticale o orizzontale associata sulla sbarra di Grid. Quando si trascina uno strumento decorativo di Grid, la larghezza o l'altezza delle colonne o delle righe adiacenti viene aggiornata mentre si sposta il mouse.

Gli strumenti decorativi di Grid consentono di controllare la larghezza e l'altezza di righe e colonne di un oggetto Grid. È possibile aggiungere una nuova colonna o riga facendo clic nelle sbarre di Grid. Quando si aggiunge una nuova riga o colonna per un pannello Grid con due o più colonne o righe, viene visualizzata una piccola barra degli strumenti all'esterno della sbarra che consente di impostare la larghezza e l'altezza in modo esplicito. Tale barra consente inoltre di impostare opzioni di ridimensionamento fisso, proporzionale e automatico per righe e colonne di Grid.

Quadratini di ridimensionamento

I quadratini di ridimensionamento vengono visualizzati sui controlli selezionati e consentono di ridimensionare il controllo. Quando si ridimensiona un controllo, vengono in genere visualizzati i valori della larghezza e dell'altezza per semplificare l'operazione. Per ulteriori informazioni sulla modifica dei controlli nella visualizzazione Progettazione, vedere Utilizzo di elementi in XAML Designer.

Margini

I margini rappresentano la quantità di spazio fisso tra il bordo di un controllo e il bordo del relativo contenitore. È possibile impostare i margini di un controllo utilizzando le proprietà Margin in Layout nella finestra Proprietà.

Strumenti decorativi del margine

È possibile utilizzare gli strumenti decorativi del margine per modificare i margini di un elemento in relazione al relativo contenitore di layout. Se uno strumento decorativo del margine è aperto, il margine non è impostato e viene visualizzata una catena interrotta. Se il margine non è impostato, gli elementi restano al proprio posto quando il contenitore di layout viene ridimensionato in fase di esecuzione. Se uno strumento decorativo del margine è chiuso, viene visualizzata una catena ininterrotta e gli elementi vengono spostati insieme al margine quando il contenitore di layout viene ridimensionato in fase di esecuzione (il margine resta fisso).

Handle degli elementi

È possibile modificare un elemento utilizzando gli handle dello stesso visualizzati sulla tavola da disegno quando si sposta il puntatore sugli angoli della casella blu che racchiude l'elemento. Gli handle consentono di ruotare, ridimensionare, capovolgere, spostare o aggiungere un raggio dell'angolo all'elemento. Il simbolo per l'handle dell'elemento varia in base alla funzione e cambia a seconda della posizione esatta del puntatore. Se gli handle non sono visibili, verificare che l'elemento sia selezionato.

Nella visualizzazione Progettazione sono disponibili comandi aggiuntivi della tavola da disegno nell'area inferiore sinistra della schermata, come illustrato di seguito.

Comandi della visualizzazione Progettazione

Nella barra degli strumenti sono disponibili i seguenti comandi:

Zoom

Lo zoom consente di ridimensionare l'area di progettazione. È possibile ingrandire dal 12,5% all'800% o selezionare opzioni come Adatta alla selezione e Adatta tutto.

Mostra/Nascondi griglia di allineamento

Visualizza o nasconde la griglia di allineamento che mostra le griglie. Le griglie vengono utilizzate quando è abilitato il blocco sulla griglia o l'allineamento alle guide di allineamento.

Attiva/Disattiva allineamento alla griglia

Se è abilitato l'allineamento alla griglia quando si trascina un elemento sulla tavola da disegno, l'elemento tende ad allinearsi alle linee orizzontali e verticali più vicine.

Attiva/Disattiva allineamento alle guide di allineamento

Le guide di allineamento consentono di allineare i controlli l'uno rispetto all'altro. Se è abilitato l'allineamento alle guide di allineamento, quando si trascina un controllo in relazione ad altri controlli, vengono visualizzati i limiti di allineamento quando i bordi e il testo di alcuni controlli sono allineati orizzontalmente o verticalmente.. Il limite di allineamento viene mostrato come una linea tratteggiata rossa.

Nella visualizzazione XAML, la finestra contenente l'editor XAML è la finestra attiva e l'editor XAML è lo strumento di creazione primario. Il linguaggio Extensible Application Markup Language (XAML) fornisce un vocabolario dichiarativo basato su XML per la specifica dell'interfaccia utente di un'applicazione. La visualizzazione XAML include IntelliSense, la formattazione automatica, l'evidenziazione della sintassi e la navigazione tra tag. La seguente immagine mostra la visualizzazione XAML:

Visualizzazione XAML
Barra della visualizzazione suddivisa

La barra della visualizzazione suddivisa compare nella parte superiore della visualizzazione XAML quando l'editor XAML si trova nella finestra inferiore. Tale barra consente di controllare le dimensioni relative delle visualizzazioni Progettazione e XAML. È inoltre possibile scambiare le posizioni delle visualizzazioni, utilizzando il pulsante Scambia riquadri, specificare se le visualizzazioni sono disposte orizzontalmente o verticalmente e comprimere la visualizzazione desiderata.

Zoom di markup

Lo zoom di markup consente di ridimensionare la visualizzazione XAML. È possibile ingrandire dal 20% al 400%.

La finestra Dispositivo nella finestra di progettazione XAML per Visual Studio consente di simulare in fase di progettazione diverse visualizzazioni e opzioni di visualizzazione per l'app. Di seguito è riportata un'immagine di tale finestra:

Finestra Dispositivo

Le opzioni della finestra Dispositivo sono le seguenti:

Visualizzazione

Specifica l'orientamento e il layout dell'app. I modelli di progetto per le app in Windows Store compilate mediante XAML (Grid, Split e Blank) possono rilevare e trasmettere le visualizzazioni menzionate sopra. Ogni pagina dei modelli fornisce le seguenti visualizzazioni:

  • Orizzontale. Visualizzazione a schermo intero (W x H). Questa è la visualizzazione predefinita.

  • Ancorata (Snapped). Mostrata quando l'app viene ancorata su un lato dall'utente. L'app esegue la panoramica verticalmente su tutte le pagine. In questa visualizzazione, l'app ha una larghezza di 320 pixel.

  • Di riempimento (Filled). Mostrata quando l'utente blocca due applicazioni sul lato. In questa visualizzazione, la larghezza dell'applicazione viene ristretta di 322 pixel.

  • Verticale. Visualizzazione a schermo intero (H x W). In questa visualizzazione, i valori di larghezza e altezza dell'applicazione vengono scambiati.

In base all'impostazione effettuata dall'utente, alcune visualizzazioni potrebbero essere disabilitate. Ad esempio, se si imposta la risoluzione di 1280 x 800, le visualizzazioni di riempimento e ancorata sono entrambe disabilitate. Per i contratti, alcuni stati di visualizzazione, descritti nella sezione successiva, potrebbero non essere disponibili.

Stato di visualizzazione

Specifica lo stato corrente nel gruppo di stati visivi ApplicationViewState da mostrare per modificare la visualizzazione corrente. Questa opzione è disabilitata se tali stati non sono presenti nel documento corrente. Gli stati sono inclusi e definiti per impostazione predefinita nel modello di elemento della pagina semplice in Visual Studio.

Schermo

Specifica la risoluzione dello schermo del dispositivo per il quale si progetta l'app.

Tema

Specifica il tema dell'app.

Mostra riquadro

Attiva e disattiva il frame simulato per tablet intorno all'app nella visualizzazione Progettazione. Selezionare la casella di controllo per mostrare il frame.

Override proporzioni

Attiva e disattiva l'emulazione delle proporzioni del documento nell'area di progettazione. Ciò consente di aumentare la percentuale di scala di un fattore. Selezionare la casella di controllo per attivare l'emulazione. Ad esempio, se la percentuale di scala è 100%, al documento nell'area di progettazione verrà applicato un valore di scala fino a 140%. Questa opzione è disabilitata se la percentuale di scala corrente è 180.

Ritaglia per visualizzare

Specifica la modalità di visualizzazione. Selezionare la casella di controllo per ritagliare le dimensioni del documento in base alle dimensioni di visualizzazione.

La finestra Struttura documento nella finestra di progettazione XAML consente di effettuare le seguenti operazioni:

  • Visualizzare la struttura gerarchica di tutti gli elementi sulla tavola da disegno.

  • Selezionare gli elementi in modo da poterli modificare, ossia spostarli nella gerarchia, modificarli sulla tavola da disegno, impostarne le proprietà nella finestra Proprietà e così via. Per ulteriori informazioni, vedere Utilizzo di elementi in XAML Designer.

  • Creare e modificare modelli per gli elementi che sono controlli.

  • Utilizzare il menu di scelta rapida per gli elementi selezionati. Lo stesso menu è disponibile anche per gli elementi selezionati nella tavola da disegno.

Finestra Struttura documento

Le opzioni della finestra Struttura documento includono quelle elencate di seguito:

Struttura documento

La visualizzazione principale nella finestra Struttura documento mostra la gerarchia di un documento in una struttura ad albero. È possibile utilizzare la natura gerarchica della struttura documento per esaminare il documento con diversi livelli di dettaglio e per bloccare e nascondere gli elementi singolarmente o in gruppo.

Mostra/nascondi

Visualizza o nasconde gli elementi della tavola da disegno che corrispondono agli elementi nella struttura documento. Utilizzare i pulsanti Mostra/Nascondi (identificati, quando gli elementi sono visualizzati, dal simbolo di un occhio) oppure premere CTRL+H per nascondere gli elementi e MAIUSC+CTRL+H per visualizzarli.

Blocca/Sblocca

Blocca o sblocca gli elementi della tavola da disegno che corrispondono agli elementi nella struttura documento. Gli elementi bloccati non possono essere modificati. Utilizzare i pulsanti Blocca/Sblocca (identificati, quando è applicato il blocco, dal simbolo di un lucchetto) oppure premere CTRL+L per bloccare gli elementi e MAIUSC+CTRL+L per sbloccarli.

Reimposta l'ambito

L'opzione nella parte superiore della finestra Struttura documento, con il simbolo di una freccia rivolta verso l'alto, reimposta l'ambito precedente per la struttura del documento. Questa operazione può essere eseguita solo nell'ambito di uno stile o di un modello.

La finestra Proprietà consente di impostare valori di proprietà sui controlli. Di seguito è riportata un'immagine di tale finestra:

Proprietà (finestra)

Nella parte superiore della finestra sono disponibili varie opzioni. È possibile modificare il nome dell'elemento selezionato utilizzando la casella Nome. Nell'angolo superiore sinistro è presente un'icona che rappresenta l'elemento selezionato. Per disporre le proprietà per categoria o in ordine alfabetico, fare clic su Categoria, Nome oppure Origine nell'elenco Disponi per. Per visualizzare l'elenco di eventi per un controllo, fare clic sul pulsante Eventi, al quale è associato il simbolo di un fulmine. Per cercare una proprietà, inizia a digitare il nome della stessa nella casella Cerca. Nella finestra Proprietà vengono visualizzate le proprietà che corrispondono ai criteri di ricerca mentre vengono digitati. In alcuni casi è possibile impostare proprietà avanzate selezionando un pulsante Freccia GIÙ. Per ulteriori informazioni sull'utilizzo delle proprietà e sulla gestione degli eventi, vedere la Guida rapida all'aggiunta di controlli e alla gestione degli eventi

A destra di ogni valore di proprietà è presente un marcatore della proprietà (simbolo della casella). L'aspetto del marcatore della proprietà indica se è presente un'associazione dati o una risorsa applicata alla proprietà. Ad esempio, una casella bianca indica un valore predefinito, una casella nera indica che è stata applicata una risorsa locale e una casella arancione indica che l'associazione dati è stata applicata. Quando si fa clic su questo marcatore, è possibile passare alla definizione di uno stile, aprire il generatore di associazioni dati oppure aprire il selettore risorse.

Aggiunte alla community

Mostra:
© 2014 Microsoft