DataGrid kontrolü belki de iş uygulamalarında en sık kullanılan kontrollerden
biridir. Silverlight içerisinde de uzun bir süredir DataGrid kontrolü bulunuyor.
Özellikle performans artıları ve esnekliği ile aslında Silverlight ile beraber
gelen DataGrid emin olun üçüncü parti bir DataGrid almanızı gerektirmeyecek
kadar kuvvetli. Daha da güzel bu DataGrid'in kaynak kodları da CodePlex
üzerindeki
Silverlight Toolkit içerisinde bulunuyor. Hatırlarsanız çok önceleri
DataPager kontrolünden bahsederken PagedCollectionView
adında bir sınıftan bahsetmiştim. Söz konusu sınıf aslında bir DataGrid
kontrolünün gruplama özelliğini de ortaya çıkarak ilginç bir yapıya sahip. Bu
yazımızda ilk olarak DataGrid'in gruplama özelliğinin kullanımına değineceğiz.
Sonrasında da bu gruplama özelliğini daha da özelleştirmeye çalışacağız.
DataGrid ile gruplama....
DataGrid kontrolü aslında kendi içerisinde gruplama sistemini barındırıyor.
Tek yapmanız gereken gruplama desteğine sahip ve gerekli ayarları yapılmış bir PagedCollectionView
kullanmak. Şimdi elimizde hali hazırda bir DataGrid olduğunu düşünelim ayrıca
bir de entitylerimizden oluşan listemiz var.
[XAML / DataGrid]
<Grid x:Name="LayoutRoot" Background="White">
<sdk:DataGrid HorizontalAlignment="Stretch" Name="DataGrid1" VerticalAlignment="Stretch" />
</Grid>
[VB]
Public Class OrnekEntity
Public Property Adam As String
Public Property Sehir As String
Public Property Ilce As String
End Class
Private Sub MainPage_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
Dim EldekiListe As New List(Of OrnekEntity)
For index = 1 To 10
EldekiListe.Add(New OrnekEntity With {.Adam = "Örnek Adam" & index,
.Ilce = "İlçe" & (index Mod 2).ToString(),
.Sehir = "Şehir" & (index Mod 5).ToString()})
Next
End Sub
Bu listeyi hemen aşağıdaki gibi bir
PagedCollectionView'e çevirebiliriz.
[VB]
Dim Paged = New PagedCollectionView(EldekiListe)
Paged.GroupDescriptions.Add(New PropertyGroupDescription("Sehir"))
Paged.GroupDescriptions.Add(New PropertyGroupDescription("Ilce"))
DataGrid1.ItemsSource = Paged
Kodumuz olabildiğince kısa ve basit. Paged adındaki PagedCollectionView bir
liste üzerinden yaratılıyor. Liste içerisindeki entitynin property'lerinin
ikisinin adı Sehir ve Ilce şeklinde. İşte tam
da bu noktada eldeki listenin söz konusu property'lerin değerlerine göre
gruplanmasına gerektiğine dair bilgiyi PagedCollectionView'a
iletiyoruz. Bunun için bir PropertyGroupDescription yaratarak
parametre olarak olası property'lerin adlarını String
olarakveriyoruz ve PropertyGroupDescription'ları da
PagedCollectionView'ın GroupDescriptions listesine ekliyoruz.
Son olarak eldeki PGD'yi de gride aktarıyoruz gösterilmek üzere. Gördüğünüz
üzere aslında herşey yeterince basit.
DataGrid'den Grouping Desteği
Gördüğünüz üzere iç içe gruplamalar dahil kolaylıkla güzel bir sistem
oluşturulabiliyor. Bu manzarada hoşunuza gitmeyebilecek ilk şey gruplama için
kullanılan bilgilerin DataGrid içerisinde de kolonlarda gösteriliyor olması. Bu
sorunu çözmek çok kolay. Eğer DataGrid'in AutoGenerateColumns özelliği False
yapar ve kolonları siz belirlerseniz istediğiniz property'lerin kolon olarak
gösterilmemesini sağlayabilirsiniz. Söz konusu Property'lerdeki değerler sadece
gruplama amaçlı kullanılabilir.
Aslında bu manzarada en sinir bozucu şeylerden biri her grubun başında "1
item", "2 item" gibi İngilizce birşeylerin yazılı olması ve maalesef bunu
değiştiremiyor olmanız. Tabi yazımızın başında da bahsettiğimiz gibi kontrolün
kaynak kodları veriliyor ve rahatlıkla o seviyede gerekli değişiklikler
yapılabilir fakat SDK dışına çıkmak istemeynler ve sürekli her yeni sürümü
çıktığında DataGrid assemblysini özelleştirmek zorunda kalmak istemeyenler için
daha pratik bir yol olmalı değil mi? Çok pratik olmasa da sizlerle bir taktik
paylaşacağım. Bu taktik ile gruplama için DataGrid içerisindeki kullanılan
yapıyı tamamen değiştirebileceksiniz.
Ne de olsa herşey Silverlight değil mi?
DataGrid'in gruplama esnasında kullandığı görsel yapıyı ilk gördüğümde. "Ne
de olsa herşey Silverlight değil mi burada?" demiştim. Bir şekilde oradaki
yapıya ulaşabilmem ve değiştirebilmem gerekirdi. Fakat maalesef ki DataGrid
kontrolü geliştirilirken bu pek de düşünülmemiş ve son developer (son
kullanıcıdan yola çıkıp ürettiğim bir terim) pek düşünülmemiş. O nedenle biraz
takla atmak gerekecek.
İlk olarak yapılması gereken şey kontrolün kaynak kodlarını inceleyerek hali
hazırda DataGrid'in gruplama için kullanılan görsel kısmını bulmak. Böylece söz
konusu görsel kısmı değiştirerek belki de parametrik olarak elimizdeki normal
DataGrid'e verebiliriz? DataGrid'in iç yapısını ve kaynak kodunu incelediğimizde
gruplama
görseli için DataGridRowGroupHeader adında primitive bir
kontrol kullanıldığını görüyoruz. Söz konusu kontrol System.Windows.Controls.Data
assemblysi altında System.Windows.Controls namespace'inde bulunuyor. Bu kontrol
DataGrid'in içerisinde gruplama amaçlı kısımlarda kullanıldığına göre bu
kontrolün görselliğini yani şablonunu (template) değiştirmemiz yeterli
olacaktır. Hatta daha önce de bahsettiğimiz gibi hali hazırda var olan şablonu
alıp kaynak kodlarından rahatlıkla ilerleyebiliriz.
[XAML]
xmlns:dataprimitives="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
Yukarıdaki şekilde kontrolü XAML tarafında tanımlanabilir hale getirdikten
sonra kaynak dosyalarından kontrolün varsayılan şablonuna ait XAML kodunu da
aşağıdaki şekilde alıyoruz.
[XAML]
<ControlTemplate x:Name="Ornek" TargetType="dataprimitives:DataGridRowGroupHeader">
<sdk:DataGridFrozenGrid x:Name="Root" Background="{TemplateBinding Background}">
<sdk:DataGridFrozenGrid.Resources>
<ControlTemplate x:Key="ToggleButtonTemplate" TargetType="ToggleButton">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0" To="#FF6DBDD1" Storyboard.TargetProperty="(Stroke).Color" Storyboard.TargetName="CollapsedArrow"/>
<ColorAnimation Duration="0" To="#FF6DBDD1" Storyboard.TargetProperty="(Fill).Color" Storyboard.TargetName="ExpandedArrow"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Duration="0" To="#FF6DBDD1" Storyboard.TargetProperty="(Stroke).Color" Storyboard.TargetName="CollapsedArrow"/>
<ColorAnimation Duration="0" To="#FF6DBDD1" Storyboard.TargetProperty="(Fill).Color" Storyboard.TargetName="ExpandedArrow"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CollapsedArrow"/>
<DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ExpandedArrow"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked"/>
<VisualState x:Name="Unchecked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="CollapsedArrow">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ExpandedArrow">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Path x:Name="CollapsedArrow" Data="F1 M 0,0 L 0,1 L .6,.5 L 0,0 Z" HorizontalAlignment="Center" Stretch="Uniform" Stroke="#FF414345" Visibility="Collapsed" VerticalAlignment="Center" Width="5"/>
<Path x:Name="ExpandedArrow" Data="F1 M 0,1 L 1,1 L 1,0 L 0,1 Z" Fill="#FF414345" HorizontalAlignment="Center" Stretch="Uniform" VerticalAlignment="Center" Width="6"/>
</Grid>
</ControlTemplate>
</sdk:DataGridFrozenGrid.Resources>
<sdk:DataGridFrozenGrid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</sdk:DataGridFrozenGrid.ColumnDefinitions>
<sdk:DataGridFrozenGrid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</sdk:DataGridFrozenGrid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CurrentStates">
<VisualState x:Name="Regular"/>
<VisualState x:Name="Current">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisual"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle Grid.ColumnSpan="5" Grid.Column="1" Fill="#FFFFFFFF" Height="1"/>
<Rectangle x:Name="IndentSpacer" Grid.Column="1" Grid.Row="1"/>
<ToggleButton x:Name="ExpanderButton" Grid.Column="2" Height="15" IsTabStop="False" Margin="2,0,0,0" Grid.Row="1" Template="{StaticResource ToggleButtonTemplate}" Width="15"/>
<StackPanel Grid.Column="3" Margin="0,1,0,1" Orientation="Horizontal" Grid.Row="1" VerticalAlignment="Center">
<TextBlock x:Name="PropertyNameElement" Margin="4,0,0,0" Visibility="{TemplateBinding PropertyNameVisibility}"/>
<TextBlock Margin="4,0,0,0" Text="{Binding Name}"/>
<TextBlock Loaded="TextBlock_Loaded" Margin="4,0,0,0" DataContext="{Binding}" Text="DENEME"/>
<TextBlock x:Name="ItemCountElement" Margin="4,0,0,0" Visibility="{TemplateBinding ItemCountVisibility}"/>
</StackPanel>
<Rectangle Grid.ColumnSpan="5" Grid.Column="1" Fill="#FFD3D3D3" Height="1" Grid.Row="2"/>
<Rectangle x:Name="FocusVisual" Grid.ColumnSpan="4" Grid.Column="1" HorizontalAlignment="Stretch" IsHitTestVisible="false" Opacity="0" Grid.RowSpan="3" Stroke="#FF6DBDD1" StrokeThickness="1" VerticalAlignment="Stretch"/>
<sdk:DataGridRowHeader x:Name="RowHeader" sdk:DataGridFrozenGrid.IsFrozen="True" Grid.RowSpan="3"/>
</sdk:DataGridFrozenGrid>
</ControlTemplate>
Yukarıdaki kod içerisinde özellikle dikkat edilmesi gereken kısmı renki
bırakmaya çalıştım. Gördüğünüz renkli kod kısmı tam da bizim DataGrid
içerisindeki gruplama kısmını tanımlıyor. Gruplamanın açılıp kapanmasını
sağlayan bir ToggleButton ve gruba ait bilgilerin yazıldığı TextBlock'lar. Ne
kadar doğal değil mi? :) Biz de yapsak böyle yapardık herhalde. Ben kod
içerisinde bir de ekstra TextBlock yerleştirdim. Söz konusu TextBlock'a
DataContext olarak gelen bütün veriyi Bind ettim. Malum diğer kontrollere de
baktığımızda Binding'ler görebiliyoruz. Hatta gruplama yapılan Property'nin
adının yazıldığı TextBlock'un Text'i Name
adında birşeye bind edilmiş. Acaba bu nesne nedir diyerek deneme amaçlı
TextBlock'u koyalım.
Şimdi sıra geldi bu şablonu eldeki sıfır bi DataGrid'in içerisindeki tüm
otomatik yaratılan DataGridRowGroupHeader nesnelerine Template
olarak aktarmaya. Peki bunu nasıl yapacağız?
[VB]
Private Sub DataGrid1_LoadingRowGroup(ByVal sender As Object, ByVal e As System.Windows.Controls.DataGridRowGroupHeaderEventArgs) Handles DataGrid1.LoadingRowGroup
e.RowGroupHeader.Template = Me.Resources("Ornek")
End Sub
Her DataGrid'in zaten LoadingRowGroup adında bir event'i var. Eğer yukarıda
tanımladığımız ControlTemplate'i DataGrid ile aynı sayfada UserControl.Resources
kolleksiyonu içerisine koyarsanız ismi ile resource'u bulup aynı yukarıdaki
şekilde yaratılan her RowGroupHeader'a Template olarak atayabiliriz. Her atama
sonrasında da bizim TextBlock yaratılacağı için kendi Binding'i ile beraber
Loaded eventini çalıştıracaktır. Böylece biz de datayı alıp birşeyler
yapabiliriz.
[VB]
Private Sub TextBlock_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
Dim TXT As TextBlock = sender
Dim x As CollectionViewGroup = CType(sender, TextBlock).DataContext
Dim Subx = x.Items(0)
If TypeOf Subx Is OrnekEntity Then
TXT.Text = Subx.Adam
Else
TXT.Text = CType(Subx.Items(0), OrnekEntity).Adam
End If
End Sub
Textblock'un Loaded eventını yukarıda bulabilirsiniz. Aslında ControlTemplate
içerisine Binding ile gelen nesne bir CollectionViewGroup ve bu
nesne kendi içerisinde hem alt itemlarının sayısını hem de alt itemların bir
kolleksiyonunu saklıyor. Tabi bazen alt item dediğimiz şey bir başka
CollectionViewGroup olabiliyor. O neden gerekli kontrolleri yazarak en
alt item'a kadar gidip istediğimiz bir entity'ye ulaştığımızdan emin olmamız
gerek. Sonrasında artık grubun altındaki herhangi bir Entity'le ulaştığınız
(veya hepsine) artık istediğinizi yapabilirsiniz. Örneğimizde biz sadece grubun
altındaki ilk Entity'nin bir propertysini doğrudan TextBlock'a yazdırıyoruz. Siz
kendi örneklerinizde hem tasarım tarafında XAML'ı istediğiniz gibi
değiştirebilir hem de farklı işlevsellikler ekleyebilirsiniz.
[XAML]
<StackPanel Grid.Column="3" Margin="0,1,0,1" Orientation="Horizontal" Grid.Row="1" VerticalAlignment="Center">
<TextBlock x:Name="PropertyNameElement" Margin="4,0,0,0" Visibility="{TemplateBinding PropertyNameVisibility}"/>
<TextBlock Margin="4,0,0,0" Text="{Binding Name}"/>
<StackPanel Orientation="Horizontal">
<TextBlock Margin="4,0,0,0" Text="("/>
<TextBlock Margin="0,0,0,0" Text="{Binding ItemCount}"/>
<TextBlock Margin="4,0,0,0" Text="öğe)"/>
</StackPanel>
</StackPanel>
Yukarıdaki örnekte sadece ControlTemplate içerisinde değişiklik yaparak "(1
item)" gibi İngilizce yazıları Türkçe'ye çevirebiliyoruz. Yatay bir StackPanel
koyduktan sonra üç adet TextBlock ile "(1 öğe)" gibi bir metni oluşturabiliriz.
Binding üzerinden gelen CollectionViewGroup sınıfı ile beraber
zaten ItemCount adında bir Property geliyor ve her grubun altındaki sayı hızlıca
bir TextBlock'a bind edilebiliyor. Siz isterseniz ToggleButton'un tasarımını
bile değiştirebilirsiniz ;) İpler sizin elinizde....
DataGrid'de gruplama Türkçeleştirildi.
Hepinize kolay gelsin.