RSS

Anasayfa

Bizim Blog - Windows Phone 7'de ApplicationBar ve Menü Kullanımı

Windows Phone 7'de ApplicationBar ve Menü Kullanımı

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}">

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>

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