Płótno (Canvas)

Kontrolka Canvas jest najprawdopodobniej najprostszym z paneli. W rzeczywistości nie ma żadnego wpływu na elementy podrzędne - pozwala ona tylko na umieszczenie elementu i określenie jego dokładnej pozycji.

Jeśli używałeś wcześniej innej biblioteki graficznej typu WinForms, to prawdopodobnie właśnie ten panel spowoduje, że poczujesz się jak w domu. choć pełna kontrola nad pozycja elementów może być wyjątkowo kusząca, to musisz pamiętać, że kontrolka ta nie zrobi nic dla Ciebie, kiedy będziesz zmieniał rozmiar swojego okna, bądź któryś z zawartych elementow zostanie przeskalowany.

Więcej o tym później, przejdźmy teraz do prostego przykładu. Ma on pokazać jak niewiele Canvas robi sam z siebie:

<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 widzisz, pomimo iż mamy dwa przyciski, to oba zostały umieszczone dokładnie w tym samym miejscu, więc tylko ostatni jest widoczny. Płótno nie zrobi nic dopóki nie nadasz współrzędnych dzieciom. Robi się to poprzez właściwości Left (Lewa), Right (Prawa), Top (Góra), Bottom (dół) dołączone przez kontrolkę Canvas.

Te właściwości pozwalają na określenie pozycji względem czterech krawędzi płótna. Domyślnie wszystkie są ustawione na wartość NaN (Not a number - nie liczba), co powoduje że Canvas pozycjonuje je w lewym górnym rogu. Lecz jak już wspomniano, łatwo możesz to zmienic:

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

Zauważ, że ustawiłem tylko właściwości, które uznałem za konieczne. Dla pierwszych dwóch przycisków określiłem tylko wartości tylko dla osi X, więc użyłem właściwości Left (Lewo) oraz Right (Prawo) aby odsunąć kontrolki od krawędzi w kierunku środka.

Dla dolnych przycisków użyłem dwóch właściwości: Left (Lewo)/Right (Prawo) oraz Bottom (Dół), dzięki temu odsunąłem je od krawędzi lewej/prawej oraz dołu. Zazwyczaj będziesz korzystał z jednej z właściwości Góra (Top) lub Dół (Bottom) oraz jednej z Lewa (Left) lub Prawa (Right).

Jak już wspomniano, z racji, że Canvas oddaje całkowitą kontrolę nad pozycja elementów podrzędnych, nie będzie on reagował wtedy gdy zabraknie miejsca dla twoich kontrolek, ani wtedy gdy jedna z nich zacznie nachodzić na drugą. Z tego powodu jest niepraktyczny przy projektowaniu okien dialogowych. Jednak jest to kontrolka, jak sama nazwa wskazuje (Canvas - płótno), bardzo dobra do rysowania. WPF ma cały zestaw kontrolek który może zostać umieszczony na Płótnie aby uzyskać niezłe ilustracje.

Kontrola nakładania się elementów (Z-Index)

W następnym przykładzie użyjemy kilku kształtów z WPF aby zilustrować bardzo ważną funkcjonalność płótna: Z-Index. Normalnie, jeśli dwie kontrolki w Canvas się nakładają, to ta ostatnia zdefiniowana w kodzie będzie widoczna nad innymi. Można to łatwo zmienić dzięki wykorzystaniu dołączonej właściwości ZIndex.

Najpierw przykład bez kontroli nakładania:

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

Zauważ, że dzięki zdefiniowaniu kwadratów po kole powoduje, że są one ponad nim oraz każdy kolejny kwadrat przykrywa poprzedni. Spróbujmy to zmienić:

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

Domyślną wartością ZIndex jest 0, jednak określiliśmy tę wartość samodzielnie dla każdego z kształtów. Zasada polega na tym, że element z wyższą wartością z-index przykryje ten z niższą. Jeśli wystąpią dwie takie same wartości to „wygrywa ostatni”. Jak widzisz, na zrzucie ekranu powyżej, zmiana wartości ZIndex pozwala uzyskać zupełnie inny widok.