Windows Phone 7 Application Bar

Seguendo l’esempio su MSDN ecco una semplice applicazione che fa uso dlel’application bar di Windows Phone 7.

Aggiungere una reference a Microsoft.Phone.Shell e creare un folder contenente le immagini da mostrare nell’application bar.

Prima di iniziare è bene tenere presente che

1) La Application Bar viene visualizzata come riga contenente da una a quattro immagini sulla parte inferiore dello schermo.

2) Non è un menù gerarchico

3) Le icone devono essere bianche su sfondo traparente utilizzando il canale alpha.

4) La colorazione e l’orientamento vengono gestiti in modo automatico in base alle impostazioni correnti

5) Le immagini devono essere 48×48 pixel e la grafica bianca di foreground deve rientrare nello spazio quadrato ad essa dedicata (26×26 pixel)

Ci sono molto altre regole ma non voglio annoiarvi con questi dettagli prima di aver visto e costruito insieme l’esempio.

Il progetto si dovrebbe presentare così:

image

Le immagini vanno gestite come “Content” e non come “Resources”: se importate le immagini da Visual Studio vengono marcate come Resource quindi occorre cambiarne la “Build Action”.

Per includere le immagini nell’Application Bar occorre agire ovviamente sull’XAML aggiungendo prima il namespace per presentare (come dice sempre il nostro Luca) all’applicazione il namespace da cui attingeremo per creare i controlli.

La proprietà da impostare è ApplicationBar del controllo PhoneApplicationPage: a tale proprietà occorre indicare la sua visibilità e la visualizzazione del menù tramite il controllo ApplicationBar del namespace Microsoft.Phone.Shell.

Aggiungiamo quindi il namespace:

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone.Shell"

e poi valorizziamo la proprietà del controllo:

<phoneNavigation:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
    </shell:ApplicationBar>
</phoneNavigation:PhoneApplicationPage.ApplicationBar>

All’interno dell’application bar dovremmo definire i vari button e le relative operazioni:

image

Ho inserito due immagini di prova Expand e MenuEnabled con relativo event handler.

Il designer non visualizza l’application bar.

Il risultato nell’emulatore è il seguente:

image

E’ possibile aggiungere anche voci di menù:

<shell:ApplicationBar.MenuItems>
    <shell:ApplicationBarMenuItem
        x:Name="ThinkAhead"
        Click="Test_Click"
        Text="ThinkAhead" />
    <shell:ApplicationBarMenuItem
        x:Name="PiaSys"
        Click="Test_Click"
        Text="PiaSys" />
</shell:ApplicationBar.MenuItems>

Le voci di meù consentono di avere più opzioni di menù oppure semplicemente descrivere con del testo quello che non può essere rappresentato con le icone. Nel caso seguente ho aggiunto le aziende tecnihe del gruppo DevLeap come voci di menù. Notare che le voci di menù appaiono in minuscolo per default.

image

La visualizzazione dell’Application Bar prevede tre punti “…” per rappresentare il menù che si aprirà ad effetto :

image  image

Se le voci di menù devono essere create in modo dinamico è possibile agire sugli oggetti da codice:

ApplicationBar = new ApplicationBar();

ApplicationBar.IsVisible = true;
ApplicationBar.IsMenuEnabled = true;

ApplicationBarIconButton button1 = new ApplicationBarIconButton(new Uri("/Images/Expand.png", UriKind.Relative));
button1.Click += new EventHandler(button1_Click);

ApplicationBarIconButton button2 = new ApplicationBarIconButton(new Uri("/Images/MenuEnabled.png", UriKind.Relative));
button2.Click += new EventHandler(button2_Click);

ApplicationBar.Buttons.Add(button1);
ApplicationBar.Buttons.Add(button2);

Alla prossima