Il controllo DockPanel

Il DockPanel permette di ancorare facilmente il contenuto ai quattro lati (sopra, sotto, sinistra e destra). Questo lo rende un'ottima scelta in molte situazioni, dove si vuole dividere la finestra in aree specifiche, specialmente perché di default, l'ultimo elemento all'interno del DockPanel, a meno che questa funzionalità non sia espressamente disabilitata, occuperà automaticamente tutto lo spazio rimanente (il centro).

Come abbiamo visto con molti altri pannelli in WPF, stai iniziando ad ottenere vantaggi dalle possibilità dei pannelli usando le proprietà che fornisce, in questo caso la proprietà DockPanel.Dock, che ti permette di decidere in quale direzione ancorare il controllo figlio. Se non usi questa proprietà, il primo controllo (o i primi) saranno ancorati a sinistra, con l'ultimo che occuperà lo spazio restante. Ecco un esempio di come usare la proprietà:

<Window x:Class="WpfTutorialSamples.Panels.DockPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DockPanel" Height="250" Width="250">
	<DockPanel>
		<Button DockPanel.Dock="Left">Left</Button>
		<Button DockPanel.Dock="Top">Top</Button>
		<Button DockPanel.Dock="Right">Right</Button>
		<Button DockPanel.Dock="Bottom">Bottom</Button>
		<Button>Center</Button>
	</DockPanel>
</Window>

Come già accennato, non assegnamo una posizione di ancoraggio per l'ultimo figlio, perché il pannello centrerà automaticamente il controllo, permettendogli di riempire lo spazio rimanente. Noterai anche che i controlli attorno al centro occupano solamente la quantità di spazio di cui hanno bisogno - tutto il resto è a disposizione della posizione centrale. Per questo motivo puoi vedere che il bottone Right occupa uno spazio leggermente maggiore del bottone Left - il carattere in più semplicemente richiede più pixel.

L'ultima cosa che puoi notare, è come lo spazio viene diviso. Per esempio, il bottone Top non ottiene tutto lo spazio in alto, perché il bottone Left ne prende una parte. Il DockPanel decide quale controllo privilegiare guardando alla loro posizione nella dichiarazione. In questo caso, il bottone Left ha la precedenza perché è dichiarato per primo. Fortunatamente, questo significa che è molto facile cambiare l'ordine, come vedremo ne prossimo esempio, dove abbiamo anche diviso equamente lo spazio assegnando larhgezza/altezza ai controlli figli:

<Window x:Class="WpfTutorialSamples.Panels.DockPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DockPanel" Height="250" Width="250">
	<DockPanel>
		<Button DockPanel.Dock="Top" Height="50">Top</Button>
		<Button DockPanel.Dock="Bottom" Height="50">Bottom</Button>
		<Button DockPanel.Dock="Left" Width="50">Left</Button>
		<Button DockPanel.Dock="Right" Width="50">Right</Button>	
		<Button>Center</Button>
	</DockPanel>
</Window>

I controlli in alto e in basso ora hanno la precedenza rispetto ai controlli a sinistra e a destra, e tutti occupano 50 pixel rispettivamente in altezza o larghezza. Se ridimensioni la finestra, noterai che queste larghezze/altezze statiche rimangono le stesse - solo la dimensione dell'area centrale aumenta o diminuisce a seconda di come ridimensioni la finestra.

LastChildFill

Come abbiamo detto, di default l'ultimo figlio del DockPanel occupa tutto lo spazio rimasto. Tuttavia questo comportamento può essere disabilitato tramite LastChildFill. L'esempio che segue mostra come sia stato disabilitato, ed allo stesso tempo, come sia possibile agganciare più di un controllo sullo stesso lato:

<Window x:Class="WpfTutorialSamples.Panels.DockPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DockPanel" Height="300" Width="300">
	<DockPanel LastChildFill="False">
		<Button DockPanel.Dock="Top" Height="50">Top</Button>
		<Button DockPanel.Dock="Bottom" Height="50">Bottom</Button>
		<Button DockPanel.Dock="Left" Width="50">Left</Button>
		<Button DockPanel.Dock="Left" Width="50">Left</Button>
		<Button DockPanel.Dock="Right" Width="50">Right</Button>
		<Button DockPanel.Dock="Right" Width="50">Right</Button>
	</DockPanel>
</Window>

In questo esempio, abbiamo ancorato due controlli a sinistra e due controlli a destra, e allo stesso tempo, abbiamo disabilitato la proprietà LastChildFill. Questo ci lascia con dello spazio vuoto al centro, che potrebbe essere preferibile in alcuni casi.