Merhabalar, bir önceki makalemizde XAML ile yerleşim kontrolleri konusuna giriş yapmış en çok kullanılan üç kontrol olan StackPanel, DockPanel ve Grid kontrollerinden ve özelliklerinden bahsetmiştik. Bu makalemizde ise kalan üç kontrol olan Canvas, WrapPanel ve TabPanel'den bahsedeceğiz.

Canvas Kontrolü

Canvas kontrolü yapı olarak Grid kontrolüne çok benzer; yani içerisinde kontrolleri istediğiniz yere koyabilirsiniz; ancak Grid kontrolünden bir özelliği ile ayrılır Margin. Grid kontrolüne koyduğunuz bir kontrolün nerede duracağını Margin özelliğine gerekli uzaklıkları atayarak bildiriyorduk. Bu sebeple formun boyunda bir değişiklik olması durumunda ise kontrollerin yerleri dinamik olarak değişiyor. Aşağıda bunu gösteren ekran görüntülerini bulabilirsiniz.

Grid ile ilk durum.

Form yeniden boyutlandırıldığı zaman ki durum.

Görüldüğü gibi form yeniden boyutlandırılınca kontrollerin boyutlarında da değişmeler meydana gelmektedir.

Canvas kontrolünde ise kontorlleri, bu yerleşim kontrolü içerisine koyarkan Canvas.Left ve Canvas.Top özelliklerini ayarlarayarak ekleriz. Bu özelliklerden Canvas.Left eklenen kontrolün Canvas kontrolüne göre soldan uzaklığını, Canvas.Top özelliği ise üstten uzaklığını belirler. Bu yüzden form üzerinde yeniden boyutlandırma yapıldığı zaman kontrollerin yeri değişmez, üst üste binme, altta kalma durumları meydana gelebilir.

Örneğin aşağıda Canvas kontrolüne eklenen altı kontrol görülmektedir.

<Canvas>
<Button Canvas.Left="45" Canvas.Top="191" Height="23" Name="button1" Width="75">Button</Button>
<TextBox Canvas.Left="137" Canvas.Top="137" Height="21" Name="textBox1" Width="120" />
<Button Canvas.Left="87" Canvas.Top="80" Height="23" Name="button2" Width="75">Button</Button>
<Button Canvas.Left="194" Canvas.Top="11" Height="23" Name="button3" Width="75">Button</Button>
<Label Canvas.Left="0" Canvas.Top="11" Height="23" Name="label1" Width="120">Sol üst köşe</Label>
<Label Canvas.Left="192" Canvas.Top="223" Height="28" Name="label2" Width="77">Sağ alt köşe</Label>
</Canvas>

Bu kod çalıştırıldığı zaman ilk başta aşağıdaki gibi görünecektir.

Şayet formun boyutlarında bir değişiklik yapılırsa bu sefer aşağıdaki gibi bir görüntü ortaya çıkabilir.

Bu bize Windows Forms'ta bulunan Anchor özelliği gibi kontrolün forma hangi kenarlardan tutunduğu ve yeniden boyutlandırmalarda nasıl davrandığını hatırlatacaktır. Yine Anchor özelliğinde olduğu gibi istenirse kontrol Sol Üst köşeden değilde Sağ Alt köşeden bağlanması sağlanabilir.Bunun yapılabilmesi için de Canvas.Bottom ve Canvas.Right özelliklerinin ayarlanması gerekir. Böylece form yeniden şekillendirildiği zaman ise kontrol sağ ve alt kenarlara uygun olarak yer değiştirecektir. Yukarıdaki örnekte bütün kontroller forma Sol kenarından ve üst kenarından yapıştığı için sağ - alt tarafından yapılan bir yeniden boyutlandırma kontrolleri etkilemiyor. Oysa ki bu form aşağıdaki gibi hazırlanırsa daha farklı davranacaktır.

<Canvas>
<Button Canvas.Left="66" Canvas.Bottom="176" Height="23" Name="button1" Width="75">Button</Button>
<TextBox Canvas.Left="137" Canvas.Top="137" Height="21" Name="textBox1" Width="120" />
<Button Canvas.Right="12" Canvas.Top="11" Height="23" Name="button2" Width="75">Button</Button>
<Button Canvas.Right="178" Canvas.Bottom="50" Height="23" Name="button3" Width="75">Button</Button>
<Label Canvas.Left="0" Canvas.Top="9.52" Height="23" Name="label1" Width="120">Sol üst köşe</Label>
<Label Canvas.Right="12" Canvas.Bottom="12" Height="28" Name="label2" Width="77">Sağ alt köşe</Label>
</Canvas>

Bu form yeniden boyulandırıldığı zaman ise durum biraz daha farklı olacaktır.

Görülebileceği üzere yapılan yeni boyutlandırma ile kontrollerde hareket etmiş, bu yüzden bazen üst üste gelmişlerdir, burada görünmüyor olsa da formdan da çıkmaları muhtemeldir. Bu yüzden Canvas kontrolü kullanılırken dikkat edilmelidir.

WrapPanel Kontrolü

WrapPanel kontrolü StackPanel kontrolüne benzeyen bir kontroldür. Kontrol içerisine eklenen başka kontroller belirlenen bir akış içerisinde form üzerine dizilirler. Bu dizilim varsayılan olarak sol üst köşeden başlar ve yan yana dizilirler. Yan yana dizilirken eğer yeterli yer bulunamazsa kontroller bir alt satırdan dizilmeye devam ederler. Bu açıdan birçok metin editöründe bulunan Sözcük Kaydırma (Word Wrap) özelliğine benzetilebilirler.

<WrapPanel>
<Button Height="23" Name="button1" Width="75">Button</Button>
<Button Height="23" Name="button2" Width="75">Button</Button>
<Label Height="23" Name="label1" Width="120">Label</Label>
<Label Height="23" Name="label2" Width="120">Label</Label>
<TextBox Height="21" Name="textBox1" Width="120" />
<TextBox Height="21" Name="textBox2" Width="120" />
<Button Height="23" Name="button3" Width="75">Button</Button>
<Button Height="23" Name="button4" Width="75">Button</Button>
<Label Height="23" Name="label3" Width="120">Label</Label>
<Label Height="23" Name="label4" Width="120">Label</Label>
<TextBox Height="21" Name="textBox3" Width="120" />
<TextBox Height="21" Name="textBox4" Width="120" />
<Button Height="23" Name="button5" Width="75">Button</Button>
<TextBox Height="21" Name="textBox5" Width="120" />
<Label Height="23" Name="label5" Width="120">Label</Label>
</WrapPanel>

Yukarıdaki kod ile WrapPanel kontrolüne eklenen 15 kontrol aşağıdaki gibi bir dizilim gösterirler.

WrapPanel kontrolünün FlowDirection özelliği RightToLeft değerine atanırsa, kontroller sağ kenardan sol kenara doğru dizilmeye başlanır.

<WrapPanel FlowDirection="RightToLeft">
<Button Height="23" Name="button1" Width="75">Button</Button>
<Button Height="23" Name="button2" Width="75">Button</Button>
<Label Height="23" Name="label1" Width="120">Label</Label>
<Label Height="23" Name="label2" Width="120">Label</Label>
<TextBox Height="21" Name="textBox1" Width="120" />
<TextBox Height="21" Name="textBox2" Width="120" />
<Button Height="23" Name="button3" Width="75">Button</Button>
<Button Height="23" Name="button4" Width="75">Button</Button>
<Label Height="23" Name="label3" Width="120">Label</Label>
<Label Height="23" Name="label4" Width="120">Label</Label>
<TextBox Height="21" Name="textBox3" Width="120" />
<TextBox Height="21" Name="textBox4" Width="120" />
<Button Height="23" Name="button5" Width="75">Button</Button>
<TextBox Height="21" Name="textBox5" Width="120" />
<Label Height="23" Name="label5" Width="120">Label</Label>
</WrapPanel>

Ayrıca WrapPanel kontrolüne eklenen kontrollerin istenirse yatay yerine dikey olarakda dizilmesi de sağlanabilir. Bunun için kontrolün Orientation özelliği Vertical olarak ayarlanmalıdır. Böylece kontroller, WrapPanel içerisinde dikey bir sıra ile sıralanmaya başlanır.

<WrapPanel Orientation="Vertical">
<Button Height="23" Name="button1" Width="75">Button</Button>
<Button Height="23" Name="button2" Width="75">Button</Button>
<Label Height="23" Name="label1" Width="120">Label</Label>
<Label Height="23" Name="label2" Width="120">Label</Label>
<TextBox Height="21" Name="textBox1" Width="120" />
<TextBox Height="21" Name="textBox2" Width="120" />
<Button Height="23" Name="button3" Width="75">Button</Button>
<Button Height="23" Name="button4" Width="75">Button</Button>
<Label Height="23" Name="label3" Width="120">Label</Label>
<Label Height="23" Name="label4" Width="120">Label</Label>
<TextBox Height="21" Name="textBox3" Width="120" />
<TextBox Height="21" Name="textBox4" Width="120" />
<Button Height="23" Name="button5" Width="75">Button</Button>
<TextBox Height="21" Name="textBox5" Width="120" />
<Label Height="23" Name="label5" Width="120">Label</Label>
</WrapPanel>

Gördüğünüz gibi WrapPanel, StackPanel kontrolüne oldukça benzer. Sadece WrapPanel'deki dizilimleri elde etmeniz için StackPanel'de biraz daha ayar yapmanız gerekmektedir.

TabPanel Kontrolü

TabPanel kontrolü neredeyse bütün masaüstü programlama ortamlarında var olan sekmeli bir görüntü oluşturmak için sekme kontrollerinin WPF ortamındaki karşılığıdır. Forma yerleştireceğiniz bir TabPanel kontrolü, TabControl isminde bir kontrol alır (daha fazla da alabilir). TabControl'de TabItem kontrolleri alır. Burada her eklenen TabItem kontrolü sekmeli yapı içerisinde bir tane sekme oluşturacaktır.

<TabPanel VerticalAlignment="Top" HorizontalAlignment="Stretch" >
<TabControl VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<TabItem Header="Sekme 1">1</TabItem>
<TabItem Header="Sekme 2">2</TabItem>
<TabItem Header="Sekme 3">3</TabItem>
<TabItem Header="Sekme 4">4</TabItem>
<TabItem Header="Sekme 5">5</TabItem>
</TabControl>
</TabPanel>

Bu kod ile aşağıdaki gibi bir ekran görüntüsü oluşur.

Normal şartlarda TabItem kontrolü içine sadece bir tane nesne alabilir, tahmin edebileceğiniz gibi bu da pek kullanışlı değildir. Bu yüzden TabItem kontrolüne eklenecek alt kontroller StackPanel veya Grid gibi başka bir yerleşim kontrolü eşliğinde kontrole eklenir ve istenen tasarıma ulaşılmış olur.

Öncelikle TabItem kontrolüne birden fazla düğme eklemeye çalışalım.

Bu yüzden StackPanel veya Grid kontrolleri kullanılır.

<TabItem Header="Sekme 1">
<StackPanel>
<Button Content="Düğme"/>
<Button Content="Düğme 2"/>
</StackPanel>
</TabItem>

Ya da Grid kontrolü ile aşağıdaki görünüm elde edilebilir.

<TabItem Header="Sekme 1">
<Grid Height="67">
<Label Content="Adınız:" Margin="49,3,0,0" HorizontalAlignment="Left" Width="57" />
<TextBox Margin="109,5,59,0" Name="textBox1" VerticalAlignment="Top" />
<Button Margin="58,34,61,0" Name="button1" Height="25" VerticalAlignment="Top">Gönder</Button>
</Grid>
</TabItem>

Bu son örnekle beraber XAML'deki yerleşim kontrollerini incelemeyi bitirdik. Bundan sonraki makalelerimizde sık sık bu kontrolleri kullanarak uygulama geliştireceğimiz için pratik faslını o makalelere bırakıyorum. Bir sonraki makalede görüşmek üzere.