The Canvas control

El Canvas és problablement el Panel més simple de tots. Realment no té cap funció per defecte, solament et permet posar controls en ell i posicionar-los tu mateix usant coordenades explícites.

Si has utilitzat abans alguna altra llibreria UI com WinForms, això et farà sentir-te com a casa, però tot i que pot ser temptador tenir control absolut de tots els controls dels fills, això també significa que el Panel no farà res per tú una vegada l'usuari comenci a canviar la mida de la teva finestra, si localitzes text absolutament posicionat, o si el contingut s'escala.

Més endavant entrarem en detall, de moment anem a un exemple senzill. Aquest és sobretot per ensenyar-te el poc que fa el Canvas per defecte.

<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>

Com pots veure, encara que tenim dos botons, tots dos estan col·locats exactament al mateix lloc, per tant només el darrer és visible. El Canvas no fa absolutament res fins que no comencis a donar coordenades als controls dels fills. Això es fa utilitzant les propietats Left, Right, Top i Bottom, adjuntes al control del Canvas.

Aquestes propietats et permeten especificar la posició relativa del les quatre cantonades del Canvas. Per defecte, estan totes posades a NaN (Not a Number), i el Canvas les situarà en la cantonada superior esquerra, però com s'ha dit abans, pots canviar-ho fàcilment:

<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>

Observa com només he definit la propietat o propietats que necessito. Per als dos primers botons, només vull especificar un valor per l'eix X, per tant utilitzo les propietats Left and Right per empènyer els botons cap al centre, des de cada direcció.

Per als botons inferiors, utilitzo tant Left/Right com Bottom per moure'ls cap al centre en ambdues direccions. Normalment especificaràs o bé el valor Top, o el valor Bottom i/o un valor Left o Right.

Com s'ha esmentat abans, donat que el Canvas et dona control complet de les posicions, no li importarà si hi ha prou espai per a tots els teus controls o si un és a sobre de l'altre. Aquest motiu el fa una mala elecció per a gairebé tots els dissenys de diàleg, però el Canvas és, com el nom implica, genial per almenys una cosa: Pintar. WPF té un munt de controls que pots ficar dins un Canvas, per fer bones il·lustracions.

Z-Index

Al següent exemple, utilitzarem un parell de controls relacionats amb la forma, de WPF, per mostrar un altre concepte molt important a l'hora d'usar el Canvas: Z-Index. Normalment, si dos controls dins d'un Canvas es superposen, l'últim que s'hagi definit al markup tindrà precedència i superposarà l'altre o altres. Malgrat això, podem fer ús de la propietat ZIndex inclosa en la classe Panel per canviar-ho fàcilment.

En primer lloc, un exemple on no utilitzem 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>

Observa com, al haver definit els rectangles després del cercle, tots ells cobreixen el cercle, i cadascún d'ells cobriran el rectangle prèviament definit. Anem a intentar canviar això:

<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>

El valor per defecte de ZIndex és 0, però li assignem un valor nou per a cadascuna de les formes. La norma és que els elements amb z-index més alt, superposen a aquells que tinguin valors més baixos. Si dos valors són idèntics, l'element que s'hagi definit darrerament "guanya". Com pots veure a la captura de pantalla, canviar la propietat ZIndex dona com a resultat un aspecte bastant diferent.