The Canvas control

A Canvas mind közül talán a legegyszerűbb Panel. Alapértelmezetten semmit sem csinál, csak lehetővé teszi, hogy vezérlőket helyezzünk el rajta, és utána azokat magunk pozícionáljuk, explicit koordináták felhasználásával.

Ha már valaha használtunk más UI könyvtárat, mint például a WinForms-ot, akkor otthon érezhetjük magunkat ezzel. Azonban míg csábító lehet, hogy az összes gyermek vezérlőt teljesen kontrolláljuk, ez azt is jelenti, hogy a Panel semmit sem tesz majd, ha a felhasználó elkezdi átméretezni az ablakot, ha abszolút pozícionált szöveget lokalizálunk, vagy ha a tartalom skálázott.

Erről többet majd később, kezdjük egy egyszerű példával. Ez inkább csak azért van, hogy bemutassuk, milyen keveset tesz alapból a Canvas:

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

Amint látható, habár két gombunk van, azok pontosan ugyanarra a helyre kerültek, így csak az utolsó látható. A Canvas abszolút semmit sem csinál, míg koordinátákat nem adunk a gyermek vezérlőknek. Ezt a Left (bal), Right (jobb), Top (fent) és Bottom (lent) kapcsolt tulajdonságokkal tehetjük meg a Canvas vezérlőből.

Ezek a tulajdonságok lehetővé teszik, hogy meghatározzuk a pozíciót a Canvas négy sarkához képest. Alapból mind NaN-ra (Not a Number, Nem egy Szám) van állítva, ami miatt a Canvas ezeket a bal felső sarokba helyezi, de ahogy említettük, ezt könnyedén megváltoztathatjuk:

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

Figyeljük meg, hogy én hogyan változtattam meg csak azt a tulajdonságot, vagy azokat a tulajdonságokat, amely(ek)re szükségem volt. Az első két gomb esetében csak az X-tengelyhez tartozó értéket akartam meghatározni, így a Left (bal) és a Right (jobb) tulajdonságokat használtam, hogy a gombokat a középpont felé toljam minden irányból.

Az alsó gombok esetében mind a Left (bal)/Right (jobb), mind a Bottom (lent) tulajdonságokat használom, hogy közelebb toljam a középpont felé minden irányból. Rendszerint vagy a Top (fent), vagy a Bottom (lent) értéket és/vagy a Left (bal) vagy a Right (jobb) értéket fogjuk használni.

Ahogy említettem, mivel a Canvas a pozíciók teljes vezérlését átadja nekünk, nem igazán kell aggódni amiatt, hogy vajon lesz-e elég hely minden vezérlőnk számára, vagy valamelyik egy másik tetején helyezkedik majd el. Ez rossz választássá teszi szinte a legtöbb fajta párbeszédablak tervezésnek, de a Canvas (Vászon), mint a neve is mutatja, legalább egy dologra nagyszerű: Rajzolásra. A WPF-nek csomó vezérlője van, amiket a Canvasba helyezhetünk, hogy szép illusztrációkat készítsünk.

Z-Index, avagy a magasság tulajdonság.

A következő példában a WPF pár, formákhoz kapcsolódó vezérlőjét fogjuk használni, hogy illusztráljunk egy másik nagyon fontos, Canvas használatához tartozó fogalmat: ez pedig a Z-index. Normálisan, ha két vezérlő egy Canvason átfedésbe kerül, az utoljára meghatározott előnyt élvez, és elfedi a másikat (többit). Azonban a csatolt ZIndex tulajdonság használatával a Panel osztályon, ezt könnyen megváltoztathatjuk.

Először is, egy példa, ahol nem használjuk a z-indexet egyáltalán:

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

Jegyezzük meg, hogy mivel a sokszögek mindegyikét később határoztuk meg, mint a kört, mind elfedik azt, és mind elfedi az előzőleg meghatározott sokszöget. Próbáljuk ezt megváltoztatni:

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

Az alapértelmezett ZIndex értéke 0, de mi új értéket rendelünk minden idomhoz. A szabály az, hogy a nagyobb z-indexszel rendelkező elem elfedi a kisebb értékkel rendelkezőt. Ha két érték azonos, az utoljára definiált elem „győz”. Mint a képernyőmentésből látszik, a ZIndex tulajdonság megváltoztatása teljesen más kinézetet ad.