Makale Özeti

Bu yazımızda Windows Phone 7 uygulamalarında kullanabileceğimiz Navigation API'nin uygulama arayüz yapısında yerine göz atıyoruz. Ayrıca bir WP7 uygulamasının arayüzünü oluşturan parçaları da inceleyeceğiz.

Makale

Bu makalemizde Windows Phone 7 içerisinde uygulama geliştirirken kullanabileceğimiz hazır gelen navigasyon sistemine göz atacağız. Fakat bunun öncesinde tavsiyem benzerliklerinden dolayı Silverlight 3.0 içerisindeki Navigation API'yi bir incelemeniz. Sonrasında WP7 tarafında devam edebiliriz.

WP7 Kullanıcı Arayüzü Yapısı
WP7 Kullanıcı Arayüzü Yapısı

Her yeni yaratılan WP7 uygulamasında root element bir PhoneApplicationFrame olarak gelir. Bu çerçeve içerisinde birden çok sayfa farklı navigasyonlarda rahatlıkla gösterilebilir. Bu yapı kendi içerisinde SystemTray ve ApplicationBar'ı da sunar. Ayrıca PhonePage olarak geçen uygulama içerisindeki her sayfa da bu Frame tarafından gösterilir. Sayfalar ile kabaca iki bölüme ayrılır. Sayfa başlığının bulunduğu Title kısmı ve sayfanın tüm iç kontrollerinin bulunacağı Content bölümü.

[XAML]

<Application

   x:Class="WindowsPhoneApplication4.App"

   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"      

   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   xmlns:system="clr-namespace:System;assembly=mscorlib"

   xmlns:mpc="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"

   xmlns:phoneNavigation="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Navigation">

 

    <!--RootFrame points to and loads the first page of your application-->

    <Application.RootVisual>

        <phoneNavigation:PhoneApplicationFrame x:Name="RootFrame" Source="/MainPage.xaml"/>

    </Application.RootVisual>

Yukarıda gördüğünüz kod herhangi bir WP7 uygulamasının App.XAML dosyasında ilk yaratıldığında bulunan kod. Kod içerisinde uygulamanın RootVisual'ı olarak bir PhoneApplicationFrame atandığını görebiliyoruz. Söz konusu PhoneApplicationFrame Microsoft.Phone.Controls.Navigation assembly'si altında Microsoft.Phone.Controls namespace'inde bulunuyor. Bahsettiğimiz namespace zaten phoneNavigation adında bir XML namespace olarak XAML dosyasında tanımlanmış durumda. PhoneAppFrame'in ilk açılıştaki Source değeri uygulama ilk açıldığında gösterilecek sayfayı yani PhoneApplicationPage'i hedefliyor. Söz konusu tanımlama XAP dosyasının iç yapısına ait bir Uri. Tam da bu noktada eğer istersek farklı UriMapping kuralları da tanımlayabiliyoruz ve buradaki Navigation API'yi aynı normal Silverlight uygulamalarında olduğu gibi kullanabiliyoruz.

[XAML]

<Application

   x:Class="WindowsPhoneApplication4.App"

   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"      

   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   xmlns:system="clr-namespace:System;assembly=mscorlib"

   xmlns:mpc="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"

   xmlns:phoneNavigation="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Navigation"

   xmlns:nav="clr-namespace:System.Windows.Navigation;assembly=Microsoft.Phone.Controls.Navigation">

 

    <!--RootFrame points to and loads the first page of your application-->

    <Application.RootVisual>

        <phoneNavigation:PhoneApplicationFrame x:Name="RootFrame" Source="/MainPage.xaml">

            <phoneNavigation:PhoneApplicationFrame.UriMapper>

                <nav:UriMapper>

                    <nav:UriMapper.UriMappings>

                        <nav:UriMapping Uri="/urun/{ID}" MappedUri="/Sayfalar/Page1.xaml?ID={ID}"/>

                    </nav:UriMapper.UriMappings>

                </nav:UriMapper>

            </phoneNavigation:PhoneApplicationFrame.UriMapper>

        </phoneNavigation:PhoneApplicationFrame>

    </Application.RootVisual>

Yukarıdaki XAML kodu içerisinde önemli birkaç nokta var. Bunlardan ilki XAML NameSpace olarak tanımladığımız nav namespace'i. NAV NameSpace'i de yine Microsoft.Phone.Controls.Navigation assembly'si içerisinde fakat bu sefer System.Windows.Navigation altında gelen sınıfları kullanmanız gerekiyor. İstediğimiz şey bizim PhoneAppFrame için bir UriMapper tanımlamak. Böylece uygulama içerisinde vereceğimiz farklı linkler doğrudan XAP dosyası içerisinde path'lere (Uri'lere) dönüşebilecek ve uygun XAML dosyası (PhoneAppPage) sahneye gerekli parametrelerle getirilebilecek.

Örneğimizde sadece bir adet mapping var. Herhangi bir şekilde /urun/1 veya /urun/2 gibi bir adrese yönlendirme yapıldığında söz konusu sondaki ID'yi alarak XAP dosyası içerisinde Sayfalar klasöründe bulunan Page1.XAML adındaki bir dosyaya ID parametresi olarak gönderiyoruz. Yazım esnasında {Degisken} şeklinde tanımladığınız her deyim aslında birer local değişken gibi davranarak sizin gelen path'den bir değeri alarak yarattığınız hedef path'e aktarmnızı sağlıyor. Bu şekilde tanımlanan Mapping'ler kullandığınız PhoneAppFrame içerisindeki tüm navigasyonlarda otomatik olarak uygulanacaktır.

Sayfalar klasörü ve içerisindeki View'lerimiz....
Sayfalar klasörü ve içerisindeki View'lerimiz....

Tabi bu noktaya kadar biz ne Sayfalar klasörü yarattık ne de içinde Page1.xaml adında bir dosya var. O nedenle şimdi gelin XAP içerisinde bir Sayfalar klasörünü yukarıdaki ekran görüntüsündeki gibi yaratalım ve içerisine de yeni bir "Windows Phone Portrait Page" ekleyelim.

Uygulamamız yeni bir Page ekliyoruz.
Uygulamamız yeni bir Page ekliyoruz.

Eklediğimiz bu sayfa bizim daha önce App.XAML içerisinde tanımladığımız UriMapper'daki kurallar sayesinde çağrılacak. Hatırlarsanız mapping kuralı içerisinde Sayfalar/Page1.xaml?ID={ID} demiştik ve {ID} yerine de mapping esnasından uygun değer yerleştirilecekti. Peki Page1.XAML nasıl olacak da bu ID değerine ulaşacak. Her zamanki gibi Navigation API ile beraber gelen sistemi kullanacağız.

[C#]

        void Page1_Loaded(object sender, RoutedEventArgs e)

        {

            ListName.Text = this.NavigationContext.QueryString["ID"].ToString();

        }

Yukarıda gördüğünüz kod Page1.XAML içerisinde gelen ID parametresini yakalamanın yolu. Normal bir ASP.NET uygulamasını QueryString almaktan pek farklı değil. Artık sayfa içerisinde gelen parametreye göre farklı bilgiler gösterebilir, işlemler yapabilirsiniz. Şimdilik örneğimizde sadece gelen ID'yi ekrana yansıtıyoruz ki test edebilelim.

Mapping sistemimiz hazır, hedef sayfamız hazır ve kendisine gelen parametreyi dinliyor. Son adım olarak ana sayfada bu hedef sayfaya link vermek kaldı.

[XAML]

<Grid x:Name="ContentGrid" Grid.Row="1">

    <HyperlinkButton Content="HyperlinkButton"

                            Height="30" HorizontalAlignment="Left"

                            Margin="230,217,0,0" Name="hyperlinkButton1"

                            VerticalAlignment="Top" Width="200"

                            NavigateUri="/urun/1"/>

</Grid>

Kodumuzda basit bir HyperlinkButton kullanarak tek yapmamız gereken NavigateUri özelliğine istediğimiz Uri'yi vermek. Örneğimizde /Urun/1 adresini verdiğimiz bu adres UriMapper tarafından /Sayfalar/Page1.xaml?ID=1 şekline çevrilecek ve uygulama ekranında Page1.XAML'ı 1 ID değerini almış olarak göreceğiz. Eğer bu yönlendirme işlemini doğrudan bir kod ile yapmak isterseniz aşağıdaki gibi yine NavigationService üzerinden Navigate metodunu kullanarak Frame'i yönlendirebilirsiniz.

[C#]

        private void button1_Click(object sender, RoutedEventArgs e)

        {

            this.NavigationService.Navigate(new Uri("/urun/2", UriKind.Relative));

        }

Hepinize kolay gelsin.