Windows Phone & W8 : Tasarım aşamasında örnek veri üretmek

Merhaba arkadaşlar,

Hepimiz uygulamalarımızı tasarlarken yaptığımız tasarıma içeriğin nasıl oturacağını visual studio veya expression blend’den görmek isteriz. Örneğin bir ListBox’ın ItemTemplate’ini düzenlediğimizde bu ListBox’ın içindeki elemanların çalışma zamanında nasıl görüneceğini tasarım aşamasında görmek isteriz.

Daha önce Visual Studio’da Windows Phone Databound App şablonunda bir proje oluşturduysanız LongListSelector’daki verilerin Design One, Design Two… şeklinde listelendiğini göreceksiniz. Uygulamayı emülatörde veya cihazınızda çalıştırınca da bu veriler Runtime One, Runtime Two… şeklinde değişiyor.

      

Bu yazımda da uygulamalarımız için tasarım zamanında nasıl örnek veri üretebileceğimize değineceğim. Aslına bakarsanız bu teknik MVVM mimarisiyle geliştirilen uygulamalarda daha anlamlı oluyor. MVVM mimarisini daha önce kullanan arkadaşlar ne demek istediğimi daha iyi anlayacaklardır.

Bugünkü senaryomuz şöyle olsun;
Bir kütüphane uygulaması yazdığımız varsayalım. Kitap isminde bir sınıfımız olsun ve bu sınıftan örnek verileri MainPage.xaml’de bir ListBox içinde özel bir ItemTemplate ile listeleyelim.

DesignTimeSampleData isimli bir Windows Phone projesi oluşturalım ve Kitap.cs sınıfını ekleyelim;

 

 public class Kitap
{
public string Ismi { get; set; }
public string Yazari { get; set; }
public int SayfaSayisi { get; set; }
}
  • MainPage.xaml‘e bir ListBox veya LongListSelector ekleyelim, ben listbox ekleyeceğim, bir türlü alışamadım şu LongListSelector’a 🙂

          <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<ListBox ItemsSource="{Binding Kitaplar1}" Grid.ColumnSpan="3">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Height="100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"></ColumnDefinition>
<ColumnDefinition Width="140"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>

</Grid.ColumnDefinitions>
<Image Height="80" Grid.Column="0" Source="/Assets/book.png" Margin="0,0,5,0"></Image>
<StackPanel Grid.Column="1">
<TextBlock Text="Kitap ismi:"></TextBlock>
<TextBlock Text="Yazari:"></TextBlock>
<TextBlock Text="Sayfa sayisi:"></TextBlock>

</StackPanel>
<StackPanel Grid.Column="2">
<TextBlock Text="{Binding Ismi}" Foreground="{StaticResource PhoneSubtleBrush}"></TextBlock>
<TextBlock Text="{Binding Yazari}" Foreground="{StaticResource PhoneSubtleBrush}"></TextBlock>
<TextBlock Text="{Binding SayfaSayisi}" Foreground="{StaticResource PhoneSubtleBrush}"></TextBlock>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>

</ListBox>
</Grid>

Sadece şimdiden bir betimleme yapmak amacıyla, bizi şöyle bir görüntü bekleyecek;

  • Şimdi bir sınıf daha eklememiz gerekiyor, bu sınıf bizim DataContext’imiz olacak. Kitaplar.cs isminde bir sınıf oluşturalım ve içine List<Kitap> türünde tek bir property ekleyelim. Şunu hatırlatmakta fayda var: Bu sınıf sadece tasarım zamanı için oluşturulan örnek bir sınıf. Gerçek veri için kullanmayacağız.

 public class Kitaplar
{
private List<Kitap> kitaplar;

public List<Kitap> Kitaplar1
{
get { return kitaplar; }
set { kitaplar = value; }
}
}

Şimdi Visual Studio ile işimiz bitti, farkettiyseniz henüz DataContext veya ListBox’ın ItemSource’unu ayarlamadık.

  • Solution Explorer’da proje ismine sağ tıklayıp Open in Blend diyelim.

  • Proje Blend’de açıldıktan sonra default olarak sağ üstte yer alan Data sekmesinde yer alan Create Sample Data iconuna tıklayalım ve Create Sample Data from Class seçeneğini seçelim. Data Sekmesini görmüyorsanız sırasıyla ALT, W, D tuşlarına basın.

  • Bunu yaptıktan sonra karşımıza sınıf seçmek için bir pencere açılacak, hangi türden örnek veri üretmek istiyorsak o sınıf seçeceğiz. İşte burada sonradan oluşturduğumuz Kitaplar adındaki sınıfı seçeceğiz. ListBox’ımıza bağlayacağımız koleksiyon orada.

Gördüğünüz gibi Kitaplar sınıfını seçtim ve blend de benim için Data Source ismine ‘KitaplarSampleData’ ismini verdi. Bu adımdan sonra örnek verilerimiz hazırlanmış olacak.

Örnek verilerimiz otomatik olarak /SampleData/KitaplarSampleData.xaml‘ e çıkarıldı. Şöyle bir bakacak olursak XML verisine çok benzediğini gorecegiz.

<DesingTimeSampleData:Kitaplar xmlns:DesingTimeSampleData="clr-namespace:DesingTimeSampleData">
<DesingTimeSampleData:Kitaplar.Kitaplar1>
<DesingTimeSampleData:Kitap Ismi="Class curabitur vestibulum cras aenean" SayfaSayisi="91" Yazari="Duis curae aliquam nunc amet"/>
<DesingTimeSampleData:Kitap Ismi="Maecenas donec" SayfaSayisi="84" Yazari="Ante nam phasellus integer"/>
<DesingTimeSampleData:Kitap Ismi="Praesent quisque" SayfaSayisi="27" Yazari="Mauris arcu"/>
<DesingTimeSampleData:Kitap Ismi="Consequat nullam sed aptent" SayfaSayisi="60" Yazari="Auctor etiam"/>
<DesingTimeSampleData:Kitap Ismi="Fusce adipiscing convallis" SayfaSayisi="16" Yazari="Dis est diam accumsan vivamus"/>
<DesingTimeSampleData:Kitap Ismi="Hac congue leo cursus" SayfaSayisi="19" Yazari="Mus parturient"/>
<DesingTimeSampleData:Kitap Ismi="Lorem vestibulum" SayfaSayisi="55" Yazari="Vestibulum nec dictum"/>
<DesingTimeSampleData:Kitap Ismi="Non dignissim elementum" SayfaSayisi="16" Yazari="Bibendum per eget sed adipiscing"/>
<DesingTimeSampleData:Kitap Ismi="Dictumst parturient facilisis" SayfaSayisi="33" Yazari="Fermentum lectus fringilla"/>
<DesingTimeSampleData:Kitap Ismi="Elit habitasse morbi eleifend" SayfaSayisi="93" Yazari="Enim erat aliquam"/>
</DesingTimeSampleData:Kitaplar.Kitaplar1>
</DesingTimeSampleData:Kitaplar>

Geriye Design DataContext ve ItemsSource ayarlamaya geldi. Design DataContext sadece tasarım zamanı için bir DataContext belirler, çalışma zamanını etkilemez.

  • DataContext ayarlamak için yine Data sekmesinde yer alan Set design-time DataContext‘e tıklayacağız.

  • Tıkladıktan sonra bize DataContext kaynağı soracak, bu pencereden biraz önce oluşturduğumuz KitapSampleData.xaml‘i seçelim.

  • Ve son olarak aşağıdaki adımları yapalım;
  1. Sağ taraftan Properties tabına gelelim
  2. ListBox’ı seçip ItemsSource özelliğinin yanındaki ufak kareye tıkalyıp Create Data Binding‘i seçelim.
  3. Açılan pencereden sonradan oluşturduğumuz Kitaplar adındaki sınıfın tek Property’si olan Kitaplar1‘i seçelim.

Ve nihayet örnek verilerimizin görüntülendiğini tasarım penceresinde göreceğiz.

  

Gördüğünüz gibi yine bir Lorem Ipsum’la karşı karşıyayız 🙂

Özet: Öncelikle bağlayacağımız verinin şablonu(Model) olan Kitap.cs sınıfını oluşturduk. Daha sonra tek property’si Kitap türünde bir koleksiyon olan Kitaplar.cs sınıfını oluşturduk. Blend’den Kitaplar sınıfı için örnek veriler ürettik ve MainPage.xaml’e Design Datacontext olarak bu verileri gösterdik. Son olarak ta ListBox’ın ItemsSource özelliğine DataContext’imiz olan Kitaplar sınıfının tek property’si olan Kitap türündeki koleksiyonu bağladık.

Bu yazıda Silverlight uygulamarında tasarım aşamasında örnek veri üretmeyi inceledik. Faydalı olması dileğiyle…

DesingTimeSampleData.zip (2,7KB)

Fazlasını Oku