Il toolkit in oggetto è disponibile su CodePlex a questo indirizzo. E’ un componente molto interessante, oserei dire quasi indispensabile, per chiunque voglia sviluppare applicazioni per Windows Phone 7. Oggi pomeriggio ho dato un’occhiata ai vari controlli aggiuntivi; davvero stupefacente, perchè praticamente a costo zero usate controlli un po’ più in linea con quelle che sono le guidelines, e vi uniformate all’interfaccia utente che WP7 mette già a disposizione.

Controllo ToggleSwitch
In pratica, è una CheckBox standard ri-templizzata, in modo tale da apparire come un interruttore/switch. In pratica, è lo stesso controllo che con WP7 vedete sotto Impostazioni –> toni & suonerie, per attivare le suonerie e la vibrazione. Dal punto di vista developer, è una vera e propria CheckBox, quindi dispone della proprietà IsChecked che può essere messa in binding con una qualsiasi proprietà booleana, etc. etc.

<ctl:ToggleSwitch      Header=”Mantieni centrato l’aereo”     IsChecked=”True” />

Notare che per creare un ToggleSwitch come si deve, bisogna usare la proprietà Header per dare un titolo, che appare in un carattere più piccolo. Non usate la proprietà Content, che invece reimposta quello che appare quando si sposta la levetta. Per default, il ToggleSwitch mostra On/Off. Come tutti i controlli, anche questo può essere personalizzato come si vuole, con colori, template, bordi, font, etc. etc.

Controllo DatePicker
Come dice il nome, è un controllo che visualizza un DateTime nel formato in cui volete voi. Cliccandoci sopra, il controllo naviga in una pagina che permette di impostare una nuova data, scegliendo giorno/mese/anno. E’ esattamente il controllo che WP7 vi fa usare quando reimpostate l’ora di sistema.

<ctl:DatePicker     ValueStringFormat=”{}{0:d}”     Header=”Data di nascita” />

Ancora una volta, ho utilizzato la proprietà Header per dare un titolo al controllo. Ho usato la proprietà ValueStringFormat per specificare una stringa di formattazione per la data. Specificare “d” significa data in formato breve; specificare “D” significa data in formato esteso. Notare che la Culture con cui viene visualizzata la data dipende dalla lingua del sistema operativo (oppure quella che avete messo in Impostazioni –> paese e lingua). La proprietà PickerPageUri – che non ho avuto tempo di testare – dovrebbe servire ad impostare la pagina XAML per scegliere la data – nel caso in cui quella predefinita non vi andasse bene (ad esempio, notare nell’immagine qui sopra il titolo della pagina “Choose Date”, nonostante l’emulatore stia girando in italiano).

Controllo TimePicker
Tutto come sopra, però per l’ora.

<ctl:TimePicker     ValueStringFormat=”{}{0:t}”     Header=”Imposta l’ora corrente” />

TransitionService – transizioni ed effetti durante la navigazione delle pagine
Tutto molto semplice anche in questo caso. In pratica, voi utilizzate la solita classe NavigationService per spostarvi da una pagina all’altra, ma un engine dietro le quinte le fa apparire con diversi effetti: rotazione, slider, etc. etc. Il tutto è molto semplice e naturale:

<ctl:TransitionService.NavigationInTransition>
    <ctl:NavigationInTransition>
        <ctl:NavigationInTransition.Backward>
            <ctl:RollTransition />
        </ctl:NavigationInTransition.Backward>
        <ctl:NavigationInTransition.Forward>
            <ctl:RollTransition />
        </ctl:NavigationInTransition.Forward>
    </ctl:NavigationInTransition>
</ctl:TransitionService.NavigationInTransition>

Il namespace ctl è dichiarato come:

xmlns:ctl="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Il blocco XAML qui sopra va inserito appena dopo il nodo <phone:PhoneApplicationPage>. In pratica, si specifica l’effetto di transizione da applicare quando si raggiunge questa pagina, in ambedue i sensi (cioè…sia attraverso un back che un forward). Ovviamente si può anche specificare l’effetto quando si lascia questa pagina: è sufficiente usare NavigationOutTransition al posto di NavigationInTransition. Gli effetti disponbili attualmente sono:

• RollTransition
• RotateTransition
• SlideTransition
• SwiveTransition
• TurnstileTransition

L’ultimo accorgimento per far funzionare le transizioni è andare a toccare il code-behind nel file App.xaml.cs:

private void InitializePhoneApplication()
{
    if (phoneApplicationInitialized)
        return;
    RootFrame = new TransitionFrame();
    RootFrame.Navigated += CompleteInitializePhoneApplication;
    RootFrame.NavigationFailed += RootFrame_NavigationFailed;
    phoneApplicationInitialized = true;
}

L’oggetto RootFrame, che è dichiarato come PhoneApplicationFrame, deve essere creato con il tipo TransitionFrame, altrimenti nisba.

Ovviamente il tipo TransitionFrame è un tipo dichiarato e definito nell’assembly Microsoft.Phone.Controls.Toolkit, ed eredita da PhoneApplicationFrame.

AutoCompleteBox

A metà strada tra una TextBox ed una ComboBox, controllo imperdibile se volete facilitare la scelta di una voce da un elenco predefinito. Purtroppo il mio tempo per questa sera terminato, lascio approfondire a voi la cosa!

Send to Kindle

Dunque, faccio un breve riassunto. Per fare il play di suoni all’interno di una applicazione Windows Phone 7, abbiamo essenzialmente due metodi diversi:

1. usando un MediaElement
2. usando la classe SoundEffect

Il primo è disponibile solo all’interno di applicazioni Silverlight, il secondo è disponibile sia in Silverlight che in XNA.

In questo post parliamo della classe SoundEffect, e dei files .wav che è in grado di prendere in pasto e da mandare in play. Essenzialmente si tratta di avere del codice che fa una cosa simile:

SoundEffect slideEffect;
private void prepareSoundEffects()
{
    slideEffect = SoundEffect.FromStream(TitleContainer.OpenStream("Slide.wav"));
}

In questo caso carico il file Slide.wav. Quando ci sarà bisogno di farlo sentire all’utente è sufficiente chiamare il metodo Play(). Nulla di particolarmente complicato. Ricordiamoci che nel code-behind di App.xaml bisogna fare quanto segue:

readonly DispatcherTimer timer = new DispatcherTimer();

public App()
{
    this.timer.Tick += (s, e) =>
    {
        FrameworkDispatcher.Update();
    };

    this.timer.Interval = TimeSpan.FromMilliseconds(100);
    this.timer.Start();

    UnhandledException += Application_UnhandledException;
    InitializeComponent();
    InitializePhoneApplication();
}

Non so bene il perchè di questa cosa, so solo che bisogna farla!

Che tipo di files posso far sentire?

Soltanto files .wav: gli mp3 in questo frangente non sono ammessi. Se tentate di caricare un file .mp3 otterrete una InvalidOperationException. Potete caricare solamente files .wav campionati a 44100Hz.

Ora, se siete come me, probabilmente in questi giorni state scandagliando il Web alla ricerca di questo o quell’effetto sonoro che sì, sul click di quel Button ci sta proprio bene. Però non tutti i files sono a 44100Hz: cosa succede, in questo caso? Che otterrete ancora una bella InvalidOperationException, proprio al momento del caricamento che abbiamo visto prima.

E quindi? Quindi vi consiglio di scaricare Audacity, che è un free digital audio editor disponibile su SoundForge. Audacity è disponibile ovviamente in download, sia in formato zip, che nel classico installer .msi. Avviate Audacity, aprite il file .wav che volete modificare e reimpostate la frequenza di campionamento, impostandola su 44100Hz.

Ma anche qui c’è una piccola precisazione da fare. Date un’occhiata a questo screenshot:

Audacity riporta la frequenza di campionato in due punti diversi. Nell’esempio qui sopra ho aperto un file audio a 11025Hz. Se volete portare la frequenza a 44100Hz, per renderlo compatibile con la SoundEffect di XNA, cambiate quella che ho evidenziato dal rettangolo verde – in basso a sinistra nella finestra. Se toccate quella evidenziata dal rettangolo rosso, il suono risulterà distorto – perchè ovviamente modificare il campionamento significa anche “accelerare” il suono (un po’ come mandare un vecchio vinile 33 giri a 45).

Per salvare il file con le nuove impostazioni, usate il menu File –> Export As WAV… ed il gioco è fatto.

Send to Kindle

Faccio il mea-culpa e correggo il tiro, in riferimento al mio post di ieri pomeriggio.

Il modo corretto di ripristinare il PivotItem dopo un tombstoning è quello di farlo nell’evento Loaded della Page.

Quindi:

protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e)
{
    appStatus.State["PageIndex"] = this.Pivot.SelectedIndex;
    base.OnNavigatedFrom(e);
}

Qui salviamo nello stato dell’applicazione il SelectedIndex del Pivot. Quando si ritorna all’applicazione succede quanto segue:

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
    if (appStatus.State.ContainsKey("PageIndex"))
        pageIndex = (int)appStatus.State["PageIndex"];

    base.OnNavigatedTo(e);
}

Qui carichiamo la situazione salvata precedentemente. Notare che pageIndex è definita a livello di classe, ed in questa fase semplicemente ne carichiamo il valore. Dentro l’evento Loaded della Page andiamo a settare il PivotItem:

private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{
    if (pageIndex >= 0)
        this.Pivot.SelectedIndex = pageIndex;
}

Nell’evento Loaded siamo sicuri che la pagina sia stata interamente caricata, perciò non avremo problemi di alcun tipo.

Resta da capire perchè il codice descritto ieri si schianti solo con certi valori di SelectedIndex, e soprattutto perchè a run-time (in esecuzione senza breakpoint, tanto per capirci) vedo il controllo Pivot prendere il focus e poi…Boom! Mah!

Grazie al buon Gabriele che, nonostante non si stia occupando di sviluppo WP7, non ha perso il post dell’amico Matteo che spiegava questa cosa.

Send to Kindle

Sì, ehm, voglio dire, qualche problema c’è. Aprite Visual Studio 2010 e cominciate un nuovo progetto di tipo Windows Phone Application. Nei riferimenti aggiungete l’assembly Microsoft.Phone.Controls, in modo da poter utilizzare il controllo Pivot. Nella pagina MainPage.xaml, quella creata di default, cancellate tutto e fate in modo che il content sia il seguente:

<controls:Pivot x:Name="Pivot" >
    <controls:PivotItem Header="Item 1" />
    <controls:PivotItem Header="Item 2" />
    <controls:PivotItem Header="Item 3" />
    <controls:PivotItem Header="Item 4" />
    <controls:PivotItem Header="Item 5" />
</controls:Pivot>

E’ un semplice Pivot con 5 pagine PivotItem, identificabili dall’header che va da “Item 1” a “Item 5”. Ora supponiamo di voler gestire il tombstoning, ovvero se l’utente interrompe l’utilizzo dell’applicazione mentre si trova su ”Item 3”, quando la riprende deve ritornare su quella pagina. Idem ovviamente per le altre. Quindi:

PhoneApplicationService appStatus = PhoneApplicationService.Current;

protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e)
{
    appStatus.State["PageIndex"] = this.Pivot.SelectedIndex;
    base.OnNavigatedFrom(e);
}

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
    if (appStatus.State.ContainsKey("PageIndex"))
        this.Pivot.SelectedIndex = (int)appStatus.State["PageIndex"];

    base.OnNavigatedTo(e);
}

Il tutto è ovviamente definito nel code-behind MainPage.xaml.cs.

Qualcuno mi sa dire perchè se mi trovo su: Item 1, Item 2 o Item 5 la procedura di tombstoning funziona correttamente,

mentre se mi trovo su Item 3 o Item 4 l’applicazione crasha inesorabilmente?

Per comodità, vi metto a disposizione il file zip con la soluzione VS2010 pronta da aprire e provare. Ma solo a me succede?

Send to Kindle

Questa mattina ho registrato il mio nuovo WP7 – acquistato esattamente tre giorni fa – usando il tool Windows Phone Developer Registration (d’ora in poi WPDR) – che trovate comodamente nel menù Start sotto il gruppo di programmi Windows Phone Developer Tools. Questo tool richiede fondamentalmente tre cose:

1. un cellulare Windows Phone 7 collegato al PC tramite cavetto USB
2. il client Zune avviato (non ho provato con il WPConnect disponibile con i WP7 Developer Tools October Update)
3. un account Live ID regolarmente attivato sul portale http://create.msdn.com

Quindi, è sufficiente inserire il vostro account e cliccare sul pulsante Register. Il vostro cellulare deve anche avere il display sbloccato e trovarsi quindi nella schermata iniziale, in qualche hub e via dicendo. Nota bene: rispetto al prototipo che ho avuto in dotazione per circa 2 settimane, ho notato che su questo LG è stata rimossa la possibilità di impostare “Mai” nell’opzione “Blocca lo schermo dopo”, disponibile in Impostazioni –> blocco e sfondo.

Questa mattina, sbloccando il mio per deployare da VS2010, mi sono accorto di una cosa. Se l’orologio del cellulare non è impostato in modo corretto, la registrazione del cellulare fallirà. Il messaggio di errore purtroppo non riesco a farvelo vedere, ho cercato di riprodurlo ma non c’è stato verso. Era una sorta di:

Please verify date and time on your phone, or verify Internet connection. Can’t connect to developer portal because date and time are different bla bla bla.

E’ bastato andare in Impostazioni –> data e ora –> ed attivare imposta automaticamente sulla voce SI. Fatto questo, sono riuscito ad abilitare il telefono per lo sviluppo.  Evidentemente è sufficiente avere l’orario sballato di 1-2 minuti per impedire la connessione e la registrazione del cellulare.

Send to Kindle