Cenni preliminari su WPF e Silverlight Designer

WPF e Silverlight Designer forniscono supporto alla progettazione visiva per la creazione di applicazioni WPF e Silverlight. È possibile compilare interfacce utente per le applicazioni trascinando controlli dalla Casella degli strumenti e impostando proprietà nella finestra Proprietà. È anche possibile modificare il codice XAML direttamente nell'editor di XAML. Nell'illustrazione che segue vengono mostrati WPF e Silverlight Designer e alcune delle finestre di supporto correlate.

Al primo avvio di WPF e Silverlight Designer, la finestra Origini dati e la finestra Struttura documento vengono compresse sul lato sinistro di Visual Studio. Se si mostrano e si bloccano le schede sulla sinistra, appare la visualizzazione precedente. Tale disposizione risulta utile per l'utilizzo dell'area di progettazione.

Di seguito sono elencate le diverse sezioni di questo argomento:

• Visualizzazione Progettazione

• Visualizzazione XAML

• Finestra Proprietà

• Finestra Origini dati

• Finestra Struttura documento

• Compilazione di interfacce utente complete e interattive

• Collaborazione con Expression Blend

Visualizzazione Progettazione

La visualizzazione Progettazione fornisce un'area di progettazione visiva per la compilazione di applicazioni e controlli WPF e Silverlight. Mostra un rendering del codice XAML attualmente in visualizzazione XAML. Quando si modificano dei controlli nell'area di progettazione, la visualizzazione XAML viene aggiornata in modo da riflettere le modifiche. La visualizzazione Progettazione fornisce molte funzionalità per la disposizione di controlli nella finestra o nella pagina dell'applicazione WPF. Alcune di queste funzionalità sono mostrate nell'illustrazione seguente.

Zoom

Il controllo Zoom consente di ridimensionare l'area di progettazione. È possibile ingrandire da 10% a 20x. L'impostazione dello zoom viene salvata nel file con estensione suo della soluzione.

Dettaglio

Quando si applica lo zoom avanti sull'area di progettazione e vengono visualizzate barre di scorrimento orizzontali o verticali, è possibile utilizzare il dettaglio per visualizzare parti dell'area di progettazione che si trovano fuori schermo. Premere e tenere premuta la BARRA SPAZIATRICE, quindi trascinare l'area di progettazione per ottenere il dettaglio.

Adatta

Il pulsante Adatta consente di ridimensionare l'area di progettazione in base allo schermo disponibile in visualizzazione Progettazione. Questa funzione è utile quando sono stati impostati valori per lo Zoom troppo alti o troppo bassi.

Sbarre della griglia

Le sbarre della griglia consentono di gestire righe e colonne in un controllo Grid. È possibile creare ed eliminare colonne e righe e è possibile regolare le larghezze e altezze relative. Per ulteriori informazioni, vedere Procedura: aggiungere righe e colonne a una griglia.

Linee della griglia

Le linee della griglia consentono di controllare la larghezza e l'altezza di colonne e righe di un oggetto Grid. È possibile aggiungere una colonna o una riga nuova facendo clic nelle sbarre sopra e a sinistra dell'oggetto Grid. Per ulteriori informazioni, vedere Procedura: aggiungere righe e colonne a una griglia.

Indicatori della griglia

Un indicatore della griglia viene visualizzato come triangolo nella sbarra della griglia. Quando si trascina un indicatore della griglia o la griglia stessa, la larghezza o l'altezza delle colonne o delle righe adiacenti viene aggiornata man mano che il mouse viene spostato. Per ulteriori informazioni, vedere Procedura: aggiungere righe e colonne a una griglia.

Quadratino di spostamento

Un quadratino di spostamento verrà visualizzato nella parte superiore sinistra di un controllo del pannello selezionato e consente di spostare il riquadro. Fare clic sul quadratino di spostamento e trascinare il controllo nella posizione desiderata nell'area di progettazione. Per ulteriori informazioni, vedere Procedura: selezionare e spostare elementi sull'area di progettazione.

Quadratini di ridimensionamento

I quadratini di ridimensionamento vengono visualizzati su 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 aiutare nel posizionamento preciso del controllo.

Righe di margine

I margini rappresentano la quantità di spazio fisso tra il bordo di un controllo e il bordo di un contenitore. Impostare i margini di un controllo facendo clic sulle righe di margine. Per ulteriori informazioni, vedere Procedura: impostare i margini per un controllo in Progettazione WPF.

Stub del margine

Uno stub del margine viene visualizzato su un controllo selezionato quando il relativo margine è impostato su 0. Fare clic sullo stub del margine per impostare una distanza del margine sul bordo corrispondente del contenitore. Per ulteriori informazioni, vedere Procedura: impostare i margini per un controllo in Progettazione WPF.

Guide di allineamento

Le guide di allineamento consentono di allineare i controlli l'uno rispetto all'altro. Se le guide di allineamento sono abilitate, quando si trascina un controllo relativo ad altri controlli, le guide di allineamento vengono visualizzate quando i bordi e il testo di alcuni controlli sono allineati orizzontalmente o verticalmente. Per ulteriori informazioni, vedere Procedura: eseguire l'allineamento ai margini e alle linee di base del testo.

Barra informazioni

La barra informazioni viene visualizzata nella parte superiore della visualizzazione Progettazione e mostra informazioni sui problemi di rendering nella visualizzazione Progettazione. In alcuni casi, è possibile fare clic sulla barra informazioni per ottenere informazioni aggiuntive sul problema. Nell'illustrazione che segue viene mostrata una visualizzazione espansa della barra informazioni.

Barra di ridimensionamento

Quando si sposta il puntatore del mouse su una sbarra della griglia per un controllo Grid che dispone di due o più colonne o righe, viene visualizzata la barra di ridimensionamento fuori dalla sbarra. La barra di ridimensionamento consente di impostare opzioni di ridimensionamento fisso, proporzionale e automatico per righe e colonne Grid. Per ulteriori informazioni, vedere Procedura: ridimensionare colonne e righe in un controllo Grid.

Tag del ridimensionamento della radice

Il tag del ridimensionamento della radice viene visualizzato nella parte inferiore destra della finestra in visualizzazione Progettazione quando si seleziona la finestra. Il tag del ridimensionamento della radice consente di passare dal ridimensionamento automatico della radice della finestra a quello fisso e viceversa. Per ulteriori informazioni, vedere Attributi della fase di progettazione.

Visualizzazione XAML

Il linguaggio Extensible Application Markup Language (XAML) fornisce un vocabolario dichiarativo, basato su XML per la specifica dell'interfaccia utente di un'applicazione. WPF e Silverlight Designer forniscono una visualizzazione XAML e una visualizzazione Progettazione sincronizzata del markup XAML con rendering dell'applicazione. La visualizzazione XAML include IntelliSense, formattazione automatica, evidenziazione della sintassi e spostamento tra tag. Nell'illustrazione che segue sono mostrate alcune di queste funzionalità XAML.

Barra della visualizzazione suddivisa

La barra della visualizzazione suddivisa consente di controllare le dimensioni relative della visualizzazione Progettazione e della visualizzazione XAML. È inoltre possibile cambiare visualizzazione specificando se la visualizzazione suddivisa è orizzontale o verticale e comprimere entrambi i tipi di vista. Per ulteriori informazioni, vedere Visualizzazione suddivisa: visualizzazione simultanea dell'area di progettazione WPF e del markup XAML.

IntelliSense dell'estensione di markup

Oltre al linguaggio IntelliSense standard, la visualizzazione XAML supporta IntelliSense per le estensioni di markup. Quando si digita una parentesi graffa aperta ({) in visualizzazione XAML, IntelliSense mostra le estensioni di markup disponibili. Quando si sceglie un'estensione di markup dall'elenco, IntelliSense mostra gli attributi disponibili. Per ulteriori informazioni, vedere Procedura dettagliata: modifica di XAML in Progettazione WPF.

Struttura tag

Struttura tag viene visualizzata sotto la visualizzazione XAML e consente di spostarsi su qualsiasi tag padre del tag attualmente selezionato in visualizzazione XAML. Se si muove il puntatore del mouse su un tag in Struttura tag, verrà visualizzata un'anteprima in miniatura di tale elemento. Procedura dettagliata: modifica di XAML in Progettazione WPF.

Zoom

Il controllo Zoom consente di ridimensionare la visualizzazione XAML. È possibile ingrandire da 20% a 400%.

Finestra Proprietà

La finestra Proprietà consente di impostare valori di proprietà sui controlli in visualizzazione Progettazione. Nell'illustrazione che segue è mostrato un esempio della finestra Proprietà.

La parte superiore della finestra Proprietà dispone di varie opzioni. Per modificare il nome del controllo attualmente selezionato, posizionare il cursore nella casella Nome e digitare il nome. Nella parte superiore destra verrà visualizzata un'anteprima in miniatura del controllo attualmente selezionato. Per elencare le proprietà per categoria o per nome, fare clic sul pulsante Per categoria o sul pulsante Per nome. Per ordinare le proprietà in base all'origine, fare clic sul pulsante Ordina per origine proprietà. Per visualizzare un elenco di eventi per un controllo, fare clic sul pulsante Eventi. Per cercare una proprietà, digitare il nome della proprietà nella casella Cerca. Nella finestra Proprietà vengono visualizzate le proprietà che corrispondono ai criteri di ricerca mentre vengono digitati.

A destra del nome della proprietà, nella prima colonna, si trova un indicatore della proprietà. L'indicatore della proprietà indica se è presente un'associazione dati o una risorsa applicata alla proprietà. Quando si fa clic sull'indicatore della proprietà, è possibile aprire il generatore di associazioni dati o il selettore risorse oppure passare alla definizione di una risorsa. Di seguito vengono illustrate le opzioni disponibili quando si fa clic sull'indicatore della proprietà di uno stile.

Generatore di associazioni dati

Il generatore di associazioni dati consente di creare associazioni dati senza digitare alcun codice XAML. È possibile creare associazioni a risorse, contesti dati e proprietà dell'elemento. È anche possibile applicare convertitori di valori. Per ulteriori informazioni, vedere Procedura dettagliata: creazione di un'associazione dati tramite WPF Designer e Procedura dettagliata: utilizzo di DesignInstance per creare un'associazione a dati nella finestra di progettazione.

Editor margini

L'editor margini consente di visualizzare ciascuna impostazione dei margini e il relativo impatto sulla posizione del controllo. Tramite l'editor margini è inoltre possibile modificare i margini per un controllo o per diversi controlli. Per ulteriori informazioni, vedere Procedura: impostare i margini per un controllo in Progettazione WPF.

Selettore risorse

Il selettore risorse consente di trovare e assegnare risorse alle proprietà nella finestra Proprietà. È anche possibile estrarre nelle risorse valori hard-coded per promuovere il riutilizzo. Per ulteriori informazioni, vedere Utilizzo delle risorse.

Editor pennelli

L'editor pennelli consente di creare molti tipi diversi di pennelli nella finestra Proprietà. Per ulteriori informazioni, vedere Procedura: creare un pennello tramite l'editor pennelli.

Finestra Origini dati

È possibile integrare rapidamente dati nell'applicazione WPF tramite Origini dati (finestra). Dopo avere stabilito una connessione dati, è possibile trascinare tabelle dati sull'area di progettazione e verranno generate automaticamente logica di business e associazioni dati. È possibile creare un'associazione a un oggetto, un DataSet ADO.NET, un Entity Data Model o un servizio. Per ulteriori informazioni, vedere Associazione di controlli WPF ai dati in Visual Studio.

Finestra Struttura documento

La finestra Struttura documento fornisce una visualizzazione gerarchica di un documento XAML. È possibile utilizzare la finestra Struttura documento per visualizzare in anteprima, selezionare o eliminare elementi XAML. Nell'illustrazione che segue è mostrato un esempio della finestra Proprietà.

Per ulteriori informazioni, vedere Spostamento all'interno della gerarchia di elementi di un documento WPF.

Compilazione di interfacce utente complete e interattive

In WPF, le classi Window e Page sono superfici visive nelle quali visualizzare informazioni per l'utente. In genere la compilazione di applicazioni WPF prevede l'aggiunta di controlli a un oggetto Window e lo sviluppo di risposte ad azioni dell'utente, ad esempio un clic del mouse o la pressione di tasti. Un controllo è un elemento separato dell'interfaccia utente (UI) utilizzato per visualizzare dati o accettare input di dati.

Quando un utente esegue un'azione nella Window o in uno dei controlli in essa contenuti, l'azione genera un evento. L'applicazione risponde a questi eventi e li elabora quando si verificano. Per ulteriori informazioni, vedere Procedura: creare un gestore eventi semplice.

WPF contiene diversi controlli che possono essere aggiunti in una finestra, ad esempio i controlli che visualizzano caselle di testo, pulsanti, elenchi a discesa, pulsanti di opzione e persino pagine Web. Per un elenco di tutti i controlli utilizzabili in una finestra, vedere Control Library. Se nessun controllo esistente soddisfa le esigenze, WPF supporta anche la creazione di controlli personalizzati tramite l'utilizzo delle classi UserControl e Control.

La funzione di trascinamento di WPF e Silverlight Designer facilita la creazione di applicazioni WPF. È sufficiente selezionare i controlli con il puntatore del mouse e aggiungerli nel punto desiderato della finestra. La finestra di progettazione fornisce strumenti che facilitano la disposizione dei controlli, quali le guide di allineamento e lo zoom.

Infine, se occorre creare elementi dell'interfaccia utente personalizzati, gli spazi dei nomi System.Windows.Media e System.Windows.Shapes contengono un'ampia selezione di classi per disegnare linee, cerchi e altre forme direttamente nella finestra.

Assistenza nella creazione di finestre e controlli

Per informazioni dettagliate sull'utilizzo di queste funzionalità, vedere i seguenti argomenti della Guida.

Descrizione	Argomento della Guida
Creazione di una nuova applicazione WPF con Visual Studio.	Procedura: creare un nuovo progetto di applicazione WPF
Utilizzo dei controlli in una finestra.	Procedura: selezionare e spostare elementi sull'area di progettazione
Creazione di gestori eventi per i controlli WPF	Procedura: creare un gestore eventi semplice
Gestione di eventi da una finestra e i relativi controlli	Procedura: utilizzare eventi associati
Spostamento in un layout WPF o Silverlight.	Spostamento all'interno della gerarchia di elementi di un documento WPF
Creazione di layout dinamici	Layout in Progettazione WPF
Creazione di controlli personalizzati WPF.	Procedura: creare un nuovo progetto di libreria UserControl di WPF
Creazione di associazioni dati.	Associazione dati in WPF Designer

Collaborazione con Expression Blend

In WPF, presentazione e contenuto sono entità ben separate. Gli sviluppatori software e i progettatori grafici possono in questo modo collaborare per creare l'aspetto e il comportamento di un'applicazione. WPF e Silverlight Designer sono ottimizzati per sviluppatori software, Expression Blend è ottimizzato per progettisti grafici. Per ulteriori informazioni, vedere Collaborazione con Expression Blend.

Vedere anche

Concetti

WPF Designer per gli sviluppatori di Windows Form

Collaborazione con Expression Blend

Altre risorse

WPF Designer

Control Library

XAML in WPF

Cronologia delle modifiche

Data	Cronologia	Motivo
Marzo 2011	Aggiornate informazioni sulla finestra Proprietà e sull'editor dei margini.	Miglioramento delle informazioni.