Windows 8 Hileleri #4 : Görünüm Moduna göre uygulama geliştirme

Windows 8 kullananlar iyi bilirler.Bir Windows 8 uygulamasını kenarda çalıştırırken ana ekranda farklı bir iş yapabilirler:

ekran

Uygulamaların köşelerde açılmasına İngilizce tabirle “Snapped View” demekteyiz.Siz de uygulamalarınızı geliştirirken,Snapped View desteği sağlamalısınız ki zaten Marketplace kurallarından biridir aynı zamanda.

Peki uygulamanın farklı görünümlere geçip geçmediğini nasıl anlarsınız?

Çok Kolay! Page_SizeChanged olayı sayesinde görünümleri yakalayabiliriz.

Örnek olarak projemize ayrıca bir sayfa eklediğimizi düşünelim.Amacımız görünümleri 2 farklı sayfaya bölerek; Tam Ekran görünümde varsayılan anasayfamız hangisiyse(MainPage) ve Snapped Görünümde’de farklı bir sayfanın(SnappedPage) görüntülenmesini sağlamaktır.

Ardından bir adet SnappedPage’e geri dönüş kodu ekleyelim ki Snapped görünümden vazgeçersek anasayfaya yönlenelim:

public void Getback()
{
  var rootFrame = new Frame();
     rootFrame.Navigate(typeof(MainPage));
Window.Current.Content = rootFrame;
Window.Current.Activate();
}
Ve son olarak MainPage.xaml’in en üst elementi olan Page’e girip Page_SizeChanged olayına bu günlük yazımızın hilesine ait kodları girin:

private void Page_SizeChanged_1(object sender, SizeChangedEventArgs e)
{

   ApplicationViewState myViewState = ApplicationView.Value;

if (myViewState == ApplicationViewState.Snapped)
 {
var rootFrame = new Frame();
   rootFrame.Navigate(typeof(SnappedPage));
Window.Current.Content = rootFrame;
Window.Current.Activate();
} 
}

Tabi benzer bir yapıyı SnappedPage’de de uygulamanız gerekebilir.Onun da kodu benzer şekilde olacaktır:

private void Page_SizeChanged_1(object sender, Windows.UI.Xaml.SizeChangedEventArgs e)
{
ApplicationViewState myViewState = ApplicationView.Value;

if (myViewState != ApplicationViewState.Snapped)
{
Getback();
}

}

Eğer tam ekran görünüm değişirse,SnappedPage’e yönlendirerek farklı bir sayfada görünüme yönelik ekran tasarlayacağımızı bildiriyoruz.Bu kodu kullanarak farklı görünümleri de destekleyecek uygulamaları geliştirebilirsiniz.

Bu aynı zamanda bir Marketplace kuralı olduğundan ötürü de bu yazıyı “Problem ve Çözümü” olarak kategorilemek  mümkündür.

Advertisements

Windows 8 Hileleri #3 : Navigasyon

Uygulamanızdan farklı sayfalara geçiş yapmak istiyorsunuz diyelim.Windows Phone’da NavigationService’i kullanırken,Windows 8 Uygulamalarınızda durum değişiktir.Çünkü Sayfalara(Page) değil de Frame’lere navigasyon uygulayabilirsiniz.

Bu durumu biraz özetleyelim.Frame’ler aslında Page yapısına bağlı readonly özelliklerdir.Navigasyon işlemleri Frame’ler vasıtasıyla yapılır ve aslında Navigasyon yaparken sayfayı değil o sayfalara ait Frame’leri çağırmaktasınızdır.

Örneğin;

var
rootFrame = new Frame();
rootFrame.Navigate(typeof(MainPage));
Window.Current.Content = rootFrame;
Window.Current.Activate();

tarzında yazacağımız bir kod’da,yeni bir frame nesnesi oluşturup MainPage’in Frame değerine navigasyon sağlıyor ve Windows 8 uygulamasından oluşturduğumuz frame nesnesini ve dolayısıyla da MainPage’i görüntülemiş oluyoruz.Ardından Activate methoduyla aktif hale getirerek, ekranın Content değerine atanan frame’i göstermesini belirtmiş oluyoruz.

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

Windows 8 Hileleri #1 : Tema Değiştirme

Windows 8 Geliştirme yaparken Device penceresinden Light Tema’yı seçersek,Light Tema’ya göre çalışacak ekran tasarlayacağımızı belirtmiş oluruz.

Ancak uygulamamızı çalıştırdığımız vakit,varsayılan(Dark Tema) aktif hale gelecektir.Bunu önlemenin en rahat yolu.App.xaml.cs veya App.xaml.vb’de aşağıdaki kod satırını eklemek olacaktır:

public App()
{
  this.InitializeComponent();
 
this.Suspending += OnSuspending;

 //Light Tema’ya göre tasarım yapıyorsanız
  
this.RequestedTheme = ApplicationTheme.Light;

  //Dark Tema’ya göre tasarım yapıyorsanız
   
this.RequestedTheme = ApplicationTheme.Dark;

}