The Canvas control

Canvas je vjerojatno najjednostavniji Panel. Ne radi ništa posebno, samo vam omogućava da stavite u njega kontrole i onda ih pozicionirate koristeći eksplicitne koordinate.

Ako ste ikad koristili neku drugu biblioteku za grafička sučelja kao što je WinForms, ovo će vam vjerojatno biti poznato, ali iako može biti primamljivo imati potpunu kontrolu nad podređenim kontrolama, to također znači da vam Panel neće pomoći ni na kakav način jednom kada korisnik počne smanjivati veličinu prozora, ako lokalizirate apsolutno pozicionirani tekst ili ako se sadržaj skalira.

O tome više kasnije, počnimo s jednostavnim primjerom. Ovdje možete vidjeti koliko malo toga Canvas podrazumijevano radi:

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

Kao što možete vidjeti, iako imamo dva dugmeta, ona su oba postavljena na isto mjesto pa se tako samo posljednji vidi. Canvas ne radi apsolutno ništa sve dok ne počnete postavljati koordinate podređenim kontrolama. To se radi pomoću Lijevo, Desno, Gore i Dolje (Left, Right, Top and Bottom) svojstava na Canvas kontroli.

Ova svojstva vam omogućavaju da definirate položaj relativno u odnosu na 4 ruba Canvasa. Podrazumijevano su sva postavljena na vrijednost NaN (Not a number), zbog čega će ih Canvas postaviti u gornji lijevi kut, ali kao što je već rečeno, to možete jednostavno promijeniti:

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

Primijetite kako postavljam samo ona svojstva koja su mi potrebna. Za prva dva gumba želim samo specificirati vrijednost za X osi, pa koristim svojstva Left i Right kako bih gurnuo gumbe prema središtu, iz svakog smjera.

Za donje gumbe, koristim Left/Right i Bottom kako bi ih gurnuo prema sredini iz oba smjera. Obično ćete definirati ili Top ili Bottom vrijednost i/ili Left ili Right vrijednost.

Kao što je već spomenuto, Canvas vam daje potpunu kontrolu nad pozicioniranjem elemenata, neće ga baš biti briga da li ima ili nema dovoljno prostora za sve vaše kontrole ili ako je jedna preko druge. Ovo ga čini prilično lošim izborom za uglavnom bilo koju vrstu dizajna dijaloga, ali Canvas je, kao što mu ime i implicira, odličan za jednu stvar: Slikanje. WPF ima hrpu kontrola koje možete postaviti unutar Canvasa kako biste stvorili lijepe ilustracije.

Z-Index

U idućem primjeru koristit ćemo nekoliko kontrola vezanih uz oblike u WPF-u kako bismo ilustrirali još jedan vrlo važan koncept prilikom korištenja Canvasa: Z-Index. Obično, ako se dvije kontrole unutar Canvasa preklapaju, ona koja je definirana posljednja će imati prednost i prekrit će drugu(e). Međutim, korištenjem Z-Index svojstva na klasi Panel, ovo se može lako promijeniti.

Prvo primjer u kojem uopće ne koristimo 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>

Primijetite da, budući da su svi pravokutnici definirani nakon kruga, svi oni preklapaju krug, a svaki od njih će preklapati prethodno definirani pravokutnik. Pokušajmo to promijeniti:

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

Podrazumijevana Z-Index vrijednost je 0, ali dodjeljujemo neku drugu svakom od elemenata. Pravilo je da element koji ima viši Z-Index preklapa one s manjim vrijednostima. Ako su dvije vrijednosti jednake, zadnje definirani element "pobjeđuje". Kao što možete vidjeti iz snimke zaslona, mijenjanje Z-Index svojstva daje poprilično drugačiji izgled.