Utilizzo del pannello di layout Grid
Il pannello Grid è il contenitore di layout più flessibile rispetto agli altri contenitori di layout, progettati per gestire funzionalità di layout più specifiche. In Microsoft Expression Blend sono disponibili due modalità di modifica del layout per l'utilizzo dei pannelli Grid:
Modalità di layout Grid (modalità predefinita)
.png "Cc295203.c76bbf09-1922-4f45-8d92-9c8ae64ca4a4(it-it,Expression.40).png")
Offre un'esperienza di modifica identica al comportamento del ridimensionamento in fase di esecuzione del pannello Grid. In questa modalità, quando si spostano i divisori di righe e colonne°.png "Cc295203.e91e3024-62b1-46db-a73c-7e2ef5fd2780(it-it,Expression.40).png")
creati, le dimensioni degli oggetti contenuti nelle righe e nelle colonne cambiano per mantenerne le proprietà Margin.Modalità di layout Canvas
.png "Cc295203.ecb419d9-1def-4c4d-9656-cab9bdb89672(it-it,Expression.40).png")
Offre un'esperienza di modifica identica alla modifica all'interno di un pannello Canvas. In questa modalità, quando si spostano i divisori di righe e colonne° creati, gli oggetti contenuti nelle righe e nelle colonne restano al proprio posto, ma le proprietà Margin vengono aggiornate.
È possibile passare da una modalità all'altra facendo clic sull'icona della modalità che viene visualizzata nell'angolo superiore sinistro quando è selezionato un oggetto Grid oppure selezionando o deselezionando la casella di controllo Usa modalità di layout griglia nella sezione Tavola da disegno della finestra di dialogo Opzioni, accessibile dal menu Strumenti.
Modalità di layout dei pannelli Grid
.png "Cc295203.3078f933-314a-4951-966c-a66f5edbf69f(it-it,Expression.40).png")
Per aggiungere un pannello Grid a un documento, selezionare Grid .png "Cc295203.a87ee957-7fbf-4135-a6ab-6de7e63160aa(it-it,Expression.40).png")
nel pannello Asset.png "Cc295203.0d8b8d29-1af9-418f-8741-be3097d76eab(it-it,Expression.40).png")
oppure tramite il pulsante del contenitore di layout nel pannello Strumenti e quindi trascinarlo con il puntatore sulla tavola da disegno. Al progetto verrà aggiunto il codice XAML seguente:
<Grid/>
Per ulteriori informazioni sull'utilizzo degli oggetti Grid, vedere Aggiungere o rimuovere una riga o una colonna e Modificare l'opzione di ridimensionamento di una riga o di una colonna.
Disposizione degli oggetti in un pannello Grid suddiviso in tre righe e tre colonne in modalità di layout Grid
.png "Cc295203.0c06c18b-6bce-4d41-bf0f-0d1f8cdbf5d3(it-it,Expression.40).png")
Posizionare, ridimensionare e disporre
Lo scopo del layout in un pannello Grid è di posizionare, ridimensionare e disporre gli oggetti in modo efficiente utilizzando le proprietà Alignment, Margin, Width e Height:
Alignment°°°L'allineamento determina la posizione di un oggetto in relazione al rispettivo oggetto padre.
Margins°°°Un margine determina la quantità di spazio vuoto intorno al controllo, tra la parte esterna dell'oggetto figlio e i limiti del pannello.
Width e Height°°°Valori fissi espressi in pixel o in unità di misura indipendenti dal dispositivo equivalenti a circa 1/96 di pollice. È possibile impostare queste proprietà su Auto per ridimensionare automaticamente gli oggetti figlio in base alle dimensioni del pannello padre.
Disporre oggetti figlio
È possibile disporre oggetti in un pannello di layout Grid definendo delle aree all'interno della griglia. A tale scopo, utilizzare i divisori di righe e colonne° per creare una serie di righe e colonne che definiscono le aree della griglia in cui è possibile inserire oggetti. Quando il pannello Grid è il contenitore attivo nel documento, vengono visualizzati due righelli blu lungo i bordi superiore e sinistro della griglia. Quando si sposta il mouse sui righelli utilizzando lo strumento Selezione.png "Cc295203.2ff91340-477e-4efa-a0f7-af20851e4daa(it-it,Expression.40).png")
, il puntatore assume la forma di una freccia con un segno più (+) .png "Cc295203.a61a7ecb-9364-4bfe-ae2e-fac00d6858ba(it-it,Expression.40).png")
e una linea arancione indica dove verrà aggiunta una colonna o una riga. Facendo clic in un punto qualsiasi del righello superiore è possibile aggiungere una colonna alla griglia in tale posizione, mentre facendo clic sul righello di sinistra è possibile aggiungere una riga.
Aggiungere un divisore di colonna alla griglia
.png "Cc295203.814b7368-8ef4-4771-a067-17e30a9f4bff(it-it,Expression.40).png")
È possibile disegnare oggetti figlio in un pannello Grid in modo che questi si sovrappongano. Gli oggetti sovrapposti sono visibili a seconda dello z order, ovvero l'ordine in cui gli oggetti sono stati disegnati o posizionati nell'oggetto padre. È possibile modificare lo z order degli oggetti scegliendo Ordine dal menu Oggetto o facendo clic con il pulsante destro del mouse sugli elementi nel pannello Oggetti e sequenza temporale, scegliendo Ordine e quindi facendo clic sul comando desiderato. Gli oggetti figlio possono inoltre occupare più colonne o righe.
È anche possibile attivare l'allineamento per allineare automaticamente gli oggetti alle guide di allineamento. L'allineamento consente di trascinare gli oggetti sulla tavola da disegno e allinearli automaticamente ai margini, alla linea di base (nel caso degli oggetti di testo) o alla linea rossa tratteggiata di allineamento di altri oggetti dello stesso oggetto contenitore, ad esempio un pannello di layout o i divisori di righe e colonne di un pannello Grid.
Per ulteriori informazioni, vedere Attivare o disattivare lo snapping.
Ridimensionare righe e colonne
Quando un pannello Grid è in Modalità di layout Grid, accanto ai righelli superiore e sinistro del pannello vengono visualizzate icone a forma di lucchetto, che è possibile utilizzare per impostare il tipo di ridimensionamento utilizzato per le righe e le colonne della griglia. È possibile impostare i valori relativi all'altezza per le righe e quelli relativi alla larghezza per le colonne. Per le righe e le colonne di una griglia sono disponibili tre opzioni di ridimensionamento che influiscono anche sulla disposizione degli oggetti figlio nella griglia. Le tre opzioni di ridimensionamento sono le seguenti:
**Dimensioni fisse **Vengono utilizzati valori in pixel (px) e le dimensioni vengono impostate facendo clic sull'icona del lucchetto per impostare l'opzione Dimensioni fisse in pixel (lucchetto chiuso)
.png "Cc295203.56fdad3b-cb94-41a2-8afb-3a2bbf4b2f1a(it-it,Expression.40).png")
. Se sono impostate le dimensioni fisse, la riga o la colonna non verrà ridimensionata.[!NOTA]
Nei progetti di Expression Blend, il termine pixel si riferisce a pixel o unità indipendenti dal dispositivo, equivalenti alla dimensione di un pixel in un monitor con una risoluzione di 96 DPI. Ogni unità corrisponde approssimativamente a 1/96 di pollice, indipendentemente dalle dimensioni del monitor o dalla risoluzione dello schermo.
Ridimensionamento proporzionale°°°Vengono utilizzati asterischi (*) e il ridimensionamento viene impostato facendo clic sull'icona del lucchetto per impostare l'opzione Ridimensionamento proporzionale (lucchetto aperto)
.png "Cc295203.1b4edaf6-b6a8-4498-80dc-949375fa610d(it-it,Expression.40).png")
. Il ridimensionamento proporzionale produce un effetto simile a quello del ridimensionamento percentuale nei documenti HTML.**Ridimensionamento automatico **Le proprietà Width o Height non vengono definite e il ridimensionamento viene impostato facendo clic sull'icona del lucchetto per impostare l'opzione Ridimensionamento automatico
.png "Cc295203.aa9ec064-22f8-4b62-9eed-3f4772362d22(it-it,Expression.40).png")
. Se è impostata questa opzione, gli oggetti del pannello Grid verranno ridimensionati quando le dimensioni dell'oggetto padre verranno modificate.
Ridimensionamento proporzionale e automatico impostati per colonne diverse di un pannello Grid
.png "Cc295203.98b234b2-ac3b-441f-9136-98375fee87b7(it-it,Expression.40).png")
Se si seleziona un divisore della griglia nella tavola da disegno, è possibile utilizzare il pannello Proprietà per selezionare le opzioni di ridimensionamento e modificare la proprietà Width quando si utilizzano il ridimensionamento proporzionale o le dimensioni fisse. Il pannello Proprietà consente inoltre di impostare le proprietà MaxWidth e MinWidth di un divisore di colonna nella griglia.
Posizionare oggetti figlio
In Modalità di layout Canvas è possibile posizionare gli oggetti visivamente operando direttamente sulla tavola da disegno e trascinando gli oggetti in un punto qualsiasi di un pannello Grid anche all'esterno dei limiti. In alternativa è possibile immettere valori di posizionamento precisi in Layout nel pannello Proprietà.
In Modalità di layout Grid è possibile impostare le posizioni degli oggetto figlio contenuti in una griglia definendo i margini di ogni oggetto. I margini specificano lo scostamento di un oggetto rispetto alle righe e alle colonne che definiscono la griglia o rispetto ai bordi della cella nella griglia. I margini vengono impostati quando si trascina un oggetto figlio nella posizione desiderata in una griglia e rappresentano la distanza tra il bordo dell'oggetto selezionato e la riga o la colonna successiva della griglia. È possibile impostare i margini facendo clic sugli adorner dei margini, a forma di nodo. Se l'adorner di un margine è aperto (.png "Cc295203.dac083fe-54cd-4cdc-973a-bea351080175(it-it,Expression.40).png")
e .png "Cc295203.7eeec52f-8610-416e-a0f2-79c7bf117e77(it-it,Expression.40).png")
), significa che il margine non è impostato. Se l'adorner del margine è chiuso (.png "Cc295203.8523b4c7-be0f-4624-961a-6adb66120049(it-it,Expression.40).png")
e .png "Cc295203.95a79778-cb78-400c-9f4f-5f6fc5a02eb1(it-it,Expression.40).png")
), il margine è impostato. Se si ridimensiona la griglia in fase di esecuzione, nelle aree in cui i margini non sono impostati tutti gli oggetti rimangono nella stessa posizione. Gli oggetti per i quali è impostato un margine vengono spostati con il margine durante il ridimensionamento.
Per impostare l'allineamento predefinito, in Expression Blend viene adottata una semplice regola in base alla quale se l'oggetto figlio disegnato o ridimensionato si estende oltre il centro di una riga o di una colonna, le proprietà Width e Height vengono impostate su Auto. In caso contrario, l'allineamento viene corretto. È inoltre possibile impostare un'opzione di allineamento che consente di applicare o meno il margine quando la griglia viene ridimensionata. Nella griglia l'allineamento viene indicato con una linea continua se è impostato e con una linea tratteggiata se non è impostato, come illustrato nell'immagine seguente.
Pulsante in un pannello Grid con margini sinistro e destro impostati (margini impostati, con indicazione del valore del margine) e margini superiore e inferiore non impostati.
.png "Cc295203.cd8d0751-ffa0-4f04-bc2f-09584ecd873d(it-it,Expression.40).png")
Allineamento orizzontale
Left
.png "Cc295203.1e3c2891-633d-4162-a3bd-d5ac53046b56(it-it,Expression.40).png")
°°°L'oggetto viene ancorato a sinistra ma si estende verso destra in caso di ridimensionamentoCenter
.png "Cc295203.02978741-8e12-476d-afa7-165b613ea515(it-it,Expression.40).png")
°°°L'oggetto è sempre ancorato all'asse orizzontale indipendentemente dal ridimensionamento.Right
.png "Cc295203.c0d22c24-ad68-4355-b8f2-d6a373deaf8e(it-it,Expression.40).png")
°°°L'oggetto viene ancorato a destra ma si estende verso sinistra in caso di ridimensionamento.Stretch
.png "Cc295203.90aa9534-0480-4a7f-b992-1af23c71ea9c(it-it,Expression.40).png")
°°°In caso di ridimensionamento, l'oggetto si estende in entrambe le direzioni orizzontali.
Allineamento verticale
Bottom
.png "Cc295203.7c84b219-479d-45e7-b2fc-2df1b5e35129(it-it,Expression.40).png")
°°°L'oggetto viene ancorato in basso ma si estende verso l'alto in caso di ridimensionamento.Center
.png "Cc295203.5d244079-53d6-4188-ac2b-3a31054a2cd7(it-it,Expression.40).png")
°°°L'oggetto è sempre ancorato all'asse verticale indipendentemente dal ridimensionamento.Top
.png "Cc295203.737a11a8-b9d6-4270-8432-f17bb11a1337(it-it,Expression.40).png")
. L'oggetto viene ancorato in alto ma si estende verso il basso in caso di ridimensionamento.Stretch
.png "Cc295203.fbd6b7db-d726-4f40-b8c7-b287423e6615(it-it,Expression.40).png")
°°°In caso di ridimensionamento, l'oggetto si estende in entrambe le direzioni verticali.
Impostazioni dei margini°° Valori fissi espressi in pixel o unità indipendenti dal dispositivo, equivalenti a circa 1/96 di pollice per i margini Alto, Sinistra, Destra e Basso. I margini vengono impostati quando si trascina un oggetto figlio nella posizione desiderata in una griglia e rappresentano la distanza tra il bordo dell'oggetto selezionato e la riga o la colonna successiva della griglia.
Ridimensionare oggetti figlio
Per gli oggetti figlio è possibile utilizzare due opzioni di ridimensionamento principali, ovvero le dimensioni fisse o il ridimensionamento automatico. Per gli oggetti con dimensioni fisse vengono impostati valori specifici relativi a larghezza e altezza nella categoria Layout. Per gli oggetti con ridimensionamento automatico i valori relativi a larghezza e altezza vengono impostati su Auto. Il ridimensionamento viene eseguito automaticamente in base alle dimensioni del pannello padre.
MinWidth e MinHeight Dimensioni minime che un oggetto può assumere se viene ridimensionato o se ne viene modificata la scala in una riga o colonna.
MaxWidth e MaxHeight°° Dimensioni massime che un oggetto può assumere se viene ridimensionato o se ne viene modificata la scala in una riga o colonna. Se non si desidera definire una dimensione massima, è possibile impostare questa proprietà su Infinito.
Contenuto Clip°° Indica se il pannello padre deve ritagliare i propri oggetti figlio.
Barra di divisione della griglia
GridSplitter.png "Cc295203.d08d529f-a27e-4a8f-95aa-8a4e8b4ee7be(it-it,Expression.40).png")
è un controllo utilizzato in un pannello Grid, con cui un utente interagisce per ridimensionare manualmente parti di una griglia in fase di esecuzione. GridSplitter è disponibile nel pannello Asset.
Per ulteriori informazioni sul pannello Grid, sul controllo GridSplitter o su come creare pannelli di layout personalizzati, vedere la sezione Spazio dei nomi di System.Windows.Controls .png "Cc295203.xtlink_newWindow(it-it,Expression.40).png")
della libreria di classi NET Framework per Windows Presentation Foundation (WPF) o la sezione Spazio dei nomi System.Windows.Controls della libreria di classi NET Framework per Microsoft Silverlight.
Vedere anche
Attività
Aggiungere o rimuovere una riga o una colonna
Modificare l'opzione di ridimensionamento di una riga o di una colonna
Copyright © 2011 Microsoft Corporation. Tutti i diritti riservati.