Controlul Canvas

Canvas-ul este probabil cel mai simplu panou din toate. În realitate nu face nimic în mod implicit, vă permite doar să puneți comenzi în el și apoi să poziționați folosind coordonate explicite.

Dacă ați folosit vreodată o altă bibliotecă UI, cum ar fi WinForms, acest lucru va face probabil să vă simțiți ca acasă, dar în timp ce poate fi tentant să aveți absolut     control asupra tuturor comenzilor pentru copii, aceasta înseamnă că Panoul nu va face nimic pentru dvs. după ce utilizatorul începe să redimensioneze fereastra, dacă localizați     textul absolut poziționat sau dacă conținutul este scalat.

Mai multe despre asta mai târziu, hai să introducem un exemplu simplu. Aceasta este în cea mai mare parte pentru a vă arăta cât de puțin face Canvas în mod implicit:

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

După cum puteți vedea, chiar dacă avem două butoane, ambele sunt plasate în exact același loc, deci numai ultimul este vizibil. Canvas nu face absolut nimic până când nu începeți să introduceți coordonate controalelor copil. Acest lucru se face folosind proprietățile atașate stânga, dreapta, sus și de jos din controlul Canvas.

Aceste proprietăți vă permit să specificați poziția în raport cu cele patru margini ale Canvas-ului. În mod prestabilit, toate sunt setate la NaN (nu este un număr), care va face Canvas-ul să le plaseze în colțul din stânga sus, dar, după cum s-a menționat, puteți schimba ușor acest lucru:

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

Observați cum aș seta proprietatea sau proprietățile de care am nevoie. Pentru primele două butoane, doresc doar să specific o valoare pentru axa X, așadar folosesc proprietățile Stânga și Dreapta pentru a împinge butoanele spre centru, din fiecare direcție.

Pentru butoanele din partea de jos, folosesc atât Left/Right (stânga / dreapta) cât și Bottom (marginea de jos) pentru a le împinge spre centru în ambele direcții. Veți specifica, de obicei, fie o valoare de sus, fie o valoare inferioară și / sau o valoare stânga sau dreapta.

Așa cum am menționat, deoarece Canvas-ul vă oferă un control complet al pozițiilor, nu va conta cu adevărat dacă există sau nu spațiu suficient pentru toate controalele sau dacă sunt unul peste altul. Acest lucru face ca acesta să fie o alegere proastă pentru orice tip de dialog, dar Canvas este, după cum sugerează și numele, minunat pentru cel puțin un lucru: Pictura. WPF are o mulțime de controale pe care le puteți plasa în interiorul unui Canvas, pentru a face ilustrații frumoase.

Z-Index (ordinea de afisare)

În următorul exemplu, vom folosi câteva controale legate de formă ale WPF pentru a ilustra un alt concept foarte important când se utilizează Canvas: Z-Index. În mod normal, dacă două controale în cadrul unei Canvas se suprapun, cel definit ultimul în marcaj va avea prioritate și se va suprapune peste celelalte. Cu toate acestea, utilizând proprietatea Z-Index atașată din clasa Panou, aceast lucru poate fi schimbat cu ușurință.

În primul rând, un exemplu în care nu utilizăm indicele 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>

Observați că, deoarece fiecare dreptunghi este definit după cerc, toate se suprapun cercului și fiecare dintre ele se va suprapune pe cel definit anterior. Să încercăm să schimbăm acest lucru:

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

Valoarea implicită Z-Index este 0, dar îi atribuim una nouă fiecărei forme. Regula este aceea că elementul cu indicele z mai ridicat suprapune peste cele cu valori mai mici. Dacă două valori sunt identice, ultimul element definit "câștigă". După cum puteți vedea din captura de ecran, modificarea proprietății Z-Index oferă un alt aspect.