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

0 dakikada yazıldı

7397 defa okundu

Düzenle

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...
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.