The Canvas control

Canvas barangkali merupakan Panel paling sederhana dibandingkan yang lain. Canvas tidak memberi efek apa pun terhadap control di dalamnya hingga Anda memberi tahu posisi control-control tersebut dengan koordinat-koordinat tertentu.

Jika Anda pernah memakai UI library lain seperti WinForms, Anda mungkin merasa sangat terbiasa dengan Canvas. Walaupun terasa menyenangkan untuk memiliki kontrol yang bersifat absolute terhadap semua child control, namun saat pengguna mengubah ukuran window, Panel tidak akan melakukan penyesuaian.

Hal ini akan diterangkan lebih lanjut nanti. Mari lihat sebuah contoh kasus sederhana. Contoh ini akan menggambarkan Anda betapa Canvas melakukan pengaturan yang sangat sedikit secara default:

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

Seperti yang Anda lihat, meski kita memiliki dua button, namun keduanya berada di tempat yang sama sehingga hanya button terakhir yang terlihat. Canvas tidak melakukan apa pun hingga Anda memberikan koordinat tertentu pada child control. Hal ini dilakukan dengan menggunakan properti Left, Right, Top, dan Bottom yang ada di attached properties dari control Canvas

Properti-properti ini berguna untuk menyebutkan posisi relatif terhadap empat sisi Canvas. Secara default, properti-properti ini diset NaN (Not a Number) yang mana akan membuat control di dalamnya di posisi kiri atas. Namun seperti disebutkan, Anda bisa dengan mudah mengubahnya:

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

Perhatikan, saya hanya menyebutkan properti-properti yang saya butuhkan. Untuk dua button pertama, saya hanya ingin menyebutkan nilai untuk sumbu X sehingga saya gunakan properti Left dan Right untuk mendorong kedua tombol tersebut ke tengah dari arahnya masing-masing.

Sementara untuk dua button di bawahnya, saya gunakan properti Left/Right dan Bottom untuk mendorong keduanya ke tengah dari arahnya masing-masing. Biasanya, Anda menyebutkan antara properti Top atau Bottom, dan antara properti Left atau Right.

Seperti disebutkan, karena Canvas memberi Anda kontrol penuh terhadap posisi, Canvas tidak terlalu peduli apakah ada cukup ruang untuk control-control Anda atau apakah control yang satu berada di atas menghalangi control yang lain. Hal ini membuat Canvas pilihan yang buruk untuk desain dialog. Namun, Canvas, sesuai namanya, setidaknya memiliki satu kelebihan: Melukis (painting). WPF memiliki banyak control yang dapat Anda taruh di dalam Canvas untuk membuat ilurastrasi yang menarik.

Z-Index

Untuk contoh-contoh berikutnya, kita akan menggunakan sejumlah control yang berhubungan dengan bentuk (shape) untuk mengilustrasikan sebuah konsep lain yang sangat penting saat menggunakan Canvas: Z-Index. Dalam kondisi normal, apabila dua control dalam sebuah Canvas tumpang tindih, maka yang berada di posisi terakhir akan tampil dan mengalahkan yang lain. Namun, dengan menggunakan sebuah properti terikat (attached property) bernama ZIndex di class Panel, kondisi ini bisa diubah.

Pertama-tama, berikut contoh ketika kita tidak menggunakan z-index sama sekali:

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

Perhatikan, karena setiap kotak didefinisikan setelah lingkaran, mereka menindih/mengalahkan lingkaran. Selain itu, masing-masing kotak akan menindih kotak-kotak yang didefinisikan sebelumnya. Sekarang, mari kita ubah kondisi ini:

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

Nilai default ZIndex adalah 0, namun kita berikan nilai yang lain untuk masing-masing bentukan. Aturannya adalah elemen yang memiliki z-index lebih tinggi akan menindih elemen dengan z-index lebih rendah. Jika kedua nilai sama, maka elemen yang terakhir kali didefinisikanlah akan "menang". Seperti Anda lihat pada tangkapan layar di atas, mengubah properti ZIndex akan memberikan kita tampilan yang berbeda.