Navigation - Navigasyon

Kullanıcıların Metro Style uygulamalarında kolay bir şekilde kullanabilmeleri ve sayfalar arası geçişleri daha sezgizel bir şekilde yapabilmeleri için geliştirilmiş bir yöntemdir. Bu özellik sayesinde kullanıcılar içeriklere daha güncel bir şekilde odaklanarak ulaşabileceklerdir. Hiyerarşik sistem (Hierarchical system)

Windows 8 Release Preview de ki çoğu metro style uygulamaları navigasyonda hiyerarşik sistemi kullanacaklardır. Bu desen daha çok yaygın ve kullanıcılar tarafından tanıdık gelen bir desendir. Fakat Hub navigasyon deseninden daha iyi bir yapıya sahiptir. Hala kullanımı kolay olan bu desen, Metro uygulamalarını hızlı ve akıcı hale getirir.     Hiyerarşinin Katmanları (Hierarchical system)

Yatay Sistem (Flat System)

Windows 8 Metro Style uygulamalarında navigasyonlar yatay bir sistem kullanmaktadırlar. Bu sayfa tasarımı genellikle kullanıcıların dolaştıkları sayfalar veya sekmeler arası geçişlerde kullanılmaktadır.    

Navigasyon Uygulaması

Öncelikle Visual Studio 2012 RC’yi açıyoruz. File -> New -> Project lokasyonunu kullanarak Visual Studio’da yeni bir proje oluşturuyoruz.

          Açılan New Project penceresinde önce sol tarafta Template içerisinde ki Visual C# menüsünün altında bulunan Windows Metro Style’ı seçiyoruz. Ardından sağ tarafta bulunan listeden Blank App (XAML)’i seçiyoruz. Projemizin ismini NavigasyonUygulamasi olarak belirliyoruz. OK butonu ile projemizi oluşturuyoruz.

        Buradan sol taraftan Visual C# seçilerek yan tarafta açılan listeden Blank Page’i seçeriz. Projenin ismini HosgeldinSayfasi.Xaml olarak belirleriz.

                        Böylelikle Solution Explorer penceresinden baktığımızda iki tane sayfamızın olduğunu görebiliyoruz.

                        Uygulamamızda MainPage.Xaml yardımıyla kullanıcıdan ismi bir textbox yardımı ile alınacaktır. Butona tıklanıldığında ikinci sayfa olan HosgeldinSayfasi.Xaml ‘e gelecektir. Bu Sayfada Navigation yardımı ile kullanıcıdan ilk sayfada TextBox’tan alınan ismi ikinci sayfada TextBlock’a aktaracaktır. Ve ikinci sayfada bir adet kullanıcının geri dönüş yapabilmesi için buton bulunmaktadır. MainPage.Xaml sayfasının Design (Tasarım) kodlarını isterseniz properties penceresinden yapabilirsiniz. Dilersenizde Xaml sayfadından da kodlarla tasarımınızı oluşturabilirsiniz.

                      Xaml Kodları aşağıdaki gibidir;

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <TextBlock HorizontalAlignment="Left" Height="26" Margin="17,16,0,0" TextWrapping="Wrap" Text="Lütfen Adınızı Giriniz..." VerticalAlignment="Top" Width="163" FontSize="15"/>

        <TextBox x:Name="TxtVeriAl" HorizontalAlignment="Left" Height="17" Margin="185,16,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="262"/>

        <Button x:Name="BtnGirisYap" Content="Giriş Yapınız..." HorizontalAlignment="Left" Height="42" Margin="185,53,0,0" VerticalAlignment="Top" Width="262" Click="BtnGirisYap_Click"/>

    </Grid>

ikinci sayfanın tasarımı aşağıdadır ;

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <TextBlock x:Name="TxtBlk_IsimAL" HorizontalAlignment="Left" Height="25" Margin="19,18,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Width="329" FontSize="15"/>

        <TextBlock HorizontalAlignment="Left" Height="25" Margin="19,48,0,0" TextWrapping="Wrap" Text="Sisteme Hoş Geldiniz..." VerticalAlignment="Top" Width="329" FontSize="15"/>

        <Button Content="Ana Sayfaya Geri Dön..." HorizontalAlignment="Left" Height="39" Margin="19,73,0,0" VerticalAlignment="Top" Width="329" Click="Button_Click_1"/>

MainPage.Xaml’de butona tıkladığımızda gerçekleşecek navigasyon olayını gerçekleştirebilmemiz için öncelikle kullanıcıdan ismi alabileceğimiz bir değişken tanımlarız. Bu değişken içerisinde TextBox’ın içerisine girilecek olan veriyi Button’un Click Event’ında alırız.

  Sonrasında ise bu sayfadan belirtiğim sayfaya ulaşabilmesi için navigation komutuna aldığım veriyi tanıtırım. using System; using System.Collections.Generic; using System.IO; using System.Linq; using Windows.Foundation; using Windows.Foundation.Collections; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Controls.Primitives; using Windows.UI.Xaml.Data; using Windows.UI.Xaml.Input; using Windows.UI.Xaml.Media; using Windows.UI.Xaml.Navigation; namespace NavigasyonUygulamasi { public sealed partial class MainPage : Page { string IsimAl; public MainPage() { this.InitializeComponent(); } protected override void OnNavigatedTo(NavigationEventArgs e) { } private void BtnGirisYap_Click(object sender, RoutedEventArgs e) { IsimAl = TxtVeriAl.Text; this.Frame.Navigate(typeof(HosgeldinSayfasi), IsimAl); } } } Sıra geldi hoşgeldin sayfasında kullanacağımız komutlara. MainPage.Xaml sayfasında navigasyon yöntemiyle aldığımız veriyi bu sayfada okutabilmemiz için sayfanın OnNavigatedTo metodunu kullanmamız gerekiyor. NavigationEventArgs ile verilere erişeceğiz. NavigationEventArgs’dan gelen parametreyi string olarak okutup bunu sayfadaki ilgili TextBox’a aktarıyoruz. Ana sayfaya geri dönüş butonunun click olayına ise yine gideceği sayfayı belirtmiş oluyoruz. using System; using System.Collections.Generic; using System.IO; using System.Linq; using Windows.Foundation; using Windows.Foundation.Collections; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Controls.Primitives; using Windows.UI.Xaml.Data; using Windows.UI.Xaml.Input; using Windows.UI.Xaml.Media; using Windows.UI.Xaml.Navigation; namespace NavigasyonUygulamasi { public sealed partial class HosgeldinSayfasi : Page { public HosgeldinSayfasi() { this.InitializeComponent(); } protected override void OnNavigatedTo(NavigationEventArgs e) { var IsimYazdir = e.Parameter as string; TxtBlk_IsimAL.Text = IsimYazdir; } private void Button_Click_1(object sender, RoutedEventArgs e) { this.Frame.Navigate(typeof(MainPage)); } } } Uygulama tamamlandığında sayfalar arası geçiş yani Navigation olayını gerçekleştirmiş olacaksınız. Keyifli Çalışmalar Dilerim.