Silverlight 2.0 GridSplitter Kullanımı

XiLoNeN · 26-05-2008, 01:45

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.

HTML-Kodu:

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

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.

HTML-Kodu:

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

HTML-Kodu:

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

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.

HTML-Kodu:

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 [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] ile sunucu tarafına yapabileceğiniz gibi doğruda [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] 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.

HTML-Kodu:

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

Kaynak: [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]