Kezdőoldal > .NET, Windows Phone 7 > Application Bar

Application Bar

2012. március 8. csütörtök Hozzászólás Go to comments

imageAz Application Bar egy kis toolbar a Windows Phone lapon. Maximum négy ikon gombot (icon button) és / vagy további menü elemeket tartalmazhat. Az Application Bar segítségével az alkalmazásunk fő funkcióit tehetjük könnyen elérhetővé. Bár maximum 4 menü elemet tartalmazhat, mégis ajánlott legfeljebb három ikon gombot (icon buttont) használnunk. Fontos megjegyezni, hogy az ApplicationBar nem szokványos vezérlő. Ő nem a Silverlight része, és elég sok megkötés van vele kapcsolatban. Egyfelől kódból is nehezebb elérni egyes menü elemeit, másfelől az adatkötést sem támogatja (főleg lokalizáció esetén kell kerülő megoldásokat alkalmazni).

Nézzünk egy egyszerű példát a használatára:

1. Készítsünk egy új Windows Phone 7 alkalmazást!

2. Ha jól megnézzük a XAML kódot, akkor látható, hogy az oldalon már eleve van egy példa ApplicationBar elhelyezve, csak ki van kommentezve.

<!–Sample code showing usage of ApplicationBar–>

 <!–<phone:PhoneApplicationPage.ApplicationBar>

3. Vegyük ki a kommentet a <phone:PhoneApplicationPage elől, és máris használatba vehetjük az ApplicationBart.

4. Indítsuk el, és nézzük meg, hogy most hogy néz ki az ApplicationBar-unk!

5. A képernyő alsó részében ott az ApplicationBar, de az ikonok nem az igaziak, és a menuitem neveit is célszerű volna valami beszédesebb névvel ellátni.

image

6. Első körben ikonokra lesz szükségünk. Szerencsére a Windows Phone 7 SDK tartalmaz néhányat számunkra. A projektünkben készítsünk egy Images mappát (Add -> New Folder), majd adjunk hozzá két ikont a projekthez! Az Images mappára kattintsunk jobb egérgombbal, és válasszuk ki az Add -> Existing Item… menüpontot! Navigáljunk el a Windows Phone 7.1 SDK Icons mappájába ($Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Icons\dark), válasszunk ki két ikont, és adjuk hozzá a projektünkhöz! Én most az add-et és a refresh-t fogom hozzáadni.

7. Jelöljük ki a két képet, amit az előbb hozzáadtunk, és a Properties Window-ban állítsuk át a Build Action Contentre!

image

8. Térjünk vissza a MainPage.xaml fájlhoz, és a két ApplicationBarIconButton esetén írjuk át az IconUrl tulajdonságát! Adjuk meg a képek valódi nevét, és a Text-et módosítsuk ennek függvényében! A menü item-ek Text tulajdonságát is módosítsuk egy nekünk szimpatikus szövegre!

<phone:PhoneApplicationPage.ApplicationBar>

    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">

<shell:ApplicationBarIconButton IconUri="/Images/add.png" Text="add"/>

<shell:ApplicationBarIconButton IconUri="/Images/refresh.png" Text="refresh"/>

        <shell:ApplicationBar.MenuItems>

            <shell:ApplicationBarMenuItem Text="info"/>

            <shell:ApplicationBarMenuItem Text="about"/>

        </shell:ApplicationBar.MenuItems>

    </shell:ApplicationBar>

</phone:PhoneApplicationPage.ApplicationBar>

9. Most már van egy szép, ámde haszontalan toolbar-unk. A szimulálás végett iratkozzunk fel az ApplicationBarIconButton Click eseményére!

<shell:ApplicationBarIconButton IconUri="/Images/add.png" Text="add" Click="Add_AppBarClick"/>

Figyeljük meg, hogy ebben az esetben nem RoutedEventArgs-unk van, hanem egy egyszerű EventArgs.

private void Add_AppBarClick(object sender, EventArgs e)

{

    MessageBox.Show("Hozzáadtam!");

}

10. Indítsuk el az alkalmazást, és próbáljuk ki az ApplicationBar-t működés közben!

image

Advertisements
Kategóriák:.NET, Windows Phone 7 Címke: , , ,
  1. Még nincs hozzászólás.
  1. No trackbacks yet.

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s

%d blogger ezt kedveli: