-- ASP.NET, Silverlight

Silverlight DataGrid, ComboBox ve ListBox’a Veri Bağlama

Silverlight’ın piyasaya ilk sürüldüğü dönemlerde(yıllar önce) DataGrid diye bir kontrol olmadığı için veri listeleme, düzenleme gibi işlemler için herkes kendi başının çaresine bakıyordu diyebilirim. Sonrasında Silverlight Control Toolkit yayınlanmasıyla birlikte epey bir kolaylık sağlanmış oldu. Bu makalemde genel veri gösterim kontrollerinden en çok kullanılan üçün tanıtacağım.

ComboBox : Açılır menü biçiminde veri listelemeye yarar.
ListBox : Listeleme biçiminde veri listelemeye yarar.
DataGrid : Çok sayıda veriyi listelemek, güncellemek, sıralamak, silmek gibi bir çok işlemi yapabilen en gelişmiş veri kontrolüdür.

Şimdi uygulamamızın arayüzünü hazırlamaya başlayalım.

Öncelikle, DataGrid kontrolünü kullanabilmemiz için bir namespace tanımlamamız gerekir.

xmlns: ile başlayan tag’lar arasına aşağıdaki ifadeyi yazın.

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

Ayrıca projede Koala.jpg adında bir resim dosyası da kullandık. Silverlight projesine bu şekilde bir resim dosyası eklemeniz gerekiyor.

Bu örneğimizde iki biçimde veri şablonu(data template) oluşturma yöntemini kullanacağız. İlki, kontrolün kendi içinde şablon oluşturulması, ikincisiyse, UserControl’ün Resource tagları içerisinde tanımlanma işlemi olacak. Şimdi, ListBox veri kontrolümüzde kullanacağımız UserControl.Resource içerisindeki DataTemplate’i oluşturalım.

    <UserControl.Resources>
        <DataTemplate x:Key="ListeTemplate">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="40"/>
                    <RowDefinition Height="40"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="40*"/>
                    <ColumnDefinition Width="30*"/>
                    <ColumnDefinition Width="30*"/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding Ad}" FontSize="12" FontWeight="Bold" Height="30" Foreground="Red" 
    				Grid.Column="1" Grid.Row="0" Margin="3,0,0,0" />
                <TextBlock Text="{Binding Soyad}" FontSize="12" FontWeight="Bold" Height="30" Foreground="Green" 
    				Grid.Column="2" Grid.Row="0" Margin="3,0,0,0"/>
                <CheckBox Content="Cinsiyet" Grid.Column="1" Grid.Row="1" IsChecked="{Binding Cinsiyet}" 
    				Width="80" Height="20"/>
                <CheckBox Content="Evli mi?" Grid.Column="2" Grid.Row="1" IsChecked="{Binding MedeniHal}" 
    				Width="80" Height="20"/>
                <Image Source="Koala.jpg" Grid.Column="0" Grid.Row="0" Width="50" Height="50"/>
            </Grid>
        </DataTemplate>
    </UserControl.Resources>

Artık LayoutRoot isimli ana Grid nesnemizin içerisini tasarlayabiliriz.

<ListBox x:Name="lst" ItemTemplate="{StaticResource ListeTemplate}" 
                        HorizontalAlignment="Left" 
			Height="93" Margin="413,42,0,0" 
                        VerticalAlignment="Top" Width="287" />

        <ComboBox x:Name="cmb" 
                        HorizontalAlignment="Left" 
			Margin="11,10,0,0" 
                        VerticalAlignment="Top" 
                        Width="175" Height="27">
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Ad}" FontSize="12" FontWeight="Bold" Height="30" Foreground="Red" Margin="3,0,0,0" />
                        <TextBlock Text="{Binding Soyad}" FontSize="12" FontWeight="Bold" Height="30" Foreground="Green" Margin="3,0,0,0"/>
                        <CheckBox Content="Cinsiyet" IsChecked="{Binding Cinsiyet}" Width="80" Height="20"/>
                        <CheckBox Content="Evli mi?" IsChecked="{Binding MedeniHal}" Width="80" Height="20"/>
                        <Image Source="Koala.jpg" Width="50" Height="50"/>
                    </StackPanel>
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>

        <sdk:DataGrid x:Name="dg" 
                      AutoGenerateColumns="False" 
                      HorizontalAlignment="Left" 
                      Height="248" Margin="10,42,0,0" 
                      VerticalAlignment="Top" Width="398">
            <sdk:DataGrid.Background>
                <LinearGradientBrush>
                    <GradientStop Color="Gold" Offset="0.3" />
                    <GradientStop Color="Gold" Offset="0.6" />
                </LinearGradientBrush>
            </sdk:DataGrid.Background>
            <sdk:DataGrid.RowBackground>
                <LinearGradientBrush>
                    <GradientStop Color="Gold" Offset="0.3" />
                    <GradientStop Color="Gold" Offset="0.6" />
                </LinearGradientBrush>
            </sdk:DataGrid.RowBackground>
            <sdk:DataGrid.AlternatingRowBackground>
                <LinearGradientBrush>
                    <GradientStop Color="LightGray" Offset="0.3" />
                    <GradientStop Color="LightGray" Offset="0.6" />
                </LinearGradientBrush>
            </sdk:DataGrid.AlternatingRowBackground>
            <sdk:DataGrid.Columns>
                <sdk:DataGridTextColumn Header="Ad" Binding="{Binding Ad}" />
                <sdk:DataGridTextColumn Header="Soyad" Binding="{Binding Soyad}" />
                <sdk:DataGridTextColumn Header="Email" Binding="{Binding Email}" />
                <sdk:DataGridCheckBoxColumn Header="Evli" Binding="{Binding MedeniHal}" />
                <sdk:DataGridCheckBoxColumn Header="Cinsiyet" Binding="{Binding Cinsiyet}" />
            </sdk:DataGrid.Columns>
        </sdk:DataGrid>

Bu XAML kodları sonrasında, uygulamamız Visual Studio tasarım ekranında aşağıdaki gibi görünecektir.

SL1

Artık C# katmanına geçerek biraz kod yazma zamanı geldi. Kullanıcı verisini kullanarak işlem yapacağımız için öncelikle bir Kullanıcı sınıfı oluşturalım ve field(alan), Property(özellik) nesnelerini de bu sınıfa dahil edelim.

 public class Kullanici
        {
            private int _id;
            public int Id
            {
                get { return _id; }
                set { _id = value; }
            }

            private string _ad;
            public string Ad
            {
                get { return _ad; }
                set { _ad = value; }
            }

            private string _soyad;
            public string Soyad
            {
                get { return _soyad; }
                set { _soyad = value; }
            }

            private string _email;
            public string Email
            {
                get { return _email; }
                set { _email = value; }
            }

            private bool _medeniHal;
            public bool MedeniHal
            {
                get { return _medeniHal; }
                set { _medeniHal = value; }
            }

            private bool _cinsiyet;
            public bool Cinsiyet
            {
                get { return _cinsiyet; }
                set { _cinsiyet = value; }
            }

            public Kullanici(int id, string ad, string soyad, string email, bool medeniHal, bool cinsiyet)
            {
                this.Id = id;
                this.Ad = ad;
                this.Soyad = soyad;
                this.Email = email;
                this.MedeniHal = medeniHal;
                this.Cinsiyet = cinsiyet;
            }

            public Kullanici()
            { 

            }
        }

Kullanıcı sınıfını oluşturduğumuza göre, artık bu sınıfı kullanarak oluşturduğumuz List nesnesini veriyle doldurabiliriz. Hemen form nesnelerimizi oluşturan InitializeConponent() metodumuzun hemen altında, aşağıdaki veri kümesini oluşturuyoruz.

List<Kullanici> Kullanicilar = new List<Kullanici>();
Kullanicilar.Add(new Kullanici(1, "Cihan", "Özhan", "cihan.ozhan@hotmail.com", false, true));
Kullanicilar.Add(new Kullanici(2, "Kemalettin", "Aydoğdu", "info@kemalettin.com", true, true));
Kullanicilar.Add(new Kullanici(3, "Murtaza", "Geceli", "murtaza@geceli.com", true, false));
Kullanicilar.Add(new Kullanici(4, "İbrahim", "Ballıses", "ibo@ballises.com", true, true));
Kullanicilar.Add(new Kullanici(5, "Cimşir", "Cemşid", "cimsir@cemsid.com", false, true));
Kullanicilar.Add(new Kullanici(6, "Cemşid", "Durdu", "cemsid@durdu.com", false, true));
Kullanicilar.Add(new Kullanici(7, "Kezban", "Demir", "kezban@demir.com", false, false));
Kullanicilar.Add(new Kullanici(8, "Esra", "Kuşçu", "esra@kuscu.com", true, false));

lst.ItemsSource = Kullanicilar; // ListBox'a Kullanicilar verisini bağla
cmb.ItemsSource = Kullanicilar; // ComboBox'a Kullanicilar verisini bağla
dg.ItemsSource = Kullanicilar;  // DataGrid'e Kullanicilar verisini bağla

Artık sadece event’leri kullanarak basit işlemleri gerçekleştirmek kaldı.

Yukarıdaki List<Kullanici> isimli veri kaynağımızın hemen altında aşağıdaki event(olayları) tetikleyelim.

            lst.SelectionChanged += lst_SelectionChanged;

Projemiz hazır. Çalıştırarak sonuçları inceleyebilirsiniz. Ekrandaki tüm kontrollerde hazırladığımız verinin bulunduğunu görebilirsiniz.

İyi çalışmalar.

Yorumla

Yorum