Silverlight 2.0 GridSplitter Kullanımı

0 dakikada yazıldı

6748 defa okundu

Düzenle

Silverlight 2.0 içerisinde Grid kullanımı HTML içerisinden alışık
olduğumuz Table yapısından pek farklı değil. Kolonlar ve satırlar
yaratarak görsel öğeleri ekranda konumlandırabilmenizi sağlayan Grid
kontrolü ile beraber kullanabileceğimiz kontrollerden biri de
GridSplitter kontrolü. GridSplitter kontrolü bir Gridin kolon veya
satırlarının kullanıcı tarafından fare ile boyutlandırılabilmesini
sağlıyor. Herhangi bir Grid yaratarak satır veya sütunlar oluşturduktan
sonra istediğiniz Grid hücresine GridSplitter kontrolü
yerleştirebiliyorsunuz.

<UserControl
x:Class="GridSplit.Page"

    xmlns="http://schemas.microsoft.com/client/2007"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Width="400" Height="300">

  <Grid
x:Name="LayoutRoot"
Background="White">

    <Grid.ColumnDefinitions>

      <ColumnDefinition Width="0.435*"/>

      <ColumnDefinition Width="0.07*"/>

      <ColumnDefinition Width="0.495*"/>

    </Grid.ColumnDefinitions>

    <GridSplitter
Height="Auto"
VerticalAlignment="Stretch"
Grid.Column="1"
Background="#FF0092FF"
Width="10" HorizontalAlignment="Center"/>

  </Grid>

</UserControl>

Yukarıdaki XAML kodunda yer alan Grid'in toplam üç kolonu var. Bu
kolonlardan birinin içerisinde gözükecek şekilde bir de GridSplitter
nesnesi yerleştirilmiş. GridSplitter nesnesinin Grid.Column özelliği
1 olduğu için içerisinde bulunduğu Grid'in 1 Index numaralı kolonunda
gözükecek.

GridSplitter kontrolü 2 resmi boyutlandırıyor.
GridSplitter kontrolü 2 resmi boyutlandırıyor.

Yukarıdaki gibi bir örnek elde etmek için Grid'in diğer kolonlarına
birer Image nesnesi yerleştirdim. GridSplitter kontrolünü fare ile tutup
sürüklediğimde her iki resim de içerisinde bulundukları kolonlara
sığacak şekilde kendilerini boyutlandırdılar.

<UserControl
x:Class="GridSplit.Page"

    xmlns="http://schemas.microsoft.com/client/2007"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Width="400" Height="300">

  <Grid
x:Name="LayoutRoot"
Background="White">

    <Grid.ColumnDefinitions>

      <ColumnDefinition Width="0.435*"/>

      <ColumnDefinition
Width
="Auto"/>

      <ColumnDefinition Width="0.495*"/>

    </Grid.ColumnDefinitions>

    <GridSplitter
Height="Auto"
VerticalAlignment="Stretch"
Grid.Column="1" Background="#FF0092FF"
Width="10" HorizontalAlignment="Center"/>

    <Image
Source="Creek.jpg"/>

    <Image
Grid.Column="2" Source="Dock.jpg"/>

  </Grid>

</UserControl>

Yukarıdaki kod içerisinde dikkat etmemiz gereken nokta GridSplitter
kontrolünü yerleştirdiğimiz Grid kolonunun Width özelliğinin
Auto olması, böylece GridSplitter'ın genişliği ne ise söz konusu
kolonun genişliği de o olacaktır.

GridSplitter kontrolünü yukarıdaki taktikleri izleyerek sadece dikey
olarak ekranı bölmek için değil yatay olarak Grid'in satırları arasında
da kullanabilirsiniz. Ayrıca birden çok Grid kontrolünü iç içe
kullanarak farklı ekranlar yaratmak da mümkün.

<UserControl
x:Class="GridSplit.Page"

    xmlns="http://schemas.microsoft.com/client/2007"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Width="400" Height="300">

  <Grid
x:Name="LayoutRoot"
Background="White">

    <Grid.RowDefinitions>

      <RowDefinition
Height="0.72*"/>

      <RowDefinition
Height="Auto"/>

      <RowDefinition
Height="0.237*"/>

    </Grid.RowDefinitions>

    <Grid>

      <Grid.ColumnDefinitions>

        <ColumnDefinition Width="0.435*"/>

        <ColumnDefinition Width="Auto"/>

        <ColumnDefinition Width="0.538*"/>

      </Grid.ColumnDefinitions>

      <GridSplitter
HorizontalAlignment="Center"
Width="10" Grid.Column="1" Background="#FF5EFF00"/>

      <Image
Source="Creek.jpg"
Stretch="Uniform"/>

      <Image
Grid.Column="2" Source="Dock.jpg"/>

    </Grid>

    <GridSplitter
HorizontalAlignment="Stretch"
Width="Auto"
Grid.Row="1" VerticalAlignment="Center"
Height="10" Background="#FF0092FF"/>

    <Image
Grid.Row="2" Source="Garden.jpg"/>

  </Grid>

</UserControl>

Yukarıdaki örnekte toplamda üç satırı bulunan bir Grid kontrolünün
ikinci satırında GridSplitter bulunuyor. Aynı Grid'in birinci
satırında ise içerisinde üç kolun bulunan ayrı bir Grid var. İçteki bu
Grid'in de ikinci kolonunda bir GridSplitter var. Böylece yatay
GridSplitter kullanıldığında dikey olan ve iç Grid'de bulunan
GridSplitter da otomatik olarak boyutlandırılmış oluyor.

2 Grid ve 2 GridSplitter'ın kardeşliği.
2 Grid ve 2 GridSplitter'ın kardeşliği.

Bu gibi arayüzler neredeyse çoğu yazılımda karşımıza çıkan sistemler
içerisinde. Silverlight 2.0 ile beraber iş uygulamaları geliştirirken bu
tarz kolaylıkların büyük bir iş yükünü omuzlarımızdan kaldıracağı kesin.

GridSplitter değişiklikleri algılamak?

GridSplitter'ı kullanmak gerçekten çok kolay. Fakat istemci tarafında
kullanıcı tüm GridSplitter'ları ayarladıktan sonra Silverlight
uygulamasını başka bir zamanda tekrar açtığında tüm ayarları tekrar
yapmak zorunda kalması hiç hoş olmaz. O nedenle GridSplitter ile yapılan
ayarları bir şekilde saklamamız gerek.

Aslında GridSplitter'ın yaptığı işlem içerisinde bulunduğu Grid'in
kolonlarının boyutlarını değiştirmek öte değil. Bu durumda bizim Grid'in
kolonlarında değişiklik olup olmadığı yakalamamız ve söz konusu
değişiklikleri kaydetmemiz gerekiyor.

Private Sub IcGrid_LayoutUpdated(ByVal sender As Object,
ByVal e As System.EventArgs) Handles IcGrid.LayoutUpdated

    Metin.Text = IcGrid.ColumnDefinitions(0).Width.ToString

End Sub

Herhangi bir Grid'in LayoutUpdated metodunu yakaladığınızda aslında
Grid'in görselliğindeki tüm boyut değişikliklerini de yakalamış
oluyorsunuz. GridSplitter Grid'in kolonlarının boyutunu değiştirdikçe
LaoutUpdated metodu çalıştırılacaktır. Bizim yapacağımız da basit bir
şekilde IcGrid adını verdiğimiz Grid'in sıfırcı kolonunun
genişliğini alarak kaydetmek. Kaydetme işlemini bir web
servisi

ile sunucu tarafına yapabileceğiniz gibi doğruda Isolated
Storage

kullanarak istemci tarafında da saklayabilirsiniz. Ben örnek içerisinde
söz konusu değeri Metin adındaki bir TextBlock içerisine
yazdırdım.

Kaydettiğiniz genişlik ve yükselik değerlerini Silverlight uygulaması
tekrar açıldığında görsel arayüze uygulamak ise çok daha kolay.

Private Sub Page_Loaded(ByVal sender As Object,
ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded

    IcGrid.ColumnDefinitions(0).Width = New System.Windows.GridLength(100)

End Sub

İstediğimiz herhangi bir Grid'in kolonunu yakalayarak Width özelliğini
değiştirebiliyoruz.

Hepinize kolay gelsin ;)