Blog

Silverlight DataGrid kontrolünde üç adet kolon template’i var.

DataGridTextColumn
DataGridCheckboxColumn
DataGridTemplateColumn

DataGridTextColumn kolon tipi ile adında anlaşılacağı gibi text olarak verilerin gösterilmesini ve düzenlenebilmesini sağlıyor. DataGridTextColumn web ve windows kontrollerinde kullandığımız BoundField’lara benzer bir yapıdadır. Çeşitli özellikleri vardır. Bu özelliklerden bazılarını inceleyelim.

CanUserResize
Bu özellik kolonun yeniden boyutlandırılabilmesini sağlar. True ve false değeri alabilir. Default değeri true’dır.
CanUserSort
Bu özellik kolona göre verinin sıralanabilmesini sağlar. True ve false değeri alabilir. Default değeri true’dır.
CanUserReorder
Bı özellik kolonun yerininn değiştirlebilmesini sağlar. True ya da false değeri alır. Default değeri true’dır.
Binding
Bu özellik kolon da gösterilecek olan veriyi bağlayabilmemizi sağlar. Örn; Binding="{Binding Name}"
Header
Bu özellik kolon’un başlığını belirlememizi sağlar.
IsReadOnly
Bu özellik ile kolonun içerisindeki verinin salt okunur olup olmayacağı ayarlanır. True yada false değerleri alabilir. Varsayılan değeri true’dır.

Kolon yapısını inceleyecek olursak,

<data:DataGrid Margin="8,8,8,8" x:Name="grid" AutoGenerateColumns="False">
    <data:DataGrid.Columns>
        <data:DataGridTextColumnIs ReadOnly="True" CanUserResize="False" CanUserSort="True" CanUserReorder="False"  Binding="{Binding ProductID}" Header="Ürün ID"/>
    </data:DataGrid.Columns>
</data:DataGrid>

Yukarıda kolonumuzu XAML’den ekledik. Peki kolonumuzu dinamik olarak yani run-time da eklemek istersek Ne yapacağız? Aslında oldukça basit. DataGrid’in columns isimli bir koleksiyonu var. Runtime da yeni bir kolon oluşturup Columns koleksiyonuna ekleyebiliyoruz.

DataGridTextColumn yeniColon =new DataGridTextColumn();
yeniColon.Header = "Yeni Kolon";
yeniColon.Binding = new Binding("YeniKolondaGorutulenecekAlan");
DataGrid1.Columns.Add(yeniColon);

DataGridCheckboxColumn’ları da true ya da false değerlerini listelemek için kullanacağımız kolon tipidir. DataGridTextColumn kolon tipinin yukarıda bahsettiğimiz özellikleri DataGridCheckboxColumn ile ortaktır.

XAML kodunu inceleyecek olursak,

<data:DataGrid Margin="8,8,8,8" x:Name="grid" AutoGenerateColumns="False">
    <data:DataGrid.Columns>
        <data:DataGridCheckBoxColumn Binding="{BindingProperty}" Header="Baslik"></data:DataGridCheckBoxColumn>
    </data:DataGrid.Columns>
</data:DataGrid>

Runtime’da yazdığımız kod ile eklemek istersek,

DataGridCheckBoxColumn yeniCheckBoxColon = new DataGridCheckBoxColumn();
yeniCheckBoxColon.Header = "Yeni Kolon";
yeniCheckBoxColon.Binding = new System.Windows.Data.Binding("YeniKolondaGorutulenecekAlan");
grid.Columns.Add(yeniCheckBoxColon);

DataGridTemplateColumn kolonu ise içlerinde en çok özelleştirilebilir kolon tipidir. İçerisinde Content tipinde bir özellik olduğu için içerisine istediğimiz şeyi atabiliriz. Örneğin DateTime tipinde bir Property’miz var. Bu Property’nin değerimi kullanıcıya kolon içerisinde DatePicker kontrolü ile gösterebiliriz.

2 çeşit template modu bulunuyor. CellTemplate, CellEditingTemplate. CellTemplate kolonun normal şartlardaki görüntüsünü bize verirken, CellEditingTemplate veriyi düzenlemek istediğimiz de karşımıza çıkacak. Yukarıdaki örneğe dönersek, Kullanıcıya DateTime tipindeki veriyi gösterirken CellTemplate, kullanıcı veriyi değiştirmek istediğin de ise CellTemplateEditing Template’ni gösterebiliriz.

<data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
        <TextBlock Text="{Binding Tarih}"></TextBlock>
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>

Veriyi listelerken yukarıdaki gibi bir yapıyı kullanıyoruz. Güncellerken farklı kontrolleri de kullanıcıya gösterebiliriz. Bunun için kullanmamız gereken gereken CellEditingTemplate özelliğidir. Burada dikkat etmemiz gereken bir diğer özellik Binding özelliğinin Mode özelliğidir. Mode özelliğini TwoWay olarak belirttiğimizde List verimizin de güncellenmesini sağlıyoruz.

<data:DataGridTemplateColumn Header="Tarih">
    <data:DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding SellStartDate}"></TextBlock>
        </DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
<data:DataGridTemplateColumn.CellEditingTemplate>
    <DataTemplate>
        <basics:DatePicker SelectedDate="{Binding SellStartDate ,Mode=TwoWay}"></basics:DatePicker>
    </DataTemplate>
</data:DataGridTemplateColumn.CellEditingTemplate>
</data:DataGridTemplateColumn>

Run-Time da yani kolonları dinamik olarak eklemek istersek durum biraz karışık gibi görünüyor rünüyor JBunun için kullanılabilecek iki yöntem var. ReSources oluşturmak ve XAMLReader kullanmak.

İlk olarak XAML tarafında ReSources oluşturalım. (Not: Resources, UserControl içerisinde bir dependency property’dir.) ReSources ile kolonların içerisine dinamik olarak DataTemplate ekleyebilmek için DataTemplate’lar oluşturabiliyoruz.

<UserControl.Resources>
    <DataTemplate x:Key="DuzenleninceGorutulenecekKisim">
        <TextBox Text='{Binding SellStartDate, Mode=TwoWay}' />
    </DataTemplate>
    <DataTemplate x:Key="GorunecekKisim">
        <TextBlock Text="{Binding SellStartDate}"></TextBlock>
    </DataTemplate>
</UserControl.Resources>

Şimdi kod tarafına geçip templatefield’ı oluşturabiliriz. XAML’de Resources’e bir key vermiştik. Oluşturduğumuz DataGridTemplateColumn’ın CellTemplate ve CellEditingTemplate özelliklerine Resources’daki oluşturduğumuz DataTemplate’leri atadık. Custom templateleri dinamik olarak oluşturmak istediğimiz de bu şekilde DataTemplate’ler oluşturmak zorundayız.

DataGridTemplateColumn template = new DataGridTemplateColumn();
template.CellTemplate = Resources["GorunecekKisim"] as DataTemplate;
template.CellEditingTemplate = Resources["DuzenleninceGorutulenecekKisim"] as DataTemplate;
template.Header = "Tarih";
grid.Columns.Add(template);

Aynı işlemi XamlReader ile de yapabiliyoruz. Bunun için Resources da tanımladığımız gibi string olarak DataTemplate oluşturacağız.

usingSystem.Windows.Markup; // Eklemeyi unutmayalım

DataGridTemplateColumn tColumn = new DataGridTemplateColumn();
tColumn.Header = "Tarih";
StringBuilderkolonXaml = new StringBuilder();

kolonXaml.Append("<DataTemplate xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\" xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\" xmlns:local= \"clr namespace:System.Windows.Controls;assembly=System.Windows.Controls\"><TextBlock Text = \"{Binding SellStartDate}\"/></DataTemplate>");
tColumn.CellTemplate = (DataTemplate)XamlReader.Load(kolonXaml.ToString());

kolonXaml.Append("<DataTemplate xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\" xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\" xmlns:local= \"clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls\"><TextBox Text='{Binding SellStartDate, Mode=TwoWay}' /></DataTemplate>");
tColumn.CellEditingTemplate = (DataTemplate)XamlReader.Load(kolonXaml.ToString());

grid.Columns.Add(tColumn);

XAMLReader.Load Metodu ile String olarak oluşturduğumuz XAML kodu okunur ve geriye objenin tipine uygun sonuç döner.ç döner.

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