Silverlight Layout Kontrolleri

Merhaba arkadaslar, bu makalemizde silverlight uygulamalarinda kullanilan Layout kontrollerini (StackPanel, Grid, Canvas) inceliyor olacagiz.

Layout Kontrolü Nedir?

Layout kontrolleri silverlight uygulamalarinda yer alacak kontrollerimizin uygulama üzerinde nerede,  nasil duracagini ve bu kontrollerin ekranda nasil gösterilecegini belirleyen kontrollerdir.  Bu kontroller kullanicinin tarayicisina göre yeniden boyutlandirilabilir yada sabit bir sekilde tarayici üzerinde gösterilebilirler. Yine ayni sekilde layout kontrolleri içerisinde yer alan diger kontroller de içinde bulundugu kontrole göre boyutlandirilabilir yada sabit bir sekilde gösterilebilirler. Silverlight içerisinde kullanabilecegimiz 3 adet layout kontrolü var, StackPanel, Grid ve Canvas kontrolleri.

Bu üç kontrol de abstract bir sinif olan Panel sinifindan türemislerdir. Istersek Panel sinifini inherit ederek kendi panel kontrolümüzü de yazabiliriz.

publicclass StackPanel : Panel
public class Grid : Panel
public class Canvas : Panel

Üç layout kontrolüde UIElementCollection tipinde Children isimli bir koleksiyona sahiptirler. Bu sayede  bu koleksiyonun içerisine istedigimiz kadar UIElement tipinde kontrol ekleyebiliriz.

StackPanel stackpanel = new StackPanel();
Grid grid = new Grid();
Canvas canvas = new Canvas();
stackpanel.Children.Add(grid);
grid.Children.Add(canvas);
canvas.Children.Add(UIElementControl);

StackPanel

StackPanel genel olarak  içerisinde yer alacak kontrollerin belli bir düzende(dikey,yatay) dizilmesi istendiginde tercih edilir. Örnegin bir sayfalama kontrolü yapmak istedigimiz de stack panel içersinde butonlar atarak bu butonlarin stack panel içerisinde yan yana siralanmasini saglayabiliriz. (Yan yana dedik ama StackPanel içerisindeki kontrolleri alt alta da dizebiliriz) StackPanel’in Orientation  özelligini degistirerek içerisinde yer alan kontrollerin dikey ya da yatay olarak dizilmesini saglayabiliriz.

Orientation özelligi vertical ve horizontal degerleri alabilmektedir.

Örnegin

Olusturdugumuz XAML kodunu inceleyecek olursak,

<UserControl x:Class="_00_MerhabaSilverlight.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="518" Height="50" Background="#FFF41313" x:Name="UserControl" HorizontalAlignment="Right">
<StackPanelBackground="#FFFFFFFF" Orientation="Horizontal">
<Button Content="1"/>
<Button Content="2" RenderTransformOrigin="2.977,0.5"/>
<Button Content="3"/>
<Button Content="4"/>
<Button Content="5"/>
<Button Content="Sonraki &gt;&gt;"/>
<Button Content="En Son &gt;&gt;"/>
</StackPanel>
</UserControl>

Not: Bir User Control içerisinde sadece bir root elementi bulunabilir.  Bununda nedeni UserControl nesnesi içerisine sadece tek bir content alabiliyor olmasindandir.

Asagidaki gibi bir kullanim geçersizdir.

Grid

Grid kontrolü HTML’de kullandigimiz tablo yapisina benzer fakat etiket yapisi farklidir. Grid içerisinde sütunlar ve satirlar olusturup içerisine diger kontrolleri yerlestirebiliriz. Grid kontrolü bagli bulundugu UserControl’e göre hareket edebilirlerken istersek sabit genislikte de verilebilir.

XAML koduna bakacak olursak…

<Gridx:Name="LayoutRoot"Background="White">
      <Grid.RowDefinitions>
            <RowDefinition Height="0.223*"/> // Sabit deger yerine Auto vererek yüksekligin otomatik olarak degistirilmesini saglayabiliriz.
            <RowDefinition Height="0.777*"/>
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.245*"/>
            <ColumnDefinition Width="0.755*"/> // Sabit deger yerine Auto vererek genisligin otomatik olarak degistirilmesini saglayabiliriz.
      </Grid.ColumnDefinitions>
      <Rectangle Fill="#FF9C0000" Stroke="#FF000000" Grid.Column="0" Grid.Row="0"/>
    </Grid>

Grid nesnesinin 0 Index numarali Kolonuna ve 0 Index numarali Satirina bir Rectangle nesnesi ekledik. Rectangle nesnesinin özelliklerini asagidaki gibi degistirdigimizde rectangle nesnesinin yerinin degistigini görebiliriz.

<Rectangle Fill="#FF9C0000" Stroke="#FF000000" Grid.Column="1" Grid.Row="1"/>

 

Canvas

Canvas kontrolü HTML’deki DIV’in position absolute haline benzer yapida bir layout kontrolüdür. Canvas içerisinde yer alacak kontroller  Canvas.Left and Canvas.Top (üstten ve soldan mesafeleri) özellikleri belirtilerek canvas kontrolü içerisinde pozisyonyanldirilir.  Canvas kontrolünün boyutu degistiginde içerisinde yer alan kontrollerin boyutu degismez.

<Canvas Background="#FF0E0C2E">
<Rectangle Height="200" Width="200" Fill="#FFC1D039" Stroke="#FF000000" Canvas.Top="25" Canvas.Left="35" RadiusX="20" RadiusY="20"/>
</Canvas>

Yukaridaki örnekte Canvas kontrolü içerisinde bir rectangle nesesi yerlestirdik. Rectangle nesnesi 25px soldan 35px üstten Canvas’in sol üst merkezinden uzaklasmis durumda. Canvasin boyutunu degistirirsek rectangle nesnesinin yerinin degismedigini görebiliriz.

<Canvas Background="#FF0E0C2E" Width="600" Height="500">
<RectangleHeight="200" Width="200" Fill="#FFC1D039" Stroke="#FF000000" Canvas.Top="25" Canvas.Left="35" RadiusX="20" RadiusY="20"/></Canvas>

StackPanel ve Grid içerisine yerlestirilen bir nesne istenirse içerisinde bulundugu nesnenin boyutlarina göre boyutlandirilabilir. Fakat bu durum Canvas için geçerli degildir. Canvas içerisinde yer alan bir nesne her zaman Canvasin Left ve top adindaki dependency özelliklerine göre yerlestirilir, boyutu degismez.

Bu makalenin sonuna geldik, baska bir makalede görüsmek dilegiyle. .NET ve Silverlight ile kalin ;)

Sem GÖKSU
www.semgoksu.com | www.yazilimgunlugu.com
sem.goksu@yazilimgunlugu.com

Kaynaklar
msdn.com
silverlight.net
daron.yondem.com