Il controllo Canvas

Il Canvas è probabilmente il Pannello più semplice di tutti. Non fa effettivamente niente di default, ti permette soltanto di aggiungere i controlli al suo interno e posizionarli manualmente esplicitando le coordinate.

Se hai mai usato un'altra libreria UI come WinForms, questo ti farà probabilmente sentire a tuo agio, ma mentre può essere allettante avere controllo assoluto di tutti i controlli figli, questo significa anche che il Pannello non farà niente se l'utente inizierà a ridimensionare la tua finestra, se localizzi del testo posizionato in modo assoluto o se il contenuto viene scalato.

Approfondiremo più avanti, ora vediamo un semplice esempio. Questo è principalmente per mostrarti quanto il Canvas faccia poco di default:

<Window x:Class="WpfTutorialSamples.Panels.Canvas"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Canvas" Height="200" Width="200">
	<Canvas>
		<Button>Button 1</Button>
		<Button>Button 2</Button>
	</Canvas>
</Window>

Come puoi vedere, anche se abbiamo 2 bottoni, sono entrambi posizionati nello stesso posto, quindi solo l'ultimo è visibile. Il Canvas non fa assolutamente nulla fino a che non inizi ad assegnare coordinate ai controlli figli. Questo è possibile usando le proprietà di ancoraggio Left, Right, Top e Bottom dal controllo Canvas.

Queste proprietà ti permettono di specificare la posizione relativa ai quattro lati del Canvas. Di default, sono tutte impostate a NaN (Not a Number), e il Canvas posizionerà il controllo nell'angolo in alto a sinistra, ma come già detto, questo può essere facilmente modificato:

<Window x:Class="WpfTutorialSamples.Panels.Canvas"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Canvas" Height="200" Width="200">
	<Canvas>
		<Button Canvas.Left="10">Top left</Button>
		<Button Canvas.Right="10">Top right</Button>
		<Button Canvas.Left="10" Canvas.Bottom="10">Bottom left</Button>
		<Button Canvas.Right="10" Canvas.Bottom="10">Bottom right</Button>
	</Canvas>
</Window>

Nota come ho semplicemente impostato la proprietà o le proprietà che mi servivano. Per i primi due bottoni, ho voluto solo specificare un valore per l'asse X, quindi ho usato le proprietà Left e Right per spingere i bottoni verso il centro, da ogni direzione.

Per i bottoni in basso, ho usato sia Left/Right che Bottom per spingerli verso il centro in entrambe le direzioni. Normalmente viene specificato un valore per Top o Bottom e/o un valore per Left o Right.

Come detto, visto che il Canvas ti da completo controllo delle posizioni, non terrà conto del fatto che ci sia o meno abbastanza spazio per tutti i tuoi controlli o se si sovrappongono. Questo lo rende una scelta non idonea per quasi tutti i design di finestre di dialogo, ma è invece eccellente, come implica il nome (Canvas = tela), per almeno una cosa: Disegnare. WPF ha una manciata di controlli che possono essere inseriti in un Canvas per creare illustrazioni.

Z-Index

Nel prossimo esempio, useremo un paio dei controlli relativi alle forme di WPF per mostrare un'altro concetto molto importante quanto si usa il Canvas: Z-Index. Normalmente, se due controlli in un Canvas si sovrappongono, quello definito per ultimo nel markup avrà la precedenza e sarà sopra l'altro o gli altri. Tuttavia, utilizzando la proprietà Z-index della classe del Pannello, questo può essere facilmente cambiato.

Prima, un esempio dove non utilizziamo per niente z-index:

<Window x:Class="WpfTutorialSamples.Panels.CanvasZIndex"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="CanvasZIndex" Height="275" Width="260">
    <Canvas>
        <Ellipse Fill="Gainsboro" Canvas.Left="25" Canvas.Top="25" Width="200" Height="200" />
        <Rectangle Fill="LightBlue" Canvas.Left="25" Canvas.Top="25" Width="50" Height="50" />
        <Rectangle Fill="LightCoral" Canvas.Left="50" Canvas.Top="50" Width="50" Height="50" />
        <Rectangle Fill="LightCyan" Canvas.Left="75" Canvas.Top="75" Width="50" Height="50" />
    </Canvas>
</Window>

Notare che siccome ogni rettangolo viene definito dopo il cerchio, tutti saranno sovrapposti al cerchio, e ognuno di loro si sovrapporrà a quello precedentemente definito. Proviamo a cambiare l'ordine:

<Window x:Class="WpfTutorialSamples.Panels.CanvasZIndex"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="CanvasZIndex" Height="275" Width="260">
    <Canvas>
        <Ellipse Panel.ZIndex="2" Fill="Gainsboro" Canvas.Left="25" Canvas.Top="25" Width="200" Height="200" />
        <Rectangle Panel.ZIndex="3" Fill="LightBlue" Canvas.Left="25" Canvas.Top="25" Width="50" Height="50" />
        <Rectangle Panel.ZIndex="2" Fill="LightCoral" Canvas.Left="50" Canvas.Top="50" Width="50" Height="50" />
        <Rectangle Panel.ZIndex="4" Fill="LightCyan" Canvas.Left="75" Canvas.Top="75" Width="50" Height="50" />
    </Canvas>
</Window>

Il valore di default di ZIndex è 0, ma abbiamo assegnato un nuovo valore a ogni forma. La regola è che l'elemento con il maggior z-index è sopra a quelli con valori più bassi. Se due valori sono identici, l'elemento definito per ultimo "vince". Come puoi vedere dallo screenshot, cambiando la proprietà ZIndex da un aspetto differente.