Creazione di un'interfaccia utente tramite XAML Designer

La finestra di progettazione XAML in Visual Studio 2013 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.

Area di lavoro della finestra di progettazione 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.

Visualizzazioni di sviluppo

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.

È 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 di Grid consentono di gestire righe e colonne in un pannello Griglia. È 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. Puoi 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.

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:

• 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%.

Finestra Dispositivo

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. La finestra Dispositivo è disponibile nel menu Progettazione quando utilizzi la finestra di progettazione XAML. Di seguito è riportata un'immagine di tale finestra:

Le opzioni della finestra Dispositivo sono le seguenti:

• Schermo
  Specifica dimensioni e risoluzioni di visualizzazione diverse per l'app.

• Orientamento
  Specifica diversi orientamenti per l'app, Orizzontale o Verticale.

• Bordo
  Specifica diversi allineamenti per i bordi dell'app, ad esempio Entrambi, A sinistra, A destra o Nessuno.

• Contrasto elevato
  Visualizza l'app in anteprima in base all'impostazione di contrasto selezionata. Se per l'impostazione viene specificato un valore diverso da Predefinito, l'impostazione della proprietà RequestedTheme in App.xaml verrà ignorata.

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

• Larghezza minima
  Specifica l'impostazione della larghezza minima. Tale valore può essere modificato nel file App.xaml.

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

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

Finestra Struttura documento

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.

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.

Finestra Proprietà

La finestra Proprietà consente di impostare valori di proprietà sui controlli. Di seguito è riportata un'immagine di tale 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, vedi 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.

Vedere anche

Attività

Procedura per creare e applicare una risorsa

Procedura per associare dati in XAML Designer

Concetti

Utilizzo di elementi in XAML Designer

Altre risorse

Riferimento all'interfaccia utente di XAML Designer