Windows Phone LongListSelector Kullanımı

LongListSelector kontrolü bize büyük verilerimizi ekranda göstermeyi sağlar. LongListSelector’e örnek olarak Twitter gösterilebilir. Bununla ilgili kod örneğini msdn’de görebilirsiniz: http://code.msdn.microsoft.com/wpapps/TwitterSearch-Windows-b7fc4e5e

Ben bu yazımda basit bir şekilde verileri nasıl longlistselector ile kullanırız ondan bahsedeceğim. LongListSelector kullanarak bir takım kişilerin isim ve maillerini göstereceğim.  Öncelikle boş bir proje açalım ve içine LongListSelector kontrolünü ekleyelim.

1

Projeye sağ tıklayıp Add-Class yollarını izleyerek bir class oluşturalım.

2

3

Bu class’ımızda verimizin property’lerini belirteceğiz, daha sonra bunu MainPage’de kullanacağız. Bu yüzden class’ı oluşturduğumuzda ilk yapacağımız iş bunu public yapmak. Eğer siz hiçbirşey yapmazsanız compiler bunu otomatik olarak private algılar.

4

Benim senaryomda şuan sadece isim ve mail olduğu için bu property’leri ekledim. prop yazıp tab’a iki kere tıkladıktan sonra kolayca property oluşturabilirsiniz, bu da Visual Studio’nun sunmuş olduğu bir güzellik 🙂

5

Data classımızla işimiz bu kadar. Şimdi MainPage.xaml.cs ‘de verilerimizi ekleyeceğiz. Bunun için global bir List oluşturup ona Add metoduyla tek tek kullanıcıların isim ve maillerini gireceğiz.

6

Ekledikten sonra, son olarakta DataContext’imize verilerimizi eklediğimiz listeyi atamayı unutmuyoruz.

En başta eklemiş olduğumuz LongListSelector’un ItemSoruce’unu Binding yaptıktan sonra ItemTemplate oluşturmamız gerekiyor. StackPanel’i bir konteynır olarak düşünebilirsiniz. StackPanel’e eklenilen veriler alt alta veya yan yana sıralanır. Eğer hiçbir şey yapmazsanız StackPanel default olarak alt alta ekler. Yan yana eklemek için  aşağıdaki xaml kodunu kullanabilirsiniz.

<StackPanel Orientation="Horizontal" >

7İlk textblock ‘ a isim, hemen altına ikinci textblock’a da mail’i yazmasını istediğim için yukarıdaki gibi kullandım.Emülatorde çalıştırdığımda karşıma çıkan sonuç;sonuc

 

Reklamlar

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Connecting to %s