Disposizione degli oggetti

I pannelli di layout sono elementi che controllano il posizionamento, le misure, le dimensioni e la disposizione degli elementi al proprio interno. Il comportamento dei pannelli di layout è analogo a quello dei contenitori. I pannelli agevolano la disposizione e il raggruppamento degli oggetti dell'applicazione. In questa sezione sono disponibili argomenti relativi alla progettazione del layout dell'applicazione Microsoft Expression Blend.

Per informazioni sul sistema di layout nelle applicazioni Windows Presentation Foundation (WPF), vedere Sistema di layout  su MSDN.

Pannelli di layout

In Expression Blend è possibile creare con facilità layout di pagina semplici o complessi, utilizzando i diversi pannelli di layout incorporati o pannelli personalizzati. I pannelli di layout sono elementi che controllano il posizionamento, le misure, le dimensioni e la disposizione di altri elementi al proprio interno. I pannelli di layout fungono essenzialmente da contenitori e possono essere utili ad esempio per organizzare elementi al loro interno.

[!NOTA]

Soltanto i pannelli di layout Grid, Canvas, StackPanel, ScrollViewer e Border sono disponibili in un progetto Microsoft Silverlight.

I pannelli di layout sono adattivi, ovvero possono essere implementati in modo implicito. Il layout generale viene infatti ridimensionato automaticamente in base alle dimensioni della finestra. Questa caratteristica risulta utile in vari scenari, ad esempio durante la creazione di un'interfaccia utente che consente di utilizzare dimensioni e risoluzioni dello schermo variabili, e per risolvere le problematiche legate alla localizzazione. È inoltre possibile scegliere di utilizzare dimensioni fisse implementando i pannelli di layout in modo esplicito. In questo caso nel layout vengono utilizzati attributi Width e Height fissi, di modo che ogni area del layout mantenga le dimensioni designate anche se la finestra dell'applicazione viene ridimensionata.

[!NOTA]

Se si modifica la proprietà Width o Height di un oggetto da un valore fisso a Auto, per tale proprietà verrà impostato il valore predefinito minimo.

È inoltre possibile applicare una trasformazione a un elemento contenuto in un pannello di layout, per impostare la posizione in cui eseguire il rendering dell'elemento dopo il completamento del layout. Questa funzionalità risulta utile per le animazioni, ad esempio per far tornare un elemento nella posizione originale se lo si sposta al di fuori di un pannello Grid. Poiché le trasformazioni sono spostamenti relativi rispetto alla posizione dell'elemento nel layout, nella categoria Trasformazione del pannello Proprietà la posizione predefinita ha coordinate (0,0). Nella maggior parte dei casi non è consigliabile applicare trasformazioni a un elemento contenuto in un pannello di layout, tuttavia nelle animazioni può essere necessario spostare un elemento rispetto alla posizione in cui viene a trovarsi al termine dell'animazione.

In Expression Blend sono disponibili cinque pannelli di layout principali, ognuno dei quali è progettato per gestire un diverso tipo di layout. Nella tabella seguente sono descritti i pannelli di layout.

Pannello	Nome	Descrizione
	Grid	Gli elementi figlio vengono disposti in un layout molto flessibile basato su righe e colonne che formano una griglia. Per ulteriori informazioni, vedere Utilizzo del pannello di layout Grid.
	Canvas	Gli elementi figlio vengono disposti in base a coordinate x e y assolute. Il pannello Canvas consente di utilizzare posizioni fisse per gli elementi visualizzati sullo schermo in fase di esecuzione, come su un canvas vuoto. Per ulteriori informazioni, vedere Utilizzo del pannello di layout Canvas.
	StackPanel	Gli elementi figlio vengono disposti su una sola riga che è possibile orientare o sovrapporre orizzontalmente o verticalmente. Per ulteriori informazioni, vedere Utilizzo del pannello di layout StackPanel.
	WrapPanel	Gli elementi figlio vengono disposti sequenzialmente da sinistra a destra. Quando lo spazio disponibile all'estrema destra del pannello non è sufficiente per posizionare l'elemento successivo, il contenuto viene mandato a capo per proseguire sulla riga successiva e così via, da sinistra a destra e dall'alto in basso. Un pannello Wrap può avere anche un orientamento verticale. In questo caso gli elementi figlio vengono disposti dall'alto verso il basso, procedendo da sinistra a destra. Per ulteriori informazioni, vedere Utilizzo del pannello di layout WrapPanel.
	DockPanel	Gli elementi figlio vengono disposti in modo che rimangano ancorati a un bordo del pannello. Per ulteriori informazioni, vedere Utilizzo del pannello di layout DockPanel.

Altri contenitori di layout

Anche gli altri contenitori di layout influiscono sulla disposizione degli elementi che contengono. Tali contenitori non sono tuttavia ottimizzati per supportare gli scenari di interfaccia utente più complessi, che vengono gestiti più efficacemente dai pannelli di layout principali. Nella tabella seguente sono descritti gli altri contenitori di layout.

Elemento	Nome	Descrizione
	Border	Elemento semplice che applica un bordo, uno sfondo o entrambi a un elemento. L'elemento Border supporta un solo elemento figlio. Per poter utilizzare più elementi figlio all'interno di questo elemento, è consigliabile inserirvi un pannello Grid o Canvas. Per ulteriori informazioni sull'elemento Border, vedere Altri contenitori di layout.
	BulletDecorator	Elemento che supporta solo due elementi figlio, in genere una stringa di testo e un glifo, per formare controlli quale una casella di controllo. Per ulteriori informazioni sull'elemento BulletDecorator, vedere Altri contenitori di layout.
	Popup	Finestra di cui viene eseguito il rendering sopra tutti gli altri contenuti di un'applicazione, ma in una posizione relativa rispetto a un altro elemento. È possibile utilizzare un menu a comparsa per fornire informazioni e opzioni aggiuntive agli utenti che interagiscono con la parte principale dell'interfaccia utente a cui il menu a comparsa si riferisce. L'elemento Popup supporta un singolo elemento figlio e viene posizionato automaticamente in base a un elemento di destinazione. Per impostazione predefinita, l'unico elemento figlio di un elemento Popup è un pannello Grid. Grazie a tale pannello Grid è possibile inserire più elementi figlio subito dopo aver disegnato l'elemento Popup. Nella maggior parte dei casi non è necessario creare manualmente un menu a comparsa. A tale scopo è possibile utilizzare un controllo, ad esempio un menu o una casella combinata, il cui modello include un menu a comparsa. Per ulteriori informazioni sull'elemento Popup, vedere Altri contenitori di layout.
	ScrollViewer	Elemento che consente di attivare lo scorrimento degli elementi figlio contenuti. Poiché supporta un solo elemento figlio, nella maggior parte dei casi è consigliabile inserirvi un pannello di layout, ad esempio un pannello Stack o un pannello Grid. L'elemento ScrollViewer viene utilizzato nei modelli di altri controlli, ad esempio le caselle di riepilogo, per supportare lo scorrimento del contenuto. Quando il contenuto di un elemento ScrollViewer è troppo grande, è possibile attivare il ritaglio del contenuto. È inoltre possibile specificare se le barre di scorrimento devono essere disattivate, nascoste, visibili o visualizzate automaticamente solo quando necessario. Per ulteriori informazioni sull'elemento ScrollViewer, vedere Altri contenitori di layout.
	UniformGrid	Dispone gli elementi figlio nelle aree uguali, o uniformi, di una griglia. L'elemento UniformGrid non è una variante del pannello Grid. Può essere invece considerato come un elemento di layout di affiancamento, poiché crea una spaziatura uguale tra i diversi elementi che contiene, in base al numero di righe e colonne specificato. Quando si aggiungono elementi figlio a un elemento UniformGrid, ciascun elemento viene posizionato in un'area della griglia, a partire da quella in altro a sinistra e procedendo verso quella in basso a destra, fino a riempire l'elemento UniformGrid. Questa soluzione risulta utile per un controllo quale un elenco di immagini. Per ulteriori informazioni sull'elemento UniformGrid, vedere Altri contenitori di layout.
	Viewbox	Modifica la scala di tutti gli elementi figlio contenuti, analogamente a quanto avviene in un controllo Zoom. Poiché Viewbox accetta un solo elemento figlio, per poter applicare l'effetto zoom a più elementi figlio in tale controllo viene in genere inserito un pannello Canvas o Grid. Per ulteriori informazioni sull'elemento Viewbox, vedere Altri contenitori di layout.

Contenitore di layout principale

Nel pannello Oggetti e sequenza temporale è presente un elemento denominato LayoutRoot che rappresenta il pannello di layout principale in un documento di Expression Blend. Per impostazione predefinita, il pannello di layout principale è un pannello Grid, che nella maggior parte dei casi è sufficiente per creare il layout principale della pagina. È tuttavia possibile impostare un altro pannello come pannello di layout principale facendo clic con il pulsante destro del mouse sul pannello principale, scegliendo Modifica tipo di layout e quindi selezionando il pannello di layout desiderato. È inoltre possibile scegliere di utilizzare un pannello Canvas, anziché un pannello Grid, come elemento LayoutRoot predefinito, deselezionando la casella di controllo Usa un pannello Grid come layout predefinito per i nuovi elementi nella sezione Progetto della finestra di dialogo Opzioni, accessibile dal menu Strumenti.

Come utilizzare gli elementi figlio

Expression Blend tenta sempre di aggiungere gli elementi figlio al pannello principale, ovvero il pannello di livello superiore, di un documento. Se tuttavia è presente un altro contenitore attivo, in una posizione diversa della struttura degli oggetti, l'elemento figlio verrà aggiunto a tale contenitore. È possibile rendere un elemento attivo facendo clic sul pannello di layout. Un'evidenziazione blu intorno al pannello indicherà che si tratta ora dell'elemento attivo. Tale evidenziazione viene visualizzata nel pannello Oggetti e sequenza temporale. Se si crea un nuovo pannello e si disegnano immediatamente elementi figlio entro i bordi di tale pannello, gli elementi figlio verranno inseriti nel pannello appena creato, perché quest'ultimo viene automaticamente impostato come elemento attivo.

L'oggetto StackPanel colors2 è il pannello di layout attivo corrente in cui verranno aggiunti i nuovi oggetti figlio

In Expression Blend è inoltre possibile trascinare con facilità gli elementi figlio da un pannello a un altro, per assegnare un nuovo elemento padre a tali elementi in un altro contenitore di layout. Nell'immagine seguente è illustrato un ellisse arancione spostato dal pannello di layout principale Grid in un altro pannello Grid. Attorno ai pannelli che possono accettare un elemento figlio viene visualizzato un rettangolo di selezione tratteggiato, accompagnato da un testo di istruzioni. Per completare l'azione di assegnazione di un nuovo elemento padre, tenere premuto ALT prima di rilasciare il pulsante del mouse.

Assegnazione di un nuovo elemento padre a un oggetto, dal pannello Grid principale a un altro pannello Grid

Layout complesso

Il livello di flessibilità che è possibile ottenere utilizzando un solo pannello di layout non è in genere sufficiente per impostare il layout di una pagina. Una soluzione per creare layout complessi consiste nell'utilizzare i pannelli di layout come contenitori per altri pannelli di layout. È ad esempio possibile inserire un pannello Dock nell'elemento LayoutRoot, che per impostazione predefinita è il pannello Grid, in modo da suddividere la pagina in un insieme di aree, ognuna delle quali contiene in genere uno o più controlli.

Per ulteriori informazioni relative al codice per i layout, vedere la sezione Programmazione in .NET  di Windows Software Development Kit (SDK) .

Copyright © 2011 Microsoft Corporation. Tutti i diritti riservati.