Makale Özeti

Merhaba arkadaşlar, bu makalemizde silverlight uygulamalarında kullanılan Layout kontrollerini (StackPanel, Grid, Canvas) inceliyor olacağız. Layout kontrolleri silverlight uygulamalarında yer alacak kontrollerimizin uygulama üzerinde nerede, nasıl duracağını ve bu kontrollerin ekranda nasıl gösterileceğini belirleyen kontrollerdir. Bu kontroller kullanıcının tarayıcısına göre yeniden boyutlandırılabilir yada sabit bir şekilde tarayıcı üzerinde gösterilebilirler. Yine aynı şekilde layout kontrolleri içerisinde yer alan diğer kontroller de içinde bulunduğu kontrole göre boyutlandırılabilir yada sabit bir şekilde gösterilebilirler. Silverlight içerisinde kullanabileceğimiz 3 adet layout kontrolü var, StackPanel, Grid ve Canvas kontrolleri.

Makale

Layout Kontrolü Nedir?

Layout kontrolleri silverlight uygulamalarında yer alacak kontrollerimizin uygulama üzerinde nerede,  nasıl duracağını ve bu kontrollerin ekranda nasıl gösterileceğini belirleyen kontrollerdir.  Bu kontroller kullanıcının tarayıcısına göre yeniden boyutlandırılabilir yada sabit bir şekilde tarayıcı üzerinde gösterilebilirler. Yine aynı şekilde layout kontrolleri içerisinde yer alan diğer kontroller de içinde bulunduğu kontrole göre boyutlandırılabilir yada sabit bir şekilde gösterilebilirler. Silverlight içerisinde kullanabileceğimiz 3 adet layout kontrolü var, StackPanel, Grid ve Canvas kontrolleri.

Bu üç kontrol de abstract bir sınıf olan Panel sınıfından türemişlerdir. İstersek Panel sınıfını inherit ederek kendi panel kontrolümüzü de yazabiliriz.

public class 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 istediğimiz 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 istendiğinde tercih edilir. Örneğin bir sayfalama kontrolü yapmak istediğimiz de stack panel içersinde butonlar atarak bu butonların stack panel içerisinde yan yana sıralanmasını sağlayabiliriz. (Yan yana dedik ama StackPanel içerisindeki kontrolleri alt alta da dizebiliriz) StackPanel’in Orientation  özelliğini değiştirerek içerisinde yer alan kontrollerin dikey ya da yatay olarak dizilmesini sağlayabiliriz.

Orientation özelliği vertical ve horizontal değerleri alabilmektedir.

Örneğin

Oluşturduğumuz 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">
<StackPanel Background="#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 olmasındandır.

Aşağıdaki gibi bir kullanım geçersizdir.

Grid

Grid kontrolü HTML’de kullandığımız tablo yapısına benzer fakat etiket yapısı farklıdır. Grid içerisinde sütunlar ve satırlar oluşturup içerisine diğer kontrolleri yerleştirebiliriz. Grid kontrolü bağlı bulunduğu UserControl’e göre hareket edebilirlerken istersek sabit genişlikte de verilebilir.

XAML koduna bakacak olursak…

<Grid x:Name="LayoutRoot" Background="White">
      <Grid.RowDefinitions>
            <RowDefinition Height="0.223*"/> // Sabit değer yerine Auto vererek yüksekliğin otomatik olarak değiştirilmesini sağlayabiliriz.
            <RowDefinition Height="0.777*"/>
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.245*"/>
            <ColumnDefinition Width="0.755*"/> // Sabit değer yerine Auto vererek genişliğin otomatik olarak değiştirilmesini sağlayabiliriz.
      </Grid.ColumnDefinitions>
      <Rectangle Fill="#FF9C0000" Stroke="#FF000000" Grid.Column="0" Grid.Row="0"/>
    </Grid>

Grid nesnesinin 0 Index numaralı Kolonuna ve 0 Index numaralı Satırına bir Rectangle nesnesi ekledik. Rectangle nesnesinin özelliklerini aşağıdaki gibi değiştirdiğimizde rectangle nesnesinin yerinin değiştiğini görebiliriz.

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

 

Canvas

Canvas kontrolü HTML’deki DIV’in position absolute haline benzer yapıda 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 pozisyonyanldırılır.  Canvas kontrolünün boyutu değiştiğinde içerisinde yer alan kontrollerin boyutu değişmez.

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

Yukarıdaki örnekte Canvas kontrolü içerisinde bir rectangle nesesi yerleştirdik. Rectangle nesnesi 25px soldan 35px üstten Canvas’ın sol üst merkezinden uzaklaşmış durumda. Canvasın boyutunu değiştirirsek rectangle nesnesinin yerinin değişmediğini görebiliriz.

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

StackPanel ve Grid içerisine yerleştirilen bir nesne istenirse içerisinde bulunduğu nesnenin boyutlarına göre boyutlandırılabilir. Fakat bu durum Canvas için geçerli değildir. Canvas içerisinde yer alan bir nesne her zaman Canvasın Left ve top adındaki dependency özelliklerine göre yerleştirilir, boyutu değişmez.

Bu makalenin sonuna geldik, başka bir makalede görüşmek dileğiyle. .NET ve Silverlight ile kalın ;)

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

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