Ovládací prvok Canvas

Canvas (plátno) je pravdepodobne najjednoduchší panel zo všetkých. Predvolene nerobí nič, len umožňuje jednoducho vložiť ovládacie prvky a potom ich umiestniť pomocou explicitných súradníc.

Ak ste niekedy používali inú knižnicu UI ako je WinForms, tak sa budete cítiť ako doma, ale aj keď môže byť lákavé, mať absolútnu kontrolu nad všetkými podriadenými kontrolkami, znamená to aj to, že Panel vám nič neurobí, keď používateľ zmení veľkosť vášho okna, ak použijete absolútne pozície, alebo ak je obsah zmenšený.

Viac o tom neskôr, teraz jednoduchý príklad. Toto je o tom ukázať vám, ako málo robí Canvas pri predvolenom nastavení:

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

Ako vidíte, aj keď máme dve tlačidlá, obe sú umiestnené na rovnakom mieste, takže je viditeľné len posledné. Canvas nevykonáva absolútne nič, kým nezadáte súradnice ovládacím prvkom. Toto sa vykonáva pomocou vlastností Left, Right, Top a Bottom ovládacieho prvku Canvas.

Tieto vlastnosti umožňujú určiť polohu vzhľadom na štyri okraje Canvasu. V predvolenom nastavení sú všetky nastavené na hodnotu NaN (Not a Number), ktorá ich umiestni do ľavého horného rohu, ale ako bolo uvedené, môžete to ľahko zmeniť:

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

Všimnite si, ako nastavím vlastnosť, alebo vlastnosti, len ktoré potrebujem. Pre prvé dve tlačidlá chcem určiť len hodnotu pre os X, takže používam vlastnosti Left a Right na posun tlačidiel smerom do stredu z každého smeru.

Pre obe spodné tlačidlá používam Left/Right and Bottom na posun smerom k stredu v oboch smeroch. Zvyčajne určujete buď Top, alebo Bottom hodnotu a/alebo hodnotu Left, alebo Right.

Ako bolo uvedené, aj keď Canvas vám dáva úplnú kontrolu nad pozíciami, nebude naozaj jedno, či je, alebo nie je dostatok priestoru pre všetky vaše ovládacie prvky, alebo či je jeden cez druhý. To robí zlá voľba pre výber dizajnu dialógu, ale Canvas je, ako to naznačuje meno, skvelý pre aspoň jednu vec: Painting (kreslenie). WPF má veľa ovládacích prvkov, ktoré môžete vložiť do plátna, aby ste mali pekné ilustrácie.

Z-Index

V nasledujúcom príklade použijeme niekoľko ovládacích prvkov WPF súvisiacich s tvarom, aby sme ilustrovali ďalší, veľmi dôležitý koncept pri použití panelu Canvas: Z-Index. Normálne, ak sa dva prvky v rámci Canvas prekrývajú, bude mať ten, ktorý bol definovaný naposledy prednosť a prekryje ostatné. Avšak pomocou pripojenej vlastnosti ZIndex v triede Panel, to môžeme ľahko zmeniť.

Po prvé, príklad, kde vôbec nepoužívame 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>

Všimnite si, že každý obdĺžnik je definovaný po kruhu, všetky prekrývajú kruh a každý z nich prekrýva predtým definovaný. Skúsme to zmeniť:

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

Predvolená hodnota ZIndex je 0, ale každému prvku priradíme novú. Pravidlom je, že prvok s vyšším z-indexom prekrýva tie prvky s nižšími hodnotami. Ak sú dve hodnoty identické, posledný definovaný prvok "vyhrá". Ako môžete vidieť na snímke obrazovky, zmeny vlastností ZIndex poskytujú úplne iný pohľad.