İlkay İlknur

just a developer...

Windows 8 Metro Style Uygulamalarda ListView Kontrolü - C# & XAML

Merhaba Arkadaşlar,

Bir data-driven uygulama geliştirdiğimizde en çok ihtiyaç duyacağımız kontroller, hiç şüphesiz ki listeleme kontrolleri olmakta. Geçtiğimiz yazılarda da Windows 8 içerisinde en sık kullanılan listeleme kontrollerinden olan GridView kontrolünü incelemiştik. Özellikle WPF, Windows Phone, Silverlight ile development yapıyorsanız bu platformlarda  sıklıkla kullandığımız ListBox kontrolünün Windows 8 tarafında bir karşılığı olup olmadığını merak ettiğinizi düşünüyorum :)

Windows 8 tarafında ListBox kontrolünün karşılığı aslında adından da anlayabileceğimiz gibi ListView kontrolü. ListView temel olarak içerisindeki nesneleri yatay veya dikey olarak listeleme özelliğine sahip bir kontrol. Bunun yanında kullanım olarak ta aslında mevcut WPF, Windows Phone, Silverlight eşlenikleriyle hemen hemen benzer bir kullanıma sahip.

Şimdi isterseniz basitçe bir örnek yapalım ve uygulamalı olarak ListView kontrolünün kullanımını inceleyelim.

Örnek uygulama olarak basitçe bir master - detail listeleme uygulaması yapıyor olacağız ve önceki yazılarımızda kullandığımız  FoodService servisini kullanıyor olacağız.

Şimdi ilk olarak yemek kategorilerini listeleyeceğimiz bir ListView kontrolü alalım ve sahneye yerleştirelim.

[sourcecode lang="xml"] <StackPanel Background="{StaticResource ApplicationPageBackgroundThemeBrush}" Orientation="Horizontal"> <ListView x:Name="lstCategories" HorizontalAlignment="Left" Height="710" Margin="90,48,0,0" VerticalAlignment="Top" Width="426" Background="White" Foreground="Black" FontSize="21.333"/> </StackPanel> [/sourcecode]

Yemek kategorilerini listeleyeceğimiz bu ListView kontrolünde basit olarak sadece yemek kategorisinin adını göstereceğiz. Bunun için de zaten listbox tarafından aşina olduğumuz DisplayMemberPath propertysine bağlayacağımız tip içerisindeki ilgili propertynin ismini atayacağız. Tabi öncelikle servisten bize dönen FoodCategory tipinin içeriğini bir hatırlayalım.

[sourcecode lang="csharp"] [DataContract] public class FoodCategory { [DataMember] public string CategoryName { get; set; } [DataMember] public List<Food> Foods { get; set; } } [/sourcecode]

Tipimiz içerisindeki CategoryName propertysi kategorinin ismini tuttuğundan bu propertynin ismini DisplayMemberPath'e  vereceğiz.

[sourcecode lang="xml"] <StackPanel Background="{StaticResource ApplicationPageBackgroundThemeBrush}" Orientation="Horizontal"> <ListView x:Name="lstCategories" HorizontalAlignment="Left" Height="710" Margin="90,48,0,0" VerticalAlignment="Top" Width="426" DisplayMemberPath="CategoryName" Background="White" Foreground="Black" FontSize="21.333"/> </StackPanel> [/sourcecode] Son olarak ise lstCategories isimli listView'ın ItemsSource'una web servisten dönen yemek listesini veriyoruz. [sourcecode lang="csharp"] protected async override void OnNavigatedTo(NavigationEventArgs e) { FoodService.ServiceClient client = new FoodService.ServiceClient(); ObservableCollection<FoodCategory> foodList = await client.GetFoodsAsync(); lstCategories.ItemsSource = foodList; } [/sourcecode]

Evet uygulamamızın ilk ve kolay kısmını bitirdik. Şimdi isterseniz uygulamamızı çalıştıralım ve kategorilerin nasıl listelendiğini bir görelim.

Şimdi sıra geldi kategorilerin listelendiği listboxta bir kategoriye tıklandığında başka bir listbox içerisinde o kategori içerisinde bulunan yemekleri gösterme kısmına. Bunun için öncelikle sahneye bir ListView kontrolü koyacağız ve listView kontrolünün ItemSource'una da Element Binding yöntemiyle kategori listesinden seçilen Item'ın içerisindeki Foods isimli listeyi vereceğiz. Böylece dekleratif biçimde bu bağlama işlemini hızlıca yapıp geçeceğiz. :)

[sourcecode lang="xml"] <StackPanel Background="{StaticResource ApplicationPageBackgroundThemeBrush}" Orientation="Horizontal"> <ListView x:Name="lstCategories" HorizontalAlignment="Left" Height="710" Margin="90,48,0,0" VerticalAlignment="Top" Width="426" DisplayMemberPath="CategoryName" Background="White" Foreground="Black" FontSize="21.333"/> <ListView x:Name="lstFoods" HorizontalAlignment="Left" Height="710" Margin="70,48,0,0" VerticalAlignment="Top" Width="525" Background="White" Foreground="Black" ItemsSource="{Binding SelectedItem.Foods, ElementName=lstCategories}"/> </StackPanel> [/sourcecode]

Şimdi sıra geldi listView içerisindeki yemekleri nasıl listeleyeceğimize. Bunun için daha önce GridView kontrolünde gördüğümüz gibi ve diğer platformlardan da bildiğimiz üzere ListView içerisinde bir ItemTemplate yaratacağız ve daha sonra ListView kontrolüne içerisindeki itemları yarattığımız template ile göstermesini bildireceğiz. Şimdi ilk olarak ListView içerisinde bir ItemTemplate yaratalım.

ItemTemplate'tımız ise basitçe yemeğin fotoğrafını, adını ve fiyatını içerecek.

[sourcecode lang="xml"] <DataTemplate x:Key="FoodTemplate"> <StackPanel d:DesignWidth="878" d:DesignHeight="764" Orientation="Horizontal"> <Image HorizontalAlignment="Left" Height="127" Margin="10,0,0,0" VerticalAlignment="Top" Width="155" Stretch="UniformToFill" Source="{Binding ImageUrl}"/> <StackPanel Orientation="Vertical"> <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="21.333" Text="{Binding FoodName}" Foreground="Black"/> <StackPanel Orientation="Horizontal"> <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="21.333" Text="{Binding Price}" Foreground="Black"/> <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="21.333" Text="TL" Margin="10,0,0,0" Foreground="Black"/> </StackPanel> </StackPanel> </StackPanel> </DataTemplate> [/sourcecode] Son olarak ise ListView kontrolüne itemları, hazırlamış olduğumuz ItemTemplate'ı kullanarak göstermesi gerektiğini bildiriyoruz. [sourcecode lang="xml"] <ListView x:Name="lstFoods" HorizontalAlignment="Left" Height="710" Margin="70,48,0,0" VerticalAlignment="Top" Width="525" Background="White" Foreground="Black" ItemTemplate="{StaticResource FoodTemplate}" ItemsSource="{Binding SelectedItem.Foods, ElementName=lstCategories}"/> [/sourcecode] Evet herşey bu kadar :) Şimdi uygulamamızı çalıştıralım ve geliştirdiğimiz uygulamayı görelim.

Gördüğünüz gibi solda bulunan kategori listesinde seçtiğimiz kategoriyi değiştirdiğimizde yapmış olduğumuz binding sayesinde otomatik olarak sağdaki listView'ın ItemsSource değeri değişiyor ve ilgili yemekler sağdaki listView kontrolünde görüntülenebiliyor. ;)

İlerleyen yazılarımızda da Windows 8 içerisindeki data kontrollerini işlemeye devam ediyor olacağız ve bir sonraki yazımızda Windows 8 ile beraber gelen yeni bir kontrolü inceliyor olacağız. ;)

Görüşmek Üzere



Yorum Gönder