Windows 8 Hileleri #2 : FlipView ile Tab Yapısı Oluşturma

Herkesin kullanmaya alışkın olduğu yapılardan biri de Tab(Sekme)’dir.Belirli sekmelere tıklayarak içeriklere erişiriz.

Windows Phone’a uygulama geliştirirken Pivot kontrolü bunu kısmen gerçekleştirir ancak Windows 8 uygulamalarında Pivot diye bir kontrolümüz bulunmamaktadır.

Ancak hazır gelen panel kontrollerini bu amaç için kullanabiliriz: “FlipView” kontrolü gibi!

FlipView kontrolü; Gesture Manipulation(Dokunmatik aksiyonlar almamıza sağlar) yaparak Sekme yapısına uygun bir şekilde içerik saklamaya olanak sağlayan bir mekanizmaya sahiptir.

Image

Projemize; 3 button ve 1 Adet FlipView ekleyelim.FlipView’ın da 3 adet FlipViewItem’ı bulunsun:

XAML Kodu:

<FlipView Name=”flv1″ HorizontalAlignment=”Left” Margin=”120,187,0,0″ VerticalAlignment=”Top” Width=”386″ Height=”390″>

 <FlipViewItem>
  <TextBlock Text=”1 numaralı Sekme” FontSize=”24″/>
 </FlipViewItem>

 <FlipViewItem>
<TextBlock Text=”2 numaralı Sekme” FontSize=”24″/>
</FlipViewItem>

<FlipViewItem>
<TextBlock Text=”3 numaralı Sekme” FontSize=”24″/>
</FlipViewItem>
</FlipView>

<Button Name=”btn1″ Content=”1″ HorizontalAlignment=”Left” Margin=”120,144,0,0″ VerticalAlignment=”Top”/>
<Button Name=”btn2″ Content=”2″ HorizontalAlignment=”Left” Margin=”165,144,0,0″ VerticalAlignment=”Top”/>
<Button Name=”btn3″ Content=”3″ HorizontalAlignment=”Left” Margin=”213,144,0,0″ VerticalAlignment=”Top”/>

Her bir FlipViewItem ekleniş sırasına göre isimlendirilir.İlk eklenen ve “1 numaralı Sekme” yazan FlipViewItem nesnemiz daima “0” sırasını alır.Sonrakiler de birer birer artarak ilerler.

Şimdi her bir Button’a tıklandığında ilgili FlipViewItem’a gidecek kodları yazalım.Bunu yazarken FlipView’ın SelectedIndex’inden faydalanıyor olacağız.

Öneri: Her Button’un altına girip de kod yazmayın aman! Sonra proflar size “Button Altı Programcı” diye çatıverir 🙂

Bu yüzden Page_Load olayına aşağıdaki gibi Lambda Expression uygulayarak kendinizi proflardan gelecek zararlı ışınlara karşı koruyabilirsiniz:

private void Page_Loaded_1(object sender, RoutedEventArgs e)
{
btn1.Click += (c, d) => { flv1.SelectedIndex = 0; };
btn2.Click += (c, d) => { flv1.SelectedIndex = 1; };
btn3.Click += (c, d) => { flv1.SelectedIndex = 2; };
}

Button altına girip kod yazma ile bu yöntem birbirinin aynısıdır.

Projemizi çalıştırdığımızda sekme yapısını uygulamış oluruz.

 

ss

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s