İlkay İlknur

just a developer...

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

Merhaba Arkadaşlar,

Bu yazımızda da Windows 8 data kontrollerine devam ediyoruz ve yepyeni bir kontrolü inceliyoruz. :) Bu yazımızda inceleyeceğimiz kontrol FlipView kontrolü. FlipView kontrolü Windows 8 içerisinde bulunan ve daha önce diğer platformlarda da bu konseptte karşılaşmadığımız bir kontrol. Daha doğrusunu söylemek gerekirse diğer ortamlarda benzer fonksiyonaliteyi kendi yazdığımız custom kontrollerle yapabiliyorken Windows 8 üzerinde ise FlipView kontrolü ile bu fonksiyonaliteyi ve kullanıcı deneyimini hemen hızlıca implemente edebiliyoruz. FlipView kontrolü aslında Windows 8 içerisinde sıklıkla karşılaştığımız bir kontrol. Hemen ufak bir örnek vermemiz gerekirse Store içerisinde bulunan uygulamaların screenshotlarının gösterildiği kontrolün FlipView kontrolü olduğunu söyleyebiliriz..

Kontrol aslında basit olarak içerisinde bulunan itemları sırayla göstermekte. Eğer dokunmatik bir Windows 8 cihaz üzerinde çalıştırıyorsanız da resimde görmüş olduğunuz sağ ve sol ok tuşları yerine doğrudan dokunmatik olarak sağa ve sola doğru parmağınızı hareket ettirerek itemlar içerisinde gezebiliyorsunuz. Eğer siz de bu şekilde bir kullanıcı deneyimini uygulamanıza katmak istiyorsanız başvuracağınız kontrol FlipView kontrolü :)

Gerekli tanıtımı yaptıktan sonra şimdi gelelim uygulama kısmına. Hemen yeni bir Windows 8 Metro Style Application yaratıyoruz ve sahnenin ortasına bir FlipView kontrolü yerleştiriyoruz.

[sourcecode lang="xml"] <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <FlipView x:Name="foodFlip" Margin="188,150,200,58"/> </Grid> [/sourcecode]

FlipView kontrolünün içerisinde daha önceki yazılarımızdaki örneklerimizde de kullandığımız gibi FoodService web service'i üzerinden bize dönen yemeklerin bilgilerini gösteriyor olacağız. Bu bilgiler de basit olarak yemeğin fotoğrafı ve yemeğin adı olacak. Bu şekilde bir gösterim elde etmek için önceki yazılarımızdan da hatırlayacağımız üzere FlipView kontrolüne içerisindeki itemları nasıl göstermesi gerektiğini ayrıca belirtmemiz gerekmekte. Bunu da hatırlayacağımız üzere templating yapısı ile gerçekleştirebiliyoruz.

Template yaratma kısmına geçmeden önce, eğer FlipView içerisinde bağladığınız nesnenin sadece 1 propertysini göstermek istiyorsanız yine alışkın olduğumuz DisplayMemberPath ve SelectedValuePath propertylerini kullanarak ilgili propertyleri  bu şekilde XAML üzerinden set edip ilerleyebilirsiniz. Ancak FlipView içerisinde sadece text göstermek ne derece uygun ve başarılı bir görünüm oluşturur orası artık size kalmış ;)

Evet şimdi gelelim templating kısmına. FlipView kontrolüne içerisinde bulunan nesneleri nasıl göstereceğini bildirecektik. Bunun için FlipView kontrolü içerisinde bir ItemTemplate yaratıyor olacağız. Ancak öncelikle FlipView kontrolüne bağlayacağımız Food tipimizin içerisinde bulunan alanları hatırlayalım.

[sourcecode lang="csharp"] [DataContract] public class Food { [DataMember] public string FoodName { get; set; } [DataMember] public decimal Price { get; set; } [DataMember] public string ImageUrl { get; set; } } [/sourcecode] ItemTemplate yaratma kısmında yine Blend üzerinden ilerliyor olacağız. Ancak daha önceden de bahsettiğim gibi aynı olanaklar Visual Studio 2012 içerisinde de mevcut. ;)

Yaratacağımız ItemTemplate oldukça basit olacak. Arka planda yemeğin resmi bulunacak ve resmin alt kısmında da yemeğin ismi yazıyor olacak.

[sourcecode lang="xml"] <Page.Resources> <DataTemplate x:Key="FoodTemplate"> <Grid d:DesignWidth="640.896" d:DesignHeight="381.194"> <Image Source="{Binding ImageUrl}" Stretch="UniformToFill"/> <Border BorderBrush="Black" BorderThickness="1" Margin="0" Background="Black" Opacity="0.55" VerticalAlignment="Bottom" Height="60"> <TextBlock HorizontalAlignment="Left" Margin="7.502,5.014,0,0" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="26.667" Text="{Binding FoodName}" FontFamily="Segoe UI Semibold"/> </Border> </Grid> </DataTemplate> </Page.Resources> [/sourcecode]

ItemTemplate'ımızı yarattıktan sonra sıra geldi FlipView kontrolümüze içerisindeki itemları yarattığımız templatetaki gibi göstereceğini bildirme kısmına. Bunu da XAML içerisinden hızlı bir şekilde FlipView içerisinde bulunan ItemTemplate alanına yaratmış olduğumuz template'ı vererek gerçekleştirebiliriz.

[sourcecode lang="xml"] <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <FlipView x:Name="flip" ItemTemplate="{StaticResource FoodTemplate}" Margin="188,150,200,58"/> </Grid> [/sourcecode]

Uygulamamızın UI kısmını bitirdik. Son olarak ise C# tarafından yemek listelerinin döndüğü servisi çağıracağız ve dönen listeyi FlipView kontrolünün ItemsSource propertysine vereceğiz.

[sourcecode lang="csharp"] protected async override void OnNavigatedTo(NavigationEventArgs e) { FoodService.ServiceClient client = new FoodService.ServiceClient(); flip.ItemsSource = await client.GetFoodsAsync(); } [/sourcecode]

Evet. Yapacaklarımız bu kadar. :) Aslında önceki yazılarımızı da okuduysanız yaptığımız herşey size oldukça tanıdık gelecektir. Bu da bize Windows 8 üzerindeki uygulama geliştirme deneyiminin ne denli başarılı olduğunun bir göstergesidir. Şimdi yaptığımız uygulamayı çalıştıralım ve yaptıklarımızı görelim.

Gördüğünüz gibi yemeklerimizi FlipView içerisinde belirlediğimiz template'a uygun olarak gösterebiliyoruz. Böylece kullanıcı hızlı bir şekilde yemek listesi üzerinde gezebiliyor. Bu şekilde bir kullanımı bir de dokunmatik cihaz kullanarak kullanıcıya sunarsanız elde ettiğiniz kullanıcı deneyimi ve harcadığınız efor oranının ne kadar müthiş seviyelerde olacağını tahmin edebiliyorsunuzdur ;)

Dikey FlipView :)

Yukarıdaki örneğimizde FlipView içerisindeki kontrolü içerisindeki itemları sağdan sola veya soldan sağa doğru gezebiliyorduk. Peki ya aşağıdan yukarıya yada yukarıdan aşağıya gezmek istersek ne yapmamız gerekir ? :)

Aslında yapmamız gereken şey oldukça basit. FlipView içerisinde bulunan itemları yatay olarak değil de dikey olarak dizeceğiz ;) Peki bunu nasıl yapacağız ? Gelin FlipView içerisinde bulunan templatelara bir kez daha bakalım :)

ItemsPanel bize ordan göz kırpıyor gibi :) Aslında adından da anlayacağımız gibi itemları içerisinde barındıran bir container. Hemen "Create Empty" diyerek bir örnek alalım.

Şimdi ekranda görünen kısımları sırayla inceleyelim. Öncelikle "Create Empty" tuşuna bastığımızda Blend bize bir template yarattı. Bu templatta da gördüğümüz üzere FlipView kontrolü içerisinde itemlar aslında StackPanel'in özelleşmiş bir versiyonu olan VirtualizingStackPanel içerisinde bulunuyorlarmış.

Peki StackPanel isminin başına Virtualizing kelimesi gelince StackPanel nasıl bir yetenek kazanıyor ? Virtualizing kavramı bize aslında genel olarak performans konusunda oldukça fayda sağlamakta. Çünkü virtualizing demek daha az kaynak kullanımı demek. Kaynakları gerektikçe kullanmak demek. Örneğin FlipView içerisindeki itemların belki de en sonunda bulunan itema kullanıcı hiçbir zaman ulaşmayacak. Bu nedenle bu itemin içerisinde bulunan resmi gidip indirmenin de bir anlamı yok. Bu nedenle virtualizing kavramını kullanarak aslında sadece o anda ihtiyaç duyulan kaynaklara erişebilirsiniz.

Evet ana konumuza geri dönersek sağ kısımda da göreceğiniz üzere StackPanel'in Orientation'ı default olarak Horizontal  set edilmiş. Bu da demek oluyor ki içerisinde bulunan elemanlar yan yana dizilecek. Biz demek ki bu değeri Vertical'a çekerek içerisindeki elemanların alt alta dizilmesini sağlayabiliriz. Bu işlemi de yaptıktan sonra sayfamızın XAML kodu şu şekilde olmakta.

[sourcecode lang="xml"] <Page.Resources> <DataTemplate x:Key="FoodTemplate"> <Grid d:DesignWidth="640.896" d:DesignHeight="381.194"> <Image Source="{Binding ImageUrl}" Stretch="UniformToFill"/> <Border BorderBrush="Black" BorderThickness="1" Margin="0" Background="Black" Opacity="0.55" VerticalAlignment="Bottom" Height="60"> <TextBlock HorizontalAlignment="Left" Margin="7.502,5.014,0,0" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="26.667" Text="{Binding FoodName}" FontFamily="Segoe UI Semibold"/> </Border> </Grid> </DataTemplate> <ItemsPanelTemplate x:Key="ItemsPanelTemplate2"> <VirtualizingStackPanel Orientation="Vertical"/> </ItemsPanelTemplate> </Page.Resources> <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <FlipView x:Name="flip" ItemTemplate="{StaticResource FoodTemplate}" Margin="188,150,200,58" ItemsPanel="{StaticResource ItemsPanelTemplate2}"/> </Grid> [/sourcecode]

Şimdi uygulamamızı yeniden çalıştıralım ve değişiklere bakalım :)

Gördüğünüz gibi FlipView içerisinde elemanlar aşağıdan yukarıya doğru oluştu ve FlipView kontrolü de bunu algılayıp aşağı ve yukarı oklarını kendisi otomatik olarak yerleştirdi. ;)

Bu yazımızda Windows 8 ile beraber gelen yepyeni FlipView kontrolünü inceledik. Umarım faydalı olmuştur.

Görüşmek Üzere,



Yorum Gönder


Yorumlar

  • profile

    burak selim şenyurt

    • 16
    • 7
    • 2012

    Süper bir kontrolmüş. Buna bir de Kinect desteği eklenirse ve akıllı televizyonlar üzerinden de kullanılabilir hale gelirse artık geleceğin anneleri yemek tariflerine mutfaklarındaki mini HD tv' lerden bakarlar diye düşünüyorum :) PS: Hocam tam öğle yemeğinden sonra acıktığım bir arada okudum yazını. Baş edebildiğim açlığım fotoğrafların sayesinde yerler altında :P