Ovládací prvek Canvas (plátno)

Canvas (plátno) je nejspíše nejjednodušším z řady prvků Panel. Ve výchozím stavu pouze dovoluje vložit do jím definované oblasti prvky a určit jejich umístění za použití přesných souřadnic.

Pokud jste kdy používali jinou UI knihovnu, jako je WinForms, toto vás pravděpodobně přiměje cítit se jako doma, ale i když může být lákavé mít absolutní kontrolu nad všemi potomky ovládacích prvků, to také znamená, že panel pro vás neudělá nic, jakmile uživatel začne měnit velikost vašeho okna, pokud v něm máte absolutně umístěný text nebo pokud je obsah škálován.

O tom později, pojďme se podívat na jednoduchý příklad. Ten je především o tom, ukázat vám, jak málo Canvas ve výchozím nastavení dělá:

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

Jak vidíte, i když máme dva tlačítka, obě jsou umístěna přesně na stejném místě, takže viditelné je pouze to poslední. Canvas nedělá absolutně nic, dokud nezačnete ovládacím prvkům potomkům přiřazovat souřadnice. To se dělá použitím připojených vlastností Left (vlevo), Right (vpravo), Top (nahoře) a Bottom (dole) z ovládacího prvku Canvas.

Tyto vlastnosti vám umožní specifikovat pozici vzhledem ke čtyřem hranám Canvasu. Ve výchozím nastavení jsou všechny nastaveny na NaN (Not a Number - nečíslo), což způsobí, že Canvas je umístí do levého horního rohu, ale jak bylo zmíněno, toto můžete snadno změnit:

<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šimněte si, jak nastavuji pouze vlastnost nebo vlastnosti, které potřebuji. U prvních dvou tlačítek si přeji specifikovat pouze hodnotu pro osu X, takže používám vlastnosti Left (vlevo) a Right (vpravo) k posunutí tlačítek směrem ke středu z každého směru.

Pro spodní tlačítka používám jak vlastnosti Left/Right (vlevo/vpravo), tak Bottom (dole) k jejich posunutí směrem ke středu v obou směrech. Obvykle specifikujete buď hodnotu Top (nahoře) nebo Bottom (dole) a/nebo hodnotu Left (vlevo) nebo Right (vpravo).

Jak bylo zmíněno, protože Canvas vám dává úplnou kontrolu nad pozicemi, nebude mu vlastně záležet na tom, zda je dostatek místa pro všechny vaše ovládací prvky nebo zda jeden leží na druhém. To z něj dělá špatnou volbu pro téměř jakýkoli druh návrhu dialogů, ale Canvas je, jak název napovídá, skvělý alespoň pro jednu věc: Malování. WPF má řadu ovládacích prvků, které můžete umístit do Canvasu, abyste vytvořili pěkné ilustrace.

Z-Index

V dalším příkladu použijeme několik ovládacích prvků souvisejících s tvary ve WPF, abychom ilustrovali další velmi důležitý koncept při používání Canvasu: Z-index. Obvykle, pokud se dva ovládací prvky v rámci Canvasu překrývají, ten, který je definován jako poslední ve značkách, má přednost a překrývá ostatní. Toto chování lze však snadno změnit použitím připojené vlastnosti ZIndex třídy Panel.

Nejprve příklad, kde vůbec nepoužíváme 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šimněte si, že protože každý z obdélníků je definován po kruhu, všechny překrývají kruh a každý z nich překrývá předchozí definovaný. Pojďme to změnit:

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

Výchozí hodnota ZIndex je 0, ale každému z tvarů přiřadíme novou. Pravidlem je, že prvek s vyšším z-indexem překrývá ty s nižšími hodnotami. Pokud jsou dvě hodnoty totožné, "vyhraje" posledně definovaný prvek. Jak můžete vidět ze snímku obrazovky, změna vlastnosti ZIndex dává úplně jiný vzhled.