Silverlight 2.0 Beta 2 ile gelen DataGrid yenilikleri

0 dakikada yazıldı

6897 defa okundu

Düzenle

Silverlight 2.0 Beta 1 ile beraber gelen DataGrid kontrolünün ana
yapılarını daha
önce
incelemiştik. Bu yazımızda da Silverlight 2.0 Beta 2 ile beraber
gelen DataGrid yeniliklerine göz atacağız.

Sıralama İşlemleri

Maalesef Silverlight 2.0 Beta 1 ile beraber gelen DataGrid içerisinde
herhangi bir otomatik sıralama yapısı gelmiyordu. Oysa çoğu ASP.NET'teki
GridView'den de alışık olduğumuz üzere bazı durumlarda kolonların en üst
başlık kısımlarını tıklanabilir hale getirerek kolon içerisindeki veriye
göre satırları sıralatabiliyor olmak çok önemli bir işlevsellik. Artık
Silverlight 2.0 Beta 2 ile beraber gelen DataGrid içerisinde bu özelliği
sağlayan hazır bir yapı var.

Peki neler yapmamız gerekiyor? Aslında yapmanız gereken neredeyse hiçbir
şey yok. IList sınıfından türetilmiş herhangi bir listeyi DataGrid'e
bağladığınızda sıralama (sorting) işlemleri otomatik olarak
yapılabilecektir. Zaten baktığımızda DataGrid'lerimizi bu yapıyı
destekleyen List veya ObservableCollection listeleri bağlıyoruz.

Normal şartlarda listeleme için kullanılan veri tıklanan kolona bağlı
olan ve DisplayMemberBinding'de gözüken veri kaynağı oluyor. Oysa
bazı durumlarda bu senaryo da düzgün çalışmayacaktır. Örneğin normal
kolonlar yerine bir TemplateColumn kullanıyorsanız DisplayMember
olmadığı için sıralama işlemi de yapılamayacaktır. Bu gibi durumlarda
kolonun görsel kısmından bağımsız olarak SortMemberPath özelliğini
ayarlayarak kolonda ne gözükürse gözüksün arka planda sıralama işleminin
farklı bir kolona veya veriye göre yapılmasını sağlayabilirsiniz.

Görsel Değişiklikler

Özellikle listeleme işlemini yaptığınız kolonların başlıklarında oklar
meydana gelecektir. Bu okların tasarımından tutun, meydana gelme
animasyonlarına kadar her şeyi tek tek değiştirebilirsiniz. Bunun için
MSDN'den aşağıdaki adresi incelemeniz yeterli olacaktır.

http://msdn.microsoft.com/tr-tr/library/cc278066(en-us,vs.95).aspx

Bu adreste hali hazırda DataGrid içerisinde kullanılan tüm kaynakların,
stillerin ve animasyonların kodları bulunuyor. Bunları alıp özelleştirip
rahatlıkla uygulamanıza ekleyebilirsiniz. Örneğin aşağıda sadece
kolonların başlıklarına ait kısımların özelleştirildiği bir XAML kodunu
inceleyebilirsiniz. Satır arası yorumlarıma özellikle dikkat etmenizde
fayda var.

<UserControl
xmlns:my="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

            x:Class="SilverlightApplication5.Page"

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

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

            Width="400"

            Height="300">

    <UserControl.Resources>

        <Style
x:Key="KolonBasi"
TargetType="local:DataGridColumnHeader"

              xmlns:local="clr-namespace:System.Windows.Controls;

             
assembly=System.Windows.Controls.Data
"

              xmlns:controls="clr-namespace:System.Windows.Controls;

             
assembly=System.Windows
">

 

            <Setter
Property="SeparatorBrush">

                <Setter.Value>

                    <SolidColorBrush Color="#FFA4A4A4"
/>

                </Setter.Value>

            </Setter>

            <Setter
Property="SeparatorVisibility"

                    Value="Visible"
/>

            <Setter
Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="local:DataGridColumnHeader">

                      <!-- Gridi boyayan Gradient. -->

                        <Grid
Name="RootElement">

                            <Grid.Background>

                               
<
LinearGradientBrush StartPoint="0.276463,-0.00385181"

                                             
     
EndPoint="0.276463,0.71">

                                   
<
GradientStop Color="#FFF9FAFA"

                                             
   
Offset="0" />

                                   
<
GradientStop Name="StopColor2"

                                             
   
Color="#FFEDF1F4"

                                             
   
Offset="0.37259"
/>

                                   
<
GradientStop Name="StopColor3"

                                             
   
Color="#FFE2E8EF"

                                             
   
Offset="0.372881"
/>

                                   
<
GradientStop Name="StopColor4"

                                             
   
Color="#FFC3C9CD"

                                             
   
Offset="1" />

                               
</
LinearGradientBrush>

                            </Grid.Background>

 

                            <Grid.Resources>

                             
<!--
Normal duruma getirme
animasyonu.
-->

                               
<
Storyboard x:Key="Normal
State
">

                                   
<
ColorAnimation Storyboard.TargetName="StopColor2"

                                             
     
Storyboard.TargetProperty="(Color)"

                                             
     
Duration="00:00:0.3"

                                             
     
To="#FFEDF1F4"
/>

                                   
<
ColorAnimation Storyboard.TargetName="StopColor3"

                                             
     
Storyboard.TargetProperty="(Color)"

                                             
     
Duration="00:00:0.3"

                                             
     
To="#FFE2E8EF"
/>

                                   
<
ColorAnimation Storyboard.TargetName="StopColor4"

                                             
     
Storyboard.TargetProperty="(Color)"

                                             
     
Duration="00:00:0.3"

                                             
     
To="#FFC3C9CD"
/>

                               
</
Storyboard>

                             
<!--
Fare üzerine gelince çalışan
animasyon.
-->

                               
<
Storyboard x:Key="MouseOver
State
">

                                   
<
ColorAnimation Storyboard.TargetName="StopColor2"

                                             
     
Storyboard.TargetProperty="(Color)"

                                             
     
Duration="00:00:0.3"

                                             
     
To="#FFE6EFF7"
/>

                                   
<
ColorAnimation Storyboard.TargetName="StopColor3"

                                             
     
Storyboard.TargetProperty="(Color)"

                                             
     
Duration="00:00:0.3"

                                             
     
To="#FFD3E4F5"
/>

                                   
<
ColorAnimation Storyboard.TargetName="StopColor4"

                                             
     
Storyboard.TargetProperty="(Color)"

                                             
     
Duration="00:00:0.3"

                                             
     
To="#FF87A5BA"
/>

                               
</
Storyboard>

                             
<!--
Sıralama bozulduğunda
gösterilen animasyon.
-->

                               
<
Storyboard x:Key="Unsorted
State
">

                                   
<
DoubleAnimation Storyboard.TargetName="SortIconElement"

                                             
     
Storyboard.TargetProperty="Opacity"

                                             
     
Duration="00:00:0.3"

                                             
     
To="0.0" />

                                   
<
DoubleAnimation Storyboard.TargetName="SortIconTransform"

                                             
     
Storyboard.TargetProperty="ScaleY"

                                             
     
BeginTime="00:00:0.3"

                                             
     
Duration="00:00:0.0"

                                             
     
To="1" />

                               
</
Storyboard>

                             
<!--
Sıralama anındaki animasyon
-->

                               
<
Storyboard x:Key="SortedAscending
State
">

                                   
<
DoubleAnimation Storyboard.TargetName="SortIconElement"

                                             
     
Storyboard.TargetProperty="Opacity"

                                             
     
Duration="00:00:0.3"

                                             
     
To="1.0" />

                                   
<
DoubleAnimation Storyboard.TargetName="SortIconTransform"

                                             
     
Storyboard.TargetProperty="ScaleY"

                                             
     
Duration="00:00:0.3"

                                             
     
To="-1" />

                               
</
Storyboard>

                             
<!--
Sıralama anındaki animasyon
-->

                               
<
Storyboard x:Key="SortedDescending State">

                                   
<
DoubleAnimation Storyboard.TargetName="SortIconElement"

                                             
     
Storyboard.TargetProperty="Opacity"

                                             
     
Duration="00:00:0.3"

                                             
     
To="1.0" />

                                   
<
DoubleAnimation Storyboard.TargetName="SortIconTransform"

                                             
     
Storyboard.TargetProperty="ScaleY"

                                             
     
Duration="00:00:0.3"

                                             
     
To="1" />

                               
</
Storyboard>

                            </Grid.Resources>

 

                            <Grid.RowDefinitions>

                               
<
RowDefinition Height="*" />

                               
<
RowDefinition Height="*" />

                               
<
RowDefinition Height="Auto" />

                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions>

                               
<
ColumnDefinition Width="*" />

                               
<
ColumnDefinition Width="Auto" />

                               
<
ColumnDefinition Width="Auto" />

                            </Grid.ColumnDefinitions>

 

                            <Rectangle
Stretch="Fill"

                                     
StrokeThickness="2"

                                     
Stroke="#FFFFFFFF"

                                     
Grid.ColumnSpan="2"

                                     
Grid.RowSpan="2" />

                            <Rectangle
Grid.Row="2"

                                     
Grid.ColumnSpan="3"

                                     
Height="1"

                                     
HorizontalAlignment="Stretch"

                                     
Fill="#FFA4A4A4"
/>

                            <Rectangle
Grid.RowSpan="2"

                                     
Grid.Column="2"

                                     
Width="1"

                                     
VerticalAlignment="Stretch"

                                     
Fill="{TemplateBinding SeparatorBrush}"

                                     
Visibility="{TemplateBinding SeparatorVisibility}" />

                          <!-- Kolonun için kolon adı buraya yazılıyor Bind
edilmiş
-->

                            <controls:ContentPresenter Margin="3,0,3,0"

                                             
       
Content="{TemplateBinding Content}"

                                             
       
VerticalAlignment="Center"
/>

                          <!-- Sıralam oku görseli burada -->

                            <Path
Name="SortIconElement"

                                 
Margin="3,0,3,0"

                                 
Opacity="0"

                                 
Grid.Column="1"

                                 
Stretch="Uniform"

                                 
Width="8"

                                 
Data="F1
M -5.215,0.0L 5.215,0.0L 0,6.099L -5.215,0.0 Z
">

                               
<
Path.Fill>

                                   
<
SolidColorBrush Color="#FF313131"
/>

                               
</
Path.Fill>

                               
<
Path.RenderTransform>

                                   
<
ScaleTransform Name="SortIconTransform"

                                             
     
CenterX="4"

                                             
     
CenterY="2.5"

                                             
     
ScaleX="1"

                                             
     
ScaleY="1" />

                               
</
Path.RenderTransform>

                            </Path>

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

 

    </UserControl.Resources>

    <Grid
x:Name="LayoutRoot"

          Background="White">

        <!-- Stilimizi gride bağladık. -->

        <my:DataGrid
x:Name="Veri"

                    ColumnHeaderStyle="{StaticResource
KolonBasi}
"

                    AutoGenerateColumns="False"

                    AlternatingRowBackground="#FFFFFF00"

                    HorizontalGridlinesBrush="#FFD4FF00"

                    RowBackground="#FFE3E3E3">

            <my:DataGrid.Columns>

                <my:DataGridTextColumn Header="Adi"

                                     
DisplayMemberBinding="{Binding
Adi}
" />

            </my:DataGrid.Columns>

        </my:DataGrid>

    </Grid>

</UserControl>

Otomatik boyutlandırma

Yeni bir Silverlight uygulaması yarattığınızda sahnede yer alan
LayoutRoot aslında bir Grid nesnesidir. Silverlight 2.0 Beta 1'den
farklı olarak Beta 2 ile beraber gelen DataGrid'in kendi içerisindeki
veriye göre kendini otomatik boyutlandırma şansı var. Varsayılan
ayarları ilebir DataGrid yarattığınızda bu özellik açık geliyor. Tabi
DataGrid'in istediği kadar büyüyebilmesi için uygun kontroller içerisine
yerleştirilerek herhangi bir şekilde boyutlarının sınırlandırılmamış
olması gerekiyor. Programatik olarak bir nesnenin yükseklik veya
genişliğini otomatik olarak ayarlamak istiyorsanız Double.NaN 'a eşitlemeniz yeterli olacaktır.

DataGrid'in genişliğini otomatik olarak ayarlamanın yanı sıra artık
kolonlar da içlerindeki veriye göre otomatik olarak
boyutlandırılabiliyorlar. Bu boyutlandırma için ise 4 farklı teknik
kullanılabiliyor. Birincisi "Auto" değerini vererek işlemi tamamen
otomatiğe bırakmak, ikincisi SizeToHeader diyerek kolonun kendi
başlığı kadar genişleyebilmesini sağlamak, üçüncüsü SizeToCells
diyerek kolonun başlığından bağımsız olarak içeriğindeki veri kadar
genişlemesini sağlamak ve dördüncüsü de doğrudan sayısal bir değer
vererek kolonun genişliğini ayarlamak. Aşağıda örnek bir kullanımı
görebilirsiniz.

<my:DataGrid
x:Name="Veri"

            ColumnHeaderStyle="{StaticResource
KolonBasi}
"

            AutoGenerateColumns="False"

            AlternatingRowBackground="#FFFFFF00"

            HorizontalGridlinesBrush="#FFD4FF00"

            RowBackground="#FFE3E3E3">

  <my:DataGrid.Columns>

    <my:DataGridTextColumn
Width
="SizeToHeader"

                          Header="Adi"

                          DisplayMemberBinding="{Binding
Adi}
" />

  </my:DataGrid.Columns>

</my:DataGrid>

Aynı işlemi kod ile yaptığınızda ise doğrudan DataGridLength sınıfı
üzerinden gerekli seçeneklere ulaşabiliyorsunuz. Sayısal bir değer
atayarak kolonun genişliğini sabitlemek istediğinizde ise maalesef sizi
ufak bir sorun bekliyor. Kolon genişliğini DataGridLength olarak
atamanız lazım, integer veya double kesinlikle kabul edilmiyor.
Bu durumda yardımımıza DataGridLengthConverter adında bir sınıf
yetişiyor.

[VB]

kolon.Width = (New
DataGridLengthConverter).ConvertFrom(50)

[C#]

kolon.Width = (DataGridLength)(new
DataGridLengthConverter()).ConvertFrom(100);

DataGridLengthConverter sınıfındaki ConvertFrom metodu ile elimizdeki
herhangi bir değişkenden DataGridLenght yaratarak kolonlarımızın
genişliğini kod tarafından da düzenleyebiliyoruz.

Hepinize kolay gelsin.