Blog

  • 29 Oca 2009

Silverlight DataGrid Kontrolü - Giriş

Merhaba arkadaşlar, bu makalemizde silverlight 2.0 ile birlikte karşımıza çıkan DataGrid kontrolünü tanıyıp, nasıl kullanıldığını ve çeşitli özelliklerini inceleyeceğiz.

DataGrid kontrolünü verilerin listelenmesini sağlamak için kullandığımız web ve windows uygulamalarından biliyoruz. Datagrid, Silverlight 2.0 ile birlikte silverlighta eklendi. Ayrıca verileri listeledikten sonra kolonlara göre sıralama yapabiliyor, kolonların yerini değiştirebiliyoruz. Web’de kullandığımız DataGridView kontrolü gibi çok esnek bir yapıya sahiptir. Datagrid Kolonlarında Text, CheckBox yada kendi Templatelerimizi oluşturup verileri görüntüleyebiliyoruz.

Yeni bir silverlight projesi oluşturarak DataGrid’de verileri listeleyelim. Projeyi ilk açtığımızda ToolBox’da DataGrid kontrolünü bulamayacağız. Bunun için ilk olarak projemizin referanslarına System.Windows.Controls.Data’yı eklememiz gerekiyor.

Referansı ekledikten sonra DataGrid’i uygulamamıza ekleyebiliriz. XAML kodumuz aşağıdaki gibi oldu

<UserControlxmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" x:Class="DataGridGiris.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  Width="700" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<data:DataGrid Margin="24,22,26,25"  x:Name="grid" ></data:DataGrid>
</Grid>
</UserControl>


Verileri listelemek için gerekli kodu da yazalım. Şimdilik data için kendimiz bir Haber class’ı oluşturalım ve içerisinde 4 tane property bulunsun: HaberID, Baslik, Tarih ve YayinDurumu

public class Haber
{
    public int HaberID { get; set; }
    public string Baslik { get; set; }
    public DateTime Tarih { get; set; }
    public bool YayinDurumu { get; set; }
}

Bu sınıfı kullanarak bir List oluşturalım ve içerisine birkaç haber ekleyelim. Haberleri ekleyip List’i doldurduktan sonra verimizi DataGrid’e bağlayabiliriz. Veriyi bağlamak için de DataGrid’in ItemSource özelliğini kullanıyoruz. (Hatırlarsanız WinForm - DataGrid ve WebForm GridView’inde DataSource özelliği vardı.)

publicPage()
{
    InitializeComponent();
    this.Loaded += new RoutedEventHandler(Page_Loaded);
}

void Page_Loaded(object sender, RoutedEventArgs e)
{
    List<Haber> haberler = new List<Haber>() // Koleksiyon ilklendirme
    { 
        new Haber() // Nesne İlklendirme
        { 
            HaberID=1, 
            Baslik="Silverlight 2.0 ile İnteraktif Uygulamalar", 
            Tarih= new DateTime(2009,01,10), 
            YayinDurumu = true 
        },

        new Haber()
        {
            HaberID=2, 
            Baslik="semgoksu.com Yenilendi !", 
            Tarih= new DateTime(2009,01,10), 
            YayinDurumu = true 
        },

        new Haber()
        {
            HaberID=3, 
            Baslik="Windows Vista 7 Release oldu !", 
            Tarih= new DateTime(2009,01,10), 
            YayinDurumu = false 
        },

        new Haber()
        {
            HaberID=4, 
            Baslik="Visual Studio 2010 Release oldu !", 
            Tarih= new DateTime(2009,01,10), 
            YayinDurumu = false 
        }
    }; 

    grid.ItemsSource = haberler;

    }
}

Nesneleri oluştururken ve Koleksiyona nesne eklerken de C# 3.0’ın güzelliklerine değinmiş olduk JŞimdi projemizi çalıştırıp test edelim.

Veriler geldi ama benim istediğim düzende değil. Bunun nedeni de Liste içerisinde ne varsa ekran da göstermesidir. Bunu da yapmasının nedeni AutoGenerateColumns özelliğindendir. Bu özellik veri içerisindeki her Property için gerekli kolonların otomotik olarak Grid tarafından yaratılmasını sağlar, varsayılan olarak true’dır. Bu özelliği false yaparak kendi kolonlarımızı ekleyebiliriz. Bunu yapmak için de tekrar blend’e dönelim. Grid’i seçip özellikler menüsüne gidelim. Buradan AutoGenerateColumns özelliğini false yapalım.

Kolonlarımız otomatik olarak gelmeyecek ve artık istediğimiz gibi DataGrid’in kolonlarını biz düzenleyebileceğiz. Bunun içinde yine Özelikler menüsüne gidip Columns’a tıklayarak yeni kolonlar ekleyebiliriz.

Açılan pencereden Add Another Item’a tıklayarak yeni kolonlar ekleyebiliriz.

Add Another Itemdüğmesine tıkladıktan sonra, DataGrid’e ekleyeceğimiz kolon tipini seçiyoruz. Üç adet kolon tipimiz var. DataGridTextColumn, DataGridCheckboxColumn, DataGridTemplateColumn. Kısaca bahsetmek gerekirse DataGridTextColumn ile text verileri gösteriyoruz. Boolen tipindeki verileri DataGridCheckBoxColumn, bunların dışındaki seçenekler için de DataGridTemplateColumn’u kullanıyoruz.

Üç tane DataGridTextColum, bir tane de DataGridTemplateColumn ekleyeceğim.

Column’ları ekledikten sonra şimdilik 2 özelliği belirtmemiz yeterli olacak. Bu özellikler Binding ve Header. Binding bu kolonda gösterilecek olacak verimim yolunu, header ise kolon başlığını belirtiyor.

DataGridTextColumn’larda HaberID, Baslik ve HaberTarihi’ni, Template field içine de bir CheckBoxekliyip SelectedIndex özelliğine de Data’dan gelen değeri bağlayacağım.

<UserControl xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" x:Class="DataGridGiris.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="700" Height="300">

<Grid x:Name="LayoutRoot" Background="White">
<data:DataGrid x:Name="grid" Margin="24,22,26,25" AutoGenerateColumns="False">
<data:DataGrid.Columns>
        <data:DataGridTextColumn Binding="{BindingHaberID}" Header="Haber No"/>
        <data:DataGridTextColumn Binding="{BindingBaslik}" Header="Başlık"/>
        <data:DataGridTextColumn Binding="{BindingTarih}" Header="Haber Tarihi"/>
        <data:DataGridTemplateColumnHeader="Durumu" Width="120">
            <data:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <ComboBox SelectedIndex="{Binding YayinDurumu}" Width="100" Height="20">
                <ComboBoxItem Content="Pasif"/>
                <ComboBoxItem Content="Aktif"/>
                    </ComboBox>
                </DataTemplate>
        </data:DataGridTemplateColumn.CellTemplate>
        </data:DataGridTemplateColumn>
</data:DataGrid.Columns>
</data:DataGrid>
</Grid>
</UserControl>


XAML kodumuzu da düzenledik. Dikkat edersek verileri bağlamak için {BindingYayinDurumu} gibi bir yöntem kullandık. (Bu yöntem ASP.NET’ deki DataBound kontrolleri için kullandığımız Eval’a benziyor.) DataGridTemplateColumn kolonunun 2 görünüm özelliği var. CellTemplate ve CellEditingTemplate. CellTemplate kolonda ki bilginin sadece gösterilmesi için kullanılır. CellEditingTemplate ise kolonun içersindeki bilginin güncellenebildiği template’dir. İkisi de içerisine DataTemplate alıyor. DataTemplate’in içerisine de istediğimiz kontrolü atıp kullanabiliyoruz. DataTemplate’in içerisine ComboBox kontrolü ekledik. Itemlarında Pasif ve Aktif isimli 2 Item ekledim. 0 ve 1 değerleri geleceği için 0. Index’e pasif’i 1. Index’e de Aktif’i koyduk. SelectedIndex özelliğine de List’den gelecek olan YayinDurumu’nu bağladım. Artık her şey hazır. Son kez örneğimizi çalıştıralım.

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

Yorum (2)

  • Yasin / 28.4.2009 15:24:58

    Bu makaleniz sayesinde ilk silverlight uygulamamı yaptım.. teşekkürler..

  • Ahmet ESEN / 29.6.2010 00:18:07

    Gayet açıkça belirtilmiş fakat birşeyi değiştiremiyorum bir çok yolu denedim Sizin de üst tarafta Haber No, Başlık vs. headerların arka plan rengini değiştiremiyor muyuz?

Yorum Yaz