.NET Framework 3.0 ile beraber gelen alt bileşenlerden Windows Presentation Foundation uzaktan güzel gözüksede sanırım uygulama geliştirme aşamasında bir çok yazılım uzmanını zorlayan yapılardan biri. Bunun öncelikli nedenleri, henüz stabil bir uygulama geliştirme platformunun tam olarak sunulmaması ve dökümantasyonun yeterli olmaması gösterilebilir sanırım. WPF vizyonu yaygınlaştıkca dökümantasyon olayınında gelişeceğine inanıyorum.
 
Bu yazımda WPF’da databinding işlemlerinden bahsedeceğim. Önceki framework versiyonlarından farklı bir yaklaşıma sahip olan databinding işlemleri WPF’da gerçekten oldukça karışık. Bunun nedenlerinden biri kontrolleri bir birleri ile iç içe kullanabilme özelliğinin ve her bir kontrolü özelleştirme esnekliliğinin çok gelişmiş olması desem yanılmış olmam. WPF’da bir listbox’ın içine koyacağınız düğme üzerine tıklandığı zaman bir combobox’ın çıkıp,elemanlarını değişik türlerde gösterebilme esnekliği, geliştirme aşamasında baya zorluyor.

Bu yazı ile bu WPF’de kontrollere databinding nasıl yapılır giriş seviyesinde bunu anlatacağım. Yazının biraz daha net anlaşılması için XAML kavramı ve .NET Framework 3.0 konseptine yatkınlın sanırım gerekli olacaktır. Yapacağım örnek, bir combobox’ı database’den gelen bilgiler ile nasıl doldurabilir ve combobox’ın elemanlarını nasıl özelleştirebiliriz bunu gösteren basit bir uygulama olacak.

Öncelikle yeni proje olarak bir WPF Application açıyoruz. Aşağıdaki gibi bir kod parçası ilk karşımıza çıkan şey oluyor.

Şu aşamada tag’ına gerek yok. Bu yüzden onla ilgi tag’ları silebiliriz. Şu an elimizde sadece bir uygulamanın penceresi var. tagını kodumuza ekliyoruz. Yapacağımız basit uygulamada diğer alt kontrolleri bu canvas kontrolüne ekleyeceğiz.Canvas’ı ekledikten sonra bir combobox’ı da bu Canvas’ın içine ekliyoruz. Bu işlemleri toolbox’dan kontrolleri sürekleyip bırakarak yapabileceğiniz gibi aşağıdaki kodu yazarakta bu işlemleri yapabilirsiniz.

Şu aşamaya kadar daha hiç bir data işlemi yapmadık. Uygulamanın eli yüzü biraz daha düzgün olsun diye combobox’ın yanına bir label ekleyerek combobox’ın neyi barındıracağını belli edebiliriz.

Şimdi combobox’da gösterilecek elemanlarının nasıl görüntüleneceğini belirliyeceğiz.Bunun için DataTemplate nesnesini kullanacağız. Bu işlemi hem kod tarafında,hem XAML tarafında yapabiliriz. Ama XAML tarafında yapmak çok daha basit ve mantıklı olacaktır. DataTemplate nesnesi ile combobox’da ki elemanların nasıl gösterileceğini belirteceğiz. Bu aşamada WPF’in görsel olarak ne kadar esnek olabileceğini görebiliyoruz. Çünkü DataTemplate içine yazacağımız başka kontroller ile combobox’ın elemanlarını temsil edebiliyor olacağız. DataTemplate’in içinde belirtebileceğimiz bir button kontrolü ile combobox’ın tüm elemanlarının birer button olmasını sağlayabiliyoruz. Bunun için Canvas kontrolü içerisinde Resources kısmına DataTemplate ekliyoruz.

Peki bu Resources olayı ne? Resource,kontrollerin içerisinde bulunan kontrolleri özelleştirmek,DataTemplate,Style gibi özellikleri belirlemek için faydalanacağımız kısım.İlerleyen yazılarda Resources kısmından ayrıntılı olarak bahsedeceğim. Combobox’ımızdaki elemanların nasıl gösterileceğini belirteceğimiz DataTemplate’i, Canvas.Resources kısmına ekliyoruz. Bu aşamada x:Key:”ComboboxItemTemplate” kısmı çok önemli,çünkü bu template’i tanımlamalıyız ki ComboBox’ımız kullanabilsin. DataTemplate içerisinde yazacağımız her kod, dataların nasıl görüntüleceğini belirleyecek. İstediğimiz kodu koyabileceğimiz için istediğimiz gibi de veriyi sunabileceğiz.Bu örnekte Grid formatında bir gösterim yapacağız. Ürün resmi,ürün adı,ürün alt kategorisi,ürün kategorisi şeklinde kategoriler ile ürünleri combobox’ın içinde göstereceğiz.

Evet şuan görsel olarak kısmen her şey hazır.Combobox’ı ekledik, DataTemplate’i yarattık. Şimdi combobox’ın bu DataTemplate’i kullanacağını belirtmemiz lazım. Bunu ItemTemplate özelliğini kullanarak combobox kontrolüne belirtiyoruz.Bunu yaparak combobox elemanlarının DataTemplate’deki yapıda gösterileceğini tanımlıyoruz.

Görsel olarak hemen hemen her şey tamamlandı. Artık kod tarafında verilerin bu kontrollere aktarılması kaldı. Bunun için basit bir fonksiyon yazıyoruz.DataTable döndüren bu fonksiyon ile Database’den verileri alıyoruz.

Ben GetAllProducts diye aşağıdaki SP’yi yarattım,siz kendi sorgunuz ile istediğiniz şekilde veriyi çekebilirsiniz.

Bu fonksiyon ile dönen DataTable’i yaratmış olduğumuz combobox kontrolüne bind etmemiz gerekmekte. Bunun için aşağıdaki gibi bir kod parçası kullanıyoruz.

DataBind işlemlerini Binding nesnesini kullanarak gerçekleştiriyoruz.Şimdilik Binding nesnesinin Source özelliği bizim için yeterli olacaktır.Source ile hangi veri kaynağını bind edeceğimizi belirliyoruz. Daha sonra combobox’ın SetBinding() methodu ile bu Binding nesnesini ve ne tür bir binding işlemi gerçekleşecek bunu combobox’a bildiriyoruz. ComboBox.ItemSourceProperty ile binding işleminin elemanlar için gerçekleşeceğini söylüyoruz.Intellisence’den bakarsanız ComboBox için bir çok dependency özelliği görebilirsiniz. Peki ne demek bu? Combobox’ın bir çok özelliğine veri bağlayabiliyorsunuz. İlerleyen yazılarda bu konuyu biraz daha açacağım.

Evet,artık şimdi her şey tamam.ComboBox’ı yarattık,verilerin nasıl gözükeceğini tasarladık, verileri combobox’a bağladık.Ama küçük bir şey daha kaldı,o da hangi verilerin gözükeceğini belirtmek. Bunun için DataTemplate’deki kontrollere Binding işlemi sonucunda hangi verileri göstericeklerini belirtmek.

Dikkat ederseniz kullandığımız kontrollere “{Binding Path=SubCategory}” şeklinde bağlayacağım verileri ekledik. TextBlock kontrolünün Text özelliğine ürün ismini bağlamak gibi. Uygulamamızı çalıştırdığımız zaman aşağıdaki gibi bir sonuç elde etmiş olacağız.
Dikkat ederseniz standart combobox yapısından çok farklı bir şekilde, verileri combobox’da görüntüledik.DataTemplate ile, sadece XAML tarafında yapacağınız küçük değişiklikler ile bu tasarımları çok rahat bir şekilde değiştirmeniz mümkün olacaktır.

Umarım giriş için yeterli ve yol gösteren bir yazı olmuştur.İlerleyen yazılarda,başka konularla WPF’i biraz daha karıştıracağım…

Kaynak kodu SkyDrive Beta’daki hesabıma koyuyorum. http://cid-f66549bc9e13f731.skydrive.live.com/browse.aspx/Code buradan ulaşabilirsiniz.