Windows Phone 7 ile beraber gelen uygulama için navigasyon sistemlerinin bir
parçası da işletim sisteminin sunduğu menü altyapısı. Bu konuda radikal bir
değişikliğe giden Microsoft artık işletim sistemin ekranının altında veya
üstünde (fiziksel düğmelere en yakın kısımda) bir bar göstererek söz konusu bar
üzerinden komutları sunuyor. Eskiden olduğu gibi uygulamaların alt kısımda iki
düğme bulunarak bu düğmelere basıldığında da açılan uzun kısmi menülere artık
yer yok.
WP7'de navigasyon menüleri...
Yukarıda gördüğünüz sistemde üst kısımda gördüğünüz dört düğme sürekli olarak
gözüken düğmeler oluyor ve ApplicationBarIconButton sınıfı ile
yaratılıyor. Bu düğmeler bir ApplicationBar'ın parçaları
arasında. Ayrıca isterseni ApplicationBar'lara ek olarak
ApplicationBarMenuItem da ekleyebiliyorsunuz. MenuItem'lar normalde
gözükmüyor fakat BarIconButton'ların listesinin yanında yer alan üç noktaya
tıkladığınızda MenuItem'lar da sahneye geliyor ve kullanılabiliyor. Duruma göre
uygulamanızın istediğiniz ekranına istediğiniz ApplicationBar'ı yaratabilir ve
duruma göre IconButton ve MenuItem'ları beraber veya ayrı ayrı
kullanabilirsiniz.
ApplicationBar'lar ekran başına yani PhoneApplicationPage başına
yaratılabilse de genelde merkezi bir yerde tutup birden çok ekranda kullanmak
daha mantıklı olabilir böylece bar arkasındaki navigasyon vs kodları da
Navigation API'yi kullanıyorsa rahatlıkla uygulama içerisinde tek bir merkezi
bar ile gezilebilmesini sağlayabilirsiniz. Örnek projemizde de yaratacağımız
barı App.XAML içerisine koyarak merkezi hale getireceğiz, böylece barımızı tüm
Page'lerde kullanma şansımız olacak.
[XAML]
<Application
x:Class="WindowsPhoneApplication5.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:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone.Shell"
xmlns:phoneNavigation="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Navigation">
<Application.RootVisual>
<phoneNavigation:PhoneApplicationFrame x:Name="RootFrame" Source="/MainPage.xaml"/>
</Application.RootVisual>
<Application.Resources>
<shell:ApplicationBar x:Key="MainAppBar" Visible="True">
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="Gel de tıklama..." Click="MenuTiklandi" />
</shell:ApplicationBar.MenuItems>
<shell:ApplicationBar.Buttons>
<shell:ApplicationBarIconButton IconUri="1.png" Click="IconDugmeTiklandi" />
<shell:ApplicationBarIconButton IconUri="2.png" Click="IconDugmeTiklandi" />
<shell:ApplicationBarIconButton IconUri="3.png" Click="IconDugmeTiklandi" />
<shell:ApplicationBarIconButton IconUri="4.png" Click="IconDugmeTiklandi" />
</shell:ApplicationBar.Buttons>
</shell:ApplicationBar>
Yukarıdaki gördüğünüz ApplicatioBar implementasyonu yapılmış bir App.XAML
dosyası. ApplicationBar ve diğer kullanacağımız sınıflar Microsoft.Phone.Shell
altında tanımlı olduğu için söz konusu assembly'i projemize referans olarak
eklememiz sonrasında da XAML dosyası içerisinde özel bir namespace tanımlayarak
import etmiş olmamız gerek. Kodun en üst kısmında kalın olarak göreceğiniz
kısımda tam da bu işlemi yapıyoruz. Sonrasında sıra geliyor artık menümüz
içerisinde düğmelere ve komutlara karar vermeye. Şimdilik deneme amaçlı olarak
üst parafraglarda görselini gördüğümüz menüyü tanımlamak için dört adet
IconButton ve bir tane de MenuItem yaratabiliriz. MenuItem'lar Text alırken
IconButton'lara ise birer PNG dosya verebilirsiniz. Unutmayın PNG'lerinizi
projenize ekledikten sonra Build Action olarak Content
seçmeniz gerekecek. Son olarak Click eventlarını de bağlayarak kod tarafına
geçebiliriz.
[C#]
private void IconDugmeTiklandi(object sender, EventArgs e)
{
((PhoneApplicationFrame)Application.Current.RootVisual).Navigate(new Uri("/OrnekSayfa.xaml", UriKind.Relative));
}
private void MenuTiklandi(object sender, EventArgs e)
{
((PhoneApplicationFrame)Application.Current.RootVisual).Navigate(new Uri("/OrnekSayfa2.xaml", UriKind.Relative));
}
Örneğimizin basitliğini korumak adına projemizde iki adet OrnekSayfa.xaml ve
OrnekSayfa2.xaml adında Page olduğunu varsayalım ve IconButton'lardan herhangi
birine basıldığında sayfalardan birine MenuItem'a basıldığında da diğerine
yönlendirelim. Gördüğünüz üzere kod aslında olabildiğince basit. Navigation
API'ye App.xaml içerisinden ulaşabilmek için uygulamanın RootVisual'ını
buluyoruz ki o da zaten bizim PhoneApplicationFrame. Böylece
AppFrame üzerinden de rahatlıkla Navigate metodunu
çağırabiliyoruz.
Sıra geldi bu menüyü istediğimiz Page'lerle ilişkili hale getirmeye. Böylece
söz konusu Page'ler uygulamada gösterilirken bu menü de ekrana gelecek.
[XAML]
<phoneNavigation:PhoneApplicationPage
x:Class="WindowsPhoneApplication5.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phoneNavigation="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Navigation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
ApplicationBar="{StaticResource MainAppBar}">
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">
Yukarıda gördüğünüz XAML kodu herhangi bir ApplicationPage'in kodu olabilir.
Önemli olan App.xaml içerisinde aslında Resource olarak tanımladığımız menümüzü
alıp istediğimiz sayfaya ApplicationBar olarak atamak. Böylece artık bu sayfada
bizim menü gözükmeye başlayacak.
[XAML]
<phoneNavigation:PhoneApplicationPage
x:Class="WindowsPhoneApplication5.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phoneNavigation="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Navigation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone.Shell"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}">
<phoneNavigation:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar Visible="True">
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="Gel de tıklama..." Click="MenuTiklandi" />
</shell:ApplicationBar.MenuItems>
<shell:ApplicationBar.Buttons>
<shell:ApplicationBarIconButton IconUri="1.png" Click="IconDugmeTiklandi" />
<shell:ApplicationBarIconButton IconUri="2.png" Click="IconDugmeTiklandi" />
<shell:ApplicationBarIconButton IconUri="3.png" Click="IconDugmeTiklandi" />
<shell:ApplicationBarIconButton IconUri="4.png" Click="IconDugmeTiklandi" />
</shell:ApplicationBar.Buttons>
</shell:ApplicationBar>
</phoneNavigation:PhoneApplicationPage.ApplicationBar>
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">
Ayrıca isterseniz ApplicationBar'lar Page başına da tanımlayabilirsiniz. Yani
App.xaml gibi global bir yere koymadan Bar'ları her sayfanın içine gömme şansına
da sahipsiniz. Yukarıdaki XAML kodu bunun için güzel bir örnek olabilir.
Hepinize kolay gelsin.