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ı
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....
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.
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.
Daron Yöndem