Layout con posizionamento assoluto e dinamico

Articolo
05/27/2012

[Questa documentazione ha solo scopo di anteprima ed è soggetta a modifiche nelle versioni successive. Gli argomenti vuoti sono inclusi come segnaposto.]

Quando si crea una finestra in un'applicazione, è necessario decidere come disporre i controlli. È necessario anche decidere il comportamento dei controlli quando l'utente ridimensiona la finestra. Si tratta di problemi di posizionamento assoluto e dinamico.

Quando si crea una finestra in un'applicazione, impostare le dimensioni della finestra e dei relativi controlli. È necessario anche decidere il comportamento della finestra e dei controlli in caso di cambiamento del contenuto. Ad esempio, se si aggiunge un controllo Label a una finestra, è possibile specificare il comportamento dell'etichetta in caso di traduzione del testo in un'altra lingua. Si tratta di problemi di ridimensionamento dinamico.

Tipi di layout

Di seguito sono riportati tre tipi di layout che è possibile creare in WPF Designer per Visual Studio.

Assoluto
Gli elementi figlio vengono disposti specificando la posizione esatta relativa all'elemento padre corrispondente. Ad esempio, i controlli vengono disposti su un pannello specificando le coordinate di sinistra e superiori dei controlli relative al pannello. Gli elementi figlio non si spostano quando l'elemento padre viene ridimensionato. Per ulteriori informazioni, vedere Procedura: costruire un layout in base al posizionamento assoluto o Procedura dettagliata: costruzione di un layout in base al posizionamento assoluto.
Dynamic
Specificare la disposizione degli elementi figlio e il wrapping ai relativi elementi padre. Ad esempio, è possibile disporre i controlli in un pannello e specificare un wrapping orizzontale. Se l'elemento padre viene ridotto, gli elementi figlio vengono spostati alla riga successiva. Se l'elemento padre viene ingrandito, gli elementi figlio vengono spostati alla riga precedente. Per ulteriori informazioni, vedere Procedura: costruire un layout dinamico o Procedura dettagliata: costruzione di un layout dinamico.
Dinamico basato sui dati
Associare un controllo ai dati. Nel controllo vengono inseriti i dati e le righe e le colonne vengono adattate automaticamente ai dati.

Quando possibile, è preferibile utilizzare un layout dinamico. I layout dinamici sono i più flessibili e consentono all'utente finale maggiore controllo sull'ambiente. I layout dinamici consentono al contenuto di adattarsi alla localizzazione e ad altre modifiche di contenuto. I layout assoluti devono essere riservati ai casi in cui è importante il posizionamento preciso e immutabile degli elementi, o in cui è presente un solo elemento figlio, ad esempio un'immagine o un elemento grafico.

Nota

È possibile combinare layout assoluti e dinamici.Ad esempio, è possibile che una finestra presenti un layout complessivo dinamico, ma che in una parte della finestra venga utilizzato il posizionamento assoluto.

Nota

Impostare la proprietà UseLayoutRounding per specificare quando valori in pixel non integrali calcolati durante le sessioni Measure e Arrange vengono arrotondati ai valori in pixel interi.Questa proprietà viene ereditata dai controlli figlio.

Riquadri

WPF fornisce numerosi controlli Panel che supportano il posizionamento assoluto e dinamico. È possibile combinare i controlli Panel aggiungendo un controllo Panel come figlio di un altro. Per posizionare gli elementi nelle applicazioni si possono utilizzare i seguenti controlli Panel:

Panel	Tipo di layout	Descrizione
Grid	Dynamic	Viene definita un'area dove è possibile posizionare gli elementi figlio in righe e colonne.
DockPanel	Dynamic	Viene definita un'area dove è possibile posizionare e disporre in stack gli elementi figlio lungo il bordo superiore, inferiore, sinistro o destro.
WrapPanel	Dynamic	Gli elementi figlio vengono disposti automaticamente in posizione sequenziale, tramite lo spostamento del contenuto alla riga successiva al bordo del contenitore padre. L'ordinamento in sequenza si verifica dall'alto in basso o da sinistra a destra a seconda che l'orientamento sia impostato in orizzontale o in verticale.
StackPanel	Dynamic	Gli elementi figlio vengono disposti in una singola riga che può essere orientata orizzontalmente o verticalmente.
UniformGrid	Dynamic	Gli elementi figlio vengono disposti automaticamente in righe e colonne. Le righe e le colonne sono ripartite uniformemente. Se un elemento non si adatta in una cella, viene troncato.
Canvas	Assoluto	Viene definita un'area dove è possibile posizionare gli elementi figlio esplicitamente utilizzando le coordinate.

Controlli

WPF fornisce controlli che supportano il posizionamento dinamico basato sui dati. Tali controlli possono essere associati ai dati e ridimensionati automaticamente per adattarsi a essi. È possibile utilizzare i seguenti controlli per visualizzare dati dinamicamente nelle applicazioni:

Controllo	Tipo di layout	Descrizione
ListView	Dinamico basato sui dati	Viene visualizzato un elenco di elementi dei dati.
GridView	Dinamico basato sui dati	Gli elementi dei dati vengono visualizzati in colonne per un controllo di visualizzazione elenco.

Ridimensionamento dinamico

Nel ridimensionamento dinamico, i controlli vengono configurati in modo da comprimersi o espandersi automaticamente per adattarsi al contenuto. Ad esempio, se si ridimensiona un controllo Label per adattare il testo a una lingua, e il testo viene tradotto in un'altra lingua, è possibile impostare il ridimensionamento automatico per l'adattamento al nuovo testo. Il posizionamento dinamico supporta il ridimensionamento dinamico regolando automaticamente la posizione dei controlli in caso di cambiamento delle dimensioni.

Di seguito vengono riportate le proprietà da impostare per creare layout dinamici:

Proprietà	Valori	Si applica a	Note
Width	* double, Auto,	Finestre, controlli, colonne della griglia.	Utilizzare il ridimensionamento automatico e proporzionale per la massima flessibilità. Per ulteriori informazioni, vedere la sezione successiva. * si applica solo alle colonne della griglia.
Height	* double, Auto,	Finestre, controlli, righe della griglia.	Utilizzare il ridimensionamento automatico e proporzionale per la massima flessibilità. Per ulteriori informazioni, vedere la sezione successiva. * si applica solo alle righe della griglia.
MinWidth	double	Finestre, controlli, colonne della griglia.	Impostare su 0 per la massima flessibilità.
MinHeight	double	Finestre, controlli, righe della griglia.	Impostare su 0 per la massima flessibilità.
MaxWidth	double, Infinity	Finestre, controlli, colonne della griglia.	Impostare su Infinity per la massima flessibilità.
MaxHeight	double, Infinity	Finestre, controlli, righe della griglia.	Impostare su Infinity per la massima flessibilità.
ResizeMode	NoResize CanMinimize CanResize CanResizeWithGrip	Windows	Impostare su CanResize per la massima flessibilità. Consente all'utente di ridimensionare la finestra.
SizeToContent	Manual Width Height WidthAndHeight	Windows	Impostare su WidthAndHeight per la massima flessibilità. Consente il ridimensionamento automatico della finestra quando il contenuto si espande.

Ridimensionamento automatico e proporzionale

Il ridimensionamento automatico viene utilizzato per consentire ai controlli di adattarsi al contenuto, anche se il contenuto cambia dimensioni. Il ridimensionamento proporzionale viene utilizzato per distribuire lo spazio disponibile fra le righe e le colonne di una griglia in base a proporzioni ponderate. In XAML (Extensible Application Markup Language), i valori proporzionali vengono espressi come * (o n*). Ad esempio, se si dispone di una griglia di 4 colonne, è possibile impostare la relativa larghezza come segue:

Colonna 1	Auto	La colonna verrà ridimensionata per adattarsi al contenuto.
Colonna 2	*	Dopo il calcolo delle colonne automatiche, la colonna ottiene parte della larghezza rimanente. La colonna 2 sarà larga la metà rispetto alla colonna 4.
Colonna 3	Auto	La colonna verrà ridimensionata per adattarsi al contenuto.
Colonna 4	2*	Dopo il calcolo delle colonne automatiche, la colonna ottiene parte della larghezza rimanente. La colonna 4 sarà larga il doppio rispetto alla colonna 2.