Nuova release del Silverlight Toolkit for Windows Phone: i controlli AutoCompleteBox e ListPicker

Print Content | More

Microsoft ha rilasciato una nuova versione del Silverlight Toolkit for Windows Phone, con una serie di novità decisamente succose: sono stati introdotti infatti diversi nuovi controlli che torneranno sicuramente utili per chi sviluppa applicazioni per Windows Phone.

Dato che i nuovi controlli sono un po’ più articolati, ho deciso di dividere il post in due parti: in questa prima parte vedremo i controlli AutoCompleteBox e ListPicker, nella seconda parte vedremo invece i controlli LongListSelector e NavigationTransition.

Prima di iniziare, vi ricordo l’indirizzo del sito ufficiale dal quale potete scaricare il Toolkit: http://silverlight.codeplex.com/. Il pacchetto è disponibile in due formati: eseguibile (sotto forma di pacchetto MSI), il quale installerà le librerie e la documentazione nel percorso C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Toolkit\Nov10, e file compresso, che contiene tutti i sorgenti e include anche un utile progetto di esempio.

AutoCompleteBox

Questo nuovo controllo si presenta come una normale TextBox: nel momento però in cui iniziamo a digitare del testo, si aprirà un’area in cui vi verranno suggerite delle parole in base a quanto avete scritto.

Ecco un esempio di come questo controllo viene definito nello XAML:

<toolkit:AutoCompleteBox x:Name="autocomplete" ItemsSource="{Binding Path=Words}"></toolkit:AutoCompleteBox>

Il controllo espone una proprietà ItemsSource (esattamente come una ListBox) alla quale deve essere assegnata una collection di stringhe (è indifferente che si tratti di una List o di una ObservableCollection, l’importante è che implementi l’interfaccia ICollection): tale collezione conterrà le parole che veranno utilizzate come suggerimento per l’autocompletamento.

Ecco un esempio di codice di una view in cui viene inizializzata una collection di stringhe e assegnata come ItemsSource del controllo:

public AutoComplete()
{
    InitializeComponent();
    ObservableCollection<string> words = new ObservableCollection<string>
                                             {
                                                 "Mauro",
                                                 "Ugo",
                                                 "Matteo",
                                                 "Giorgio"
                                             };
    autocomplete.ItemsSource = words;
}

Utilizzando il codice riportato nell’esempio, nel momento in cui inserirete la lettera M nel controllo, l’autocompletamento vi mostrerà in automatico gli elementi “Mauro” e “Matteo”: con un tap potrete selezionarli e inserirli senza dover scrivere il nome completo.

Autocomplete

ListPicker

In questo caso parliamo di un controllo che è già utilizzato dalle applicazioni native di Windows Phone 7, che però non era ancora disponibile per gli sviluppatori. Il ListPicker appare come una normale Textbox, che però quando viene selezionata diventa una sorta di dropdown, che ci permette di selezionare un elemento da una lista. La particolarità di questo controllo è che in grado di utilizzare due modalità di visualizzazione diverse a seconda del numero di elementi:

  • Da 1 a 5 elementi, il controllo si espande direttamente nella pagina stessa.
  • Da 5 elementi in su, la lista di elementi viene visualizzata in una pagina separata.

In entrambi i casi, il risultato sarà lo stesso: l’elemento selezionato comparirà nella TextBox.

Possiamo vedere un esempio di ListPicker con entrambe le modalità nella sezione Settings di Windows Phone 7, nello specifico nella schermata che ci permette di impostare il tema del telefono. Le opzioni su cui possiamo agire sono:

  • Background: ci permette di selezionare tra tema dark e tema light. In questo caso gli elementi della lista vegnono visualizzati nella pagina stessa, dato che sono solamente 2.
  • Accent Color: ci permette di scegliere il colore degli elementi del telefono. In questo caso gli elementi della lista vengono visualizzati in una pagina dedicata, dato che sono più di 5.
ListPicker-Short ListPicker-Long

Anche in questo caso il controllo supporta la proprietà ItemsSource, che accetta una collezione di elementi che verrà mostrata nella lista: ci penserà il controllo in automatico a scegliere la modalità di visualizzazione più adatta in base al numero di elementi.

Vediamo ora due esempi di ListPicker: il primo è quello più semplice, in cui utilizziamo il layout grafico di default e inseriamo (direttamenta nello XAML) una serie di elementi da mostrare.

<toolkit:ListPicker Header="background">
    <sys:String>dark</sys:String>
    <sys:String>light</sys:String>
    <sys:String>dazzle</sys:String>
</toolkit:ListPicker>

Il secondo esempio invece mostra un ListPicker nel quale definiamo un layout grafico personalizzato per ognuna delle due modalità di visualizzazione:

  • <toolkit:ListPicker.ItemTemplate> definisce il template utilizzato quando ci sono pochi elementi.
  • <toolkit:ListPicker.FullModeItemTemplate definisce il template utilizzando quando ci sono molti elementi.
<toolkit:ListPicker ItemsSource="{Binding}" Header="accent color" FullModeHeader="ACCENTS" CacheMode="BitmapCache">
<toolkit:ListPicker.ItemTemplate>
    <DataTemplate>
        <StackPanel Orientation="Horizontal">
            <Rectangle Fill="{Binding}" Width="24" Height="24"/>
            <TextBlock Text="{Binding}" Margin="12 0 0 0"/>
        </StackPanel>
    </DataTemplate>
</toolkit:ListPicker.ItemTemplate>
<toolkit:ListPicker.FullModeItemTemplate>
    <DataTemplate>
        <StackPanel Orientation="Horizontal" Margin="16 21 0 20">
            <Rectangle Fill="{Binding}" Width="43" Height="43"/>
            <TextBlock Text="{Binding}" Margin="16 0 0 0" FontSize="43" FontFamily="{StaticResource PhoneFontFamilyLight}"/>
        </StackPanel>
    </DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>

Anche in questo caso, possiamo rifarci alla sezione Theme dell’applicazione Settings per vedere entrambi gli utilizzi: nel caso della scelta del Background viene utilizzato un ListPicker standard (infatti il controllo mostra semplicemente il nome dell’elemento), nel caso della scelta dell’Accent Color viene utilizzato un ListPicker con un template custom (infatti a fianco del nome viene mostrato anche un rettangolo con il colore stesso).

In conclusione

Nel prossimo post vedremo gli altri due nuovi controlli introdotti nel toolkit: al contrario degli altri post tecnici che ho scritto negli ultimi mesi, questa volta non vi fornirò un progetto d’esempio, dato che in questa pagina potete scaricare il codice sorgente del Toolkit che, tra le altre cose, include un progetto d’esempio in cui vengono mostrati alcuni casi d’uso dei vari controlli.


Windows Phone , Windows Phone Toolkit , Microsoft

0 comments

Related Post


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