Le novità della RTM dei tools di sviluppo per Windows Phone 7: i nuovi controlli

Print Content | More

Ci siamo, finalmente la tanto attesa versione definitiva dei tool di sviluppo per Windows Phone 7 è uscita! Sui tool in sè non c’è molto da dire, è parecchio tempo ormai che abbiamo avuto modo di usarli e di prenderci confidenza, grazie alle due CTP rilasciate (una a Marzo e una ad Aprile) e alla beta (di Luglio). Questa versione è il passo finale (assieme al rilascio dell’OS in RTM) prima della messa in commercio dei primi device: ora gli sviluppatori hanno modo di ultimare le loro applicazioni e prepararsi per l’apertura del Marketplace i primi di Ottobre.

La vera novità di questa release definitiva è l’introduzione di tre controlli, di cui si parla da molto tempo (alcuni sono proprio una delle caratteristiche più interessanti e originali della UI di Windows Phone 7):

  • Panorama
  • Pivot
  • Bing Maps

In questo post vedremo brevemente di cosa si tratta e qualche semplice esempio di codice su come utilizzarli.

Prima però, vi lascio alcuni link decisamente importanti:

Panorama

Il Panorama control è uno dei cardini delle applicazioni Windows Phone 7, tanto che quasi tutte le apps native (da Office a People, passando per Pictures) ne fanno uso. Il Panorama control permette di creare una serie di viste, una affiancata all’altra, che scorrono con uno swipe a destra o sinista. Il nome Panorama deriva dal fatto che questo controllo utilizza come sfondo una immagine più larga della dimensione dello schermo: scorrendo per visualizzare le viste successive, l’immagine si muove con i vari elementi, mostrando le zone inizialmente nascoste. In più, una serie di accorgimenti nella UI fa capire all’utente che ci sono altri elementi da visualizzare (ad esempio, mostrando nel margine destro un’anteprima dei contenuti nella pagina successiva, come se questi fossero tagliati). Il Panorama control solitamente viene utilizzato per suddividere in viste diverse informazioni differenti tra di loro, ma legate alla stessa applicazione e concettualmente affini.

Ecco un esempio di XAML di un Panorama control:

<controls:Panorama Title="RTM News">

    <controls:Panorama.Background>
        <ImageBrush ImageSource="/RTMNews;component/Image/Lighthouse.jpg" Stretch="Fill" />
    </controls:Panorama.Background>

    <!--Panorama item one-->
    <controls:PanoramaItem Header="First view">
        <ListBox x:Name="listFirst">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Title}" Style="{StaticResource PhoneTextGroupHeaderStyle}"></TextBlock>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </controls:PanoramaItem>

    <!--Panorama item two-->
    <controls:PanoramaItem Header="Second view">
        <ListBox x:Name="listSecond">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Title}" Style="{StaticResource PhoneTextGroupHeaderStyle}"></TextBlock>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </controls:PanoramaItem>

</controls:Panorama>

Il codice è molto semplice. Il Panorama è definito dal tag , il quale contiene una serie di : ognuno di essi corrisponde ad una delle view che vengono visualizzate affiancate. All’interno di un PanoramaItem, possiamo inserire tutto lo XAML che vogliamo, come se si trattasse di una normalissima pagina. Nell’esempio, il panorama è composto da 2 view, ognuna delle quali contiene una ListBox che mostra una lista di elementi.

E’ possibile anche inserire PanoramaItem con orientamento orizzontale, che consentono di mostrare contenuto anche oltre il margine destro dello schermo, senza però andare a creare un nuovo PanoramaItem, ma comportandosi come tale. Possiamo considerarlo come una sorta di “paginazione” che consente di estendere i dati su più pagine orizzontalmente. Ecco il codice di un PanoramaItem di questo tipo:

<!--Panorama item three-->
<controls:PanoramaItem Header="Third view" Orientation="Horizontal">
    <ListBox x:Name="listThird">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Width="800" Orientation="Horizontal">
                    <TextBlock Text="{Binding Title}" Style="{StaticResource PhoneTextGroupHeaderStyle}"></TextBlock>
                    <TextBlock Text="{Binding Title}" Style="{StaticResource PhoneTextGroupHeaderStyle}"></TextBlock>
                    <TextBlock Text="{Binding Title}" Style="{StaticResource PhoneTextGroupHeaderStyle}"></TextBlock>
                    <TextBlock Text="{Binding Title}" Style="{StaticResource PhoneTextGroupHeaderStyle}"></TextBlock>
                    <TextBlock Text="{Binding Title}" Style="{StaticResource PhoneTextGroupHeaderStyle}"></TextBlock>
                    <TextBlock Text="{Binding Title}" Style="{StaticResource PhoneTextGroupHeaderStyle}"></TextBlock>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</controls:PanoramaItem>

L’immagine che trovate qui sotto sicuramente vi aiuterà meglio a capire il concetto: come potete vedere il Panorama è suddiviso in 4 viste, ma i PanoramaItem sono solamente 3. Questo perchè la seconda e la terza pagina in realtà sono un unico PanoramaItem con orientamento orizzontale, il cui contenuto è più largo della singola pagina (quindi più di 480 px, dato che la risoluzione imposta per i device WP7 è di 800x480).

IC425820

Con la RTM dei tools sono stati aggiunti dei nuovi template, sia di progetto (Windows Phone Panorama Application) che per la singola pagina (Windows Phone Panorama Page). In entrambi i casi, quello che otterrete sarà uno XAML con già all’interno il codice necessario per utilizzare il Panorama control.

Pivot

Il controllo Pivot è un incrocio tra un Panorama e un tab control: permette sempre di mostrare delle viste affiancate, ma lo fa in maniera meno invasiva rispetto al Panorama. Un pivot infatti solitamente non occupa tutto lo schermo (il titolo infatti non scorre, al contrario del Panorama) e non viene mostrata un’anteprima degli elementi della pagina successiva. I titoli delle varie view vengono mostrati uno affiancato all’altro: quello della view corrente viene evidenziato in bianco, mentre gli altri rimangono grigi. Anche il Pivot control è usato in maniera intensiva nelle applicazioni native: ad esempio, nel Calendario permette di cambiare la modalità di visualizzazione degli appuntamenti, mentre in Outlook consente di visualizzare le varie categorie di e-mail (inbox, posta ad alta priorità, ecc.). In linea di massima, il controllo Pivot viene utilizzato per visualizzare le stesse informazioni in modalità diverse oppure per categorizzare dati dello stesso tipo.

Ecco un esempio di XAML di un Pivot control:

<controls:Pivot Title="RTM News">

    <!--Pivot item one-->
    <controls:PivotItem Header="First view">
        <ListBox x:Name="listFirst">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Title}" Style="{StaticResource PhoneTextGroupHeaderStyle}"></TextBlock>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </controls:PivotItem>

    <!--Pivot item two-->
    <controls:PivotItem Header="Second view">
        <ListBox x:Name="listSecond">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Title}" Style="{StaticResource PhoneTextGroupHeaderStyle}"></TextBlock>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </controls:PivotItem>

</controls:Pivot>

Anche in questo caso il codice è molto semplice e la struttura è la stessa del Panorama: abbiamo un elemento padre (), il quale può avere uno o più figli di tipo , ognuno dei quali corrisponde ad una delle view. Anche in questo, all’interno di ogni PivotItem possiamo inserire il codice XAML che preferiamo: nell’esempio ogni item contiene una ListBox.

Anche in questo caso abbiamo dei template già pronti per inserire un Pivot, sia a livello di progetto (Windows Phone Pivot Application) che a livello di singola pagina (Windows Phone Pivot Page).

Bing Maps

Su questo controllo mi soffermerò poco perchè, al contrario degli altri due, è molto più articolato: ne parlerò perciò più approfonditamente in un post a parte nel prossimo futuro. In poche parole, il controllo permette di inserire le mappe di Bing all’interno della nostra applicazione, così da poterle manipolare e utilizzare a nostro piacimento (sono tanti gli utilizzi che mi vengono in mente, da un client Twitter che consente di vedere la geolocalizzazione dei Tweet ad applicazioni che permettono di visualizzare la posizione di specifici luoghi sulla mappa, come il celebre AroundMe).

Il codice base per inserire il controllo è veramente semplice:

<my:Map x:Name="map" />

Il namespace da referenziare invece nello XAML per potere usare il controllo è il seguente e va inserito, come sempre, come attributo del nodo :

xmlns:my="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"

Ci sono poi tantissime proprietà su cui possiamo intervenire, ma, come già detto, le vedremo in maniera più approfondita in un post dedicato. Per ora vi ricordo solo che per utilizzare in ambienti di produzione una mappa di Bing è necessario richiedere una chiave di attivazione sul Bing Maps Account Center, che va poi inserità in una specifica proprietà del controllo. Senza di essa, potete utilizzare normalmente il controllo ma ci sarà un messaggio in overlay che vi avviserà che le credenziali non sono valide.

Vi lascio a una piccola gallery con gli screenshot dei tre controlli più un piccolo progetto di esempio con il codice che trovate in questo post.

Nota: il codice dell’applicazione di esempio è un po’ più semplice rispetto a quello che viene automaticamente inserito quando utilizzate i template per applicazioni di tipo Panorama e Pivot: tali template utilizzano infatti il pattern MVVM, che è molto più efficiente rispetto al codice della mia applicazione, ma più complesso da capire. Tale complessità però è relativa solamente al popolamento dei contenuti dei due controlli (in entrambi i casi, delle ListBox), il codice XAML infatti è identico in entrambi i progetti.

panoramapivotmaps

 


Windows Phone , Microsoft , Panorama , Pivot , Bing Maps

0 comments

Related Post


(will not be published)
(es: http://www.mysite.com)


  1. #1 da http://qmatteoq.tostring.it/blog/post/le-novita-della-rtm-dei-tools-di-sviluppo-per-windows-phone-7-lemulatore

    qmatteoq.tostring.it - Le novit&#224; della RTM dei tools di sviluppo per Windows Phone 7: l’emulatore