Windows Phone 7.1 Item Source & Data Binding

By Burak TUNGUT - 21.11.2012 - Kategori Windows Phone 8

Bu makalem ile bir önceki makalemizde ki konuya devam ediyor, oluşturduğumuz Template için Listbox kontrolünde Data Bind işlemlerini inceliyor olacağız.
Sabah hazırladığım bu örneği sizler ile paylaşmak için cidden sabırsızlanıyordum, uygulamaya baktıkça bakasım geliyordu açıkçası :)

Bir önceki makalem de Listbox kontrolünü ve Data Template'lerin Item Template olarak nasıl source edilebileceğini görmüştük. En sonda ise 1 adet Image ve 2 adet Textblock alabilen bir Listbox Item Template hazırlamıştık.
Bu makale ile hazırladığımız Item Template e devam ediyoruz, sadece Image kontrolümüzün boyutlarını 100x100 yapıyoruz.

Sabah hazırladığım örneği sizler ile paylaşmak için sabırsızlanıyorum :)
Klişe kullandığım "Visual Studio IDE'lerimizi açalım" yerine bu sefer, kaldığımız yerden devam ediyoruz diyorum :)

Data Template düzenlemeye kaldığımız yerden devam edelim ve sayfamızda ki Image kontrolüne tıklayarak sağ bölümdeli "Data Binding" tuşuna tıklayalım ve gelecek olan pop-up dan Data Binding seçeneğine tıklayalım.

Üst tarafdaki seçeneklerimizden verilerimizi kod tarafında içine aktaracağımız DataContext e tıklayalım ve resimdeki combobox u işaretleyerek Resim bilgisin i birazdan oluşturuyor olacağımız entity yapımızdaki Resim adında ki üye değişkeninden alacağını bildirelim.

Aynı işlemi iki adet TextBlock içinde yapalım. 1.TextBlock için "AdSoyad", 2.TextBlock içinse "Unvan" bilgilerini girip binding bilgilerini dolduralım.

Visual Studio ekranımıza geri döndüğümüzde açık olan projemizin başka bir editor tarafından değiştirildiğine dair mesaj alacağız. Haliyle Blend tarafında boş durmadık :) Yes To All seçeneği ile devam ediyoruz.

Yapacağımız örnek için yukarıdaki resimleri www.yazilimdilleri.net/Yazarlar.aspx bölümünden temin edebilirsiniz. Sanırım yapacağımız örnek deşifre olmaya başladı :)

Resimleri eklemek üzere öncelikle projemizin içersinde Images diye bir klasör yaratalım ve Add > Existing Item seçeneği ile tüm resimleri bu klasör altında toplayalım.

Artık kod tarafına geçelim ve Insan adında bir sınıf oluşturalım. AdSoyad, Unvan ve Resim olmak üzere 3 adet üye değişkene sahip olan bu sınıfımızda biri parametre almayan diğeri ise 3 parametreyide doğrudan alan 2 adet yapılandırıcı method yazalım.

Button kontrolümüzün click eventine gelelim ve Insan sınıfı için bir generic list oluşturalım.
Listemizin içini ise şekildeki gibi dolduralım. Gördüğümüz üzere listemizin içinde 5 adet Ad Soyad, Ünvan ve Resim bilgisine sahip ve 2 adet de henüz düzenlenmemiş Insan var.

Son olarak da Listbox kontrolümüzü listelemk üzere kaynağını oluşturduğumuz listeden alması için resimdeki gibi kodumuzu yazalım.

Uygulamamızı debug edip, Doldur butonumuza tıkladığımızda Listbox kontrolümüz tam da istediğimiz ya da istediğim gibi dolmuş olacak :)
 

Bu makale ile Listbox kontrolünün aslında bizlere fazlaca olanak sağladığını ve Data Template ile nasıl özelleşebileceğini görmüş olduk.

 

Bir sonraki makalem de görüşmek üzere, esen kalın :)

H.Burak TUNGUT
Bilgisayar Mühendisliği Öğrencisi
www.buraktungut.com

Yorum Bırak

Facebook
Son Yorumlar