Silverlight 2

Merhaba arkadaşlar bu makalemiz de Silverlight kontrol kütüphanesinde bulunan TabControl kontrolünü inceleyeceğiz

TabControl, Windows ve Web uygulamalarındaki gibi diğer kontrollere konteynır’lık eder ve form üzerinde ki diğer kontrollerin sekmeler içerisinde gösterilmesini sağlar. Kontrolü inceleyecek olursak içerisinde Tab’ler oluşturabilmemiz için TabItem türünden bir koleksiyon var. Bu sayede ister Expression Blend de istersek de dinamik olarak kod ile Tab’ler oluşturabiliyoruz.

Yeni bir Silverlight projesi başlatalım ve TabControl’ü projemiz de kullanalım. Projeyi başlattıktan sonra “Asset Library” den bir adet TabControl ekleyelim.

Yeni tab’ler oluşturmak için TabControl’in Common Properties sekmesinde bulunan Items Sekmesine tıklayalım.

Sonrasında açılan pencerede “Show System Assemblies” seçeneğini işaretleyip search ekranına TabItem yazıp gelen ekrandan TabItem’ı seçelim.

Ben 3 tane TabItem ekledim. Oluşan XAML kodunu inceleyecek olursak;

Aynı işlemi dinamik olarak da yapalım. Yeni bir event listener oluşturalım ve bu event içinde de yeni TabItem’ı TabControl’e ekleyelim.

Son haline bakacak olursak aşağıdaki gibi oldu.

TabItem’ın header özelliğinde text dışında başka bir kontrol yada herhangi bir Layout Kontrolünü(Canvas, Grid, StackPanel) kullanarak başka kontroller de ekleyebiliyoruz. Layout kontrolü kullanmayacaksak sadece bir tane UIElement kontrolü ekleyebiliyoruz.

Kontrolün çok işimize yarayacak SelectionChanged isimli bir eventi var. Bu event tablar arasında gezinirken yani bir tab’den diğer tab’e geçerken çalışır. Örneğin tab değiştiğinde TabControl’e bir animasyon verebilirsiniz... Örnek kullanımı aşağıdaki gibidir.

Makalenin sonuna geldik, başka bir makalede görüşmek üzere. .NET ve Silverlight ile kalın ;)

Sem GÖKSU
www.semgoksu.com  | www.yazilimgunlugu.com
sem.goksu@yazilimgunlugu.com

Kaynaklar
msdn.com
silverlight.net

 

http://silverlight.net/themes/silverlight/community/gallerydetail.aspx?cat=Silverlight2

Uygulamayı çalıştırdığım da hata verdi oysa ki hata vermesini gerektirecek bir hata yok. List'deki nesneleri test etmek için bir döngü ile tek tek aldım sorun yok. Sonradan Class'ın erişim belirleyicini public yaptım ve DataGrid'de veriler sorunsuz bir şekilde listelendi. BUG demek doğru olurmu bilmiyorum ama aynı assembly içerisindeki Class'ın public olma zorunluluğu çok gereksiz geldi bana :)

namespace DataGridBug
{

    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(Page_Loaded);
        }
        void Page_Loaded(object sender, RoutedEventArgs e)
        {
            List<Haber> haberler = new List<Haber>()
            {
                new Haber()
                {
                    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; 
        }
    }
    ? class Haber
    {
        public int HaberID { get; set; }
        public string Baslik { get; set; }
        public DateTime Tarih { get; set; }
        public bool YayinDurumu { get; set; }
    }
}

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

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

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ı.)

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.

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

Silverlight uygulamasi gelistirmek için ne gerekiyor? 

* Visual Studio 2008 ve Visual Studio 2008 Service Pack 1.
* Visual Studio 2008 için Silverlight Tools (Silverlight Proje templatelerinin VS 2008'e eklenmesini saglayan araç. Içerisinde developer runtime ve SDK'da var.)
* Expression Blend 2 ve Expression Blend 2 Service Pack 1(Grafik arayüzeleri olusturmamizi saglayan dizayn araci)
* Deep Zoom Composer (Deep Zoom Uygulamasi gelistirmek isterseniz indirmeniz gerekiyor)
* Silverlight Toolkit (Açik kaynak kodu ile birlikte hazir silverlight kontrollerinin bulundugu bir paket. Ajax control toolkit gibi kontroller var içerisinde)

Tüm bunlari yaptiktan sonra makinamiz silverlight'a hazir. Silverlight'in kendi resmi sitesi olan silverligh.net sitesinde silverlight ile ilgili çalismalari, videolari ve çesitli dökümanlari bulabilirsiniz. Yerli kaynak içinse Daron Yöndem'un blogunu inceleyebilirsiniz.