Canvas kontrolü

Canvas büyük ihtimal tümü içinde en basit Panel. Default olarak hiç bir şey yapmaz, sadece içine kontroller yerleştirmenizi ve sonrasında her birine kendiniz açık-net koordinatlar vermenizi mümkün kılar.

Eğer önceden WinForm gibi bir UI kütüphanesi kullandıysanız bu panel sizi evinizde hissettirecektir, tüm alt kontrollerin hakimiyetini elinize almak cazip gelebilir, bu ayrıca panelin kullanıcı pencere boyutuyla oynamaya başladığında hiç bir müdahale yapmayacak demektir.

Daha fazlası biraz sonra, hadi basit bir örnek yapalım. Bu sadece size Canvas'ın default olarak ne yaptığını göstermek için :

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

Gördüğünüz gibi 2 butonumuz olmasına rağmen ikisi de yanı yere üst üste kondu, bu yüzden sadece ikinciyi görebiliyoruz. Canvas yerleştirmek adına hiç bir şey yapmıyor, anca siz alt kontrollere koordinatlar verene kadar. Bunlar Canvas'ın bağlı özellikleri Left, Right, Top ve Bottom kullanılarak yapılır.

Bu özellikler pozisyonu Canvas'ın dört kenarına göre belirtmenizi mümkün kılar. Default olarak hepsi NaN (not a number - sayı değil) değerindedir ve Canvas o kontrolü sol üst köşeye yerleştirir, fakat bahsedildiği gibi bunu değiştirebilirsiniz :

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

Dikkat ederseniz sadece ihtiyacım olan özellikleri ayarladım. İlk iki Button için sadece X ekseni için Left ve Right ile koordinatları belirledim. Bu değerler ile Button'ların kenarlardan ne kadar içeride olduklarını belirledim.

Aşağıdaki butonlar için hem Left/Righ hem Bottom özelliği ile kenarlardan ne kadar içeride olduklarını belirttim. Genellikle ya Top ya da Bottom özelliği ve/veya Left ya da Right özelliği belirtmek yeterlidir.

Daha önce belirtildiği üzere Canvas bütün yerleşim kontrolünü size bıraktığı için tüm kontrolleriniz için yer var mı , yok mu? ilgilenmez, kontroller üst üste gelebilirler. Bu bir çok diyalog tasarımı için kötü bir tercih olacaktır fakat Canvas adından da anlaşılacağı gibi bir şeyde çok iyidir: Boyama. WPF hoş çizimler yapabilmek için Canvas içine yerleştirebileceğiniz bir kısım kontrole sahip.

ZIndex özelliği

Bir sonraki örnekte Canvas'ın bir diğer önemli özelliği olan ZIndex özelliğini görmek için WPF'in şekil kontrollerinden bir kaç tane kullanacağız. Normalde Canvas içinde iki kontrol üst üste gelirse yazım sırasında sonradan gelen üstte olacak ve bize tam olarak görünecektir. Fakat Panel sınıfının bağlı özelliği ZIndex kullanarak bu sıralama değiştirilebilir.

İlk önce ZIndex kullanmadan bir örnek :

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

Dikkat ederseniz dikdörtgenler daireden sonra çizildiği için hepsi dairenin üzerine geldi, ve dikdörtgenlerden de sonra çizilen önce çizilenin üstüne geldi. Hadi bunu değiştirelim :

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

ZIndex için default değer 0, ama biz burada her şekle başka bir tane değer veriyoruz. Kural şu, yüksek ZIndex değerli olan düşük ZIndex değerli olanın önüne geçer. Eğer iki elemanda ZIndex eşitse sonra yazılmış olan önde olacaktır. Ekran görüntüsünden gördüğünüz üzere ZIndex özelliğini vererek daha farklı bir görüntü elde ettik.