Silverlight for Windows Phone Toolkit

Print Content | More

Insieme con la versione finale dei tool di sviluppo per Windows Phone è stato rilasciato anche il Silverlight for Windows Phone Toolkit. Di cosa si tratta? Se avete giocato un po’ con l’emulatore, vi sarete accorti di come molti dei controlli utilizzati ad esempio nell’applicazione Settings siano mancanti. Il toolkit serve proprio a colmare questa mancanza, mettendo a disposizione degli sviluppatori una serie di controlli aggiuntivi rispetto a quelli standard. Non si tratta di una novità per gli sviluppatori Silverlight: da tempo, la maggior parte dei controlli di Silverlight non vengono inclusi nel tool ufficiale, ma vengono pubblicati in un pacchetto a parte distribuito su Codeplex.

Il vantaggio di questo metodo di distribuzione è che i toolkit possono essere aggiornati nel tempo indipendentemente dai tool di sviluppo ufficiali, che invece hanno una procedura di pubblicazione e rilascio molto più rigida (e di conseguenza maggiormente distribuita nel tempo).

Utilizzarlo è molto semplice: vi basta scaricare il pacchetto dal sito ufficiale del progetto, scompattare il file compresso e includere tra le reference della vostra applicazione la libreria Microsoft.Phone.Controls.Toolkit.dll.

Vediamo brevemente, con qualche piccolo esempio di codice, i controlli che fanno parte del toolkit.

Switch

switch

Il nome è abbastanza autoesplicativo: il controllo switch funge da “interruttore” per definire scelte di tipo booleano (yes / no). Possiamo vederlo in azione nell’applicazione Settings, ad esempio, nelle impostazioni del Wi-Fi: viene utilizzato infatti per abilitare o disabilitare la connettività senza filo.

Ecco lo XAML necessario per utilizzarlo:

<toolkit:ToggleSwitch Header="Wi-Fi" x:Name=”switchWifi” />

Il controllo si comporta esattamente come un checkbox: la proprietà IsChecked viene valorizzata a true o false a seconda dello stato dello switch. Ecco un banalissimo esempio di codice di un MessageBox il cui messaggio varia a seconda dello stato dello switch.

private void switchWifi_Checked(object sender, System.Windows.RoutedEventArgs e)
{
    string message = switchWifi.IsChecked == true ? "Enabled" : "Disabled";
    MessageBox.Show(message, "Switch", MessageBoxButton.OK);
}

ContextMenu

context

Come si deduce dal nome, si tratta del menu contestuale che viene visualizzato solitamente quando si tiene premuta un’icona con il dito per qualche secondo. Ad esempio, se nell’elenco delle applicazioni installate sul device teniamo premuta una delle icone, apparirà un menu contestuale che ci da la possibilità di posizionare l’icona in home o di disinstallarla (solo nel caso in cui si tratti di una applicazione di terze parti).

Ecco lo XAML necessario per utilizzarlo:

<Border BorderBrush="{StaticResource PhoneForegroundBrush}" BorderThickness="2" Background="Transparent" VerticalAlignment="Center" Padding="16">
    <toolkit:ContextMenuService.ContextMenu>
        <toolkit:ContextMenu>
            <toolkit:MenuItem
                Header="this is a menu item"
                Click="MenuItem_Click"/>
            <toolkit:MenuItem
                Header="this is another menu item"
                Click="MenuItem_Click"/>
            <toolkit:MenuItem
                Header="this is a yet another menu item"
                Click="MenuItem_Click"/>
        </toolkit:ContextMenu>
    </toolkit:ContextMenuService.ContextMenu>
    <TextBlock Text="Tap and hold here to invoke ContextMenu" Style="{StaticResource PhoneTextNormalStyle}"/>
</Border>

Il fulcro del controllo è il <toolkit:ContextMenuService.ContextMenu>, che viene posizionato nell’elemento in cui vogliamo inserire il context menu. Abbiamo poi il sottonodo <toolkit:ContextMenu>, che contiene uno o più <toolkit:MenuItem />, ognuno dei quali corrisponde ad una delle voci di menu. Ognuna di queste voci implementa l’evento Click, in cui possiamo inserire il codice che vogliamo eseguire nel momento in cui l’utente sceglie una delle voci.

Date Picker e Time Picker

datepickertimepicker

Scopo di questi controlli è di consentire all’utente di selezionare una data e un’ora. Anch’essi sono utilizzati nativamente in Windows Phone 7 e possiamo vederli in azione sull’emulatore quando accediamo ai Settings nella sezione Date & Time.

Ecco il codice XAML del Date Picker:

<toolkit:DatePicker ValueChanged="DatePicker_ValueChanged"/>

Questo invece è quello del Time Picker:

<toolkit:TimePicker ValueChanged="TimePicker_ValueChanged"/>

Lato codice, entrambi i controlli funzionano allo stesso modo: entrambi implementano l’evento ValueChanged, che si scatena nel momento in cui cambiamo la data o l’ora e diamo l’ok premendo il segno di spunta nell’application bar. L’evento ValueChanged contiene, tra i parametri di ritorno, un oggetto di tipo DateTimeValueChangedEventArgs, che contiene due proprietà:

  • OldDateTime, la cui proprietà Value (di tipo DateTime) contiene la data prima della nostra modifica.
  • NewDateTime, la cui proprietà Value (sempre di tipo DateTime) contiene la nuova data dopo la nostra modifica.

Entrambi le proprietà espongono il booleano HasValue, che ci permette di capire se c’è stata una modifica o meno. Ecco un semplice esempio di codice che mostra un alert con le due date ogni qualvolta apportiamo una modifica.

private void DatePicker_ValueChanged(object sender, DateTimeValueChangedEventArgs e)
{
    string message = string.Format("Old date: {0} - New date: {1}", e.OldDateTime.Value.ToShortDateString(),
                                   e.NewDateTime.Value.ToShortDateString());
    MessageBox.Show(message, "Date picker", MessageBoxButton.OK);
}

WrapPanel

wrappanel

Questo componente arriva direttamente da Silverlight e molti lo conosceranno già: si tratta di un “contenitore” di altri controlli XAML analogo allo StackPanel, con la differenza che è in grado di posizionare automaticamente gli elementi su più righe nel caso non ci sia più spazio a disposizione. Può essere utilizzato sia con orientamento verticale che orizzontale, basta impostare la proprietà Orientation.

Ecco il codice XAML di esempio:

<toolkit:WrapPanel x:Name="wrapPanel" Orientation="Vertical"/>

Gestures

Il toolkit porta con se anche un listener che consente il riconoscimento delle seguenti gestures:

  • Tap (il classico tocco con il dito)
  • Hold (tocco mantenendo premuto)
  • Drag (trascinamento)
  • Pinch (il gesto con due dita che si usa per zoomare)
  • Flick (una specie di trascinamento che però fa continuare il movimento anche quando non si sta più premendo sullo schermo)

Per implementarlo, dobbiamo inserire all’interno dello spazio dove vogliamo rimanere in “ascolto” di queste gestures un controllo di tipo <toolkit:GestureService.GestureListener>. Ecco un esempio di codice XAML:

<Border x:Name="border" Width="300" Height="200" BorderBrush="{StaticResource PhoneForegroundBrush}" BorderThickness="4,16,4,4" Background="{StaticResource PhoneAccentBrush}" RenderTransformOrigin="0.5,0.5" Opacity=".5" CacheMode="BitmapCache">
    <Border.RenderTransform>
        <CompositeTransform x:Name="transform"/>
    </Border.RenderTransform>
    <toolkit:GestureService.GestureListener>
        <toolkit:GestureListener 
            Tap="OnTap" Hold="OnHold"
            DragStarted="OnDragStarted" DragDelta="OnDragDelta" DragCompleted="OnDragCompleted"
            PinchStarted="OnPinchStarted" PinchDelta="OnPinchDelta" PinchCompleted="OnPinchCompleted"/>
    </toolkit:GestureService.GestureListener>
</Border>

Dopodichè ci basta implementare l’evento legato alla gestures che desideriamo intercettare e il gioco è fatto. Il codice qui riportato disegna a video un rettangolo, che andiamo a manipolare utilizzando l’oggetto CompositeTranform. Nell’esempio qui sotto, intercettiamo l’evento Tap per riportare il rettangolo alla posizione iniziale quando l’utente lo tocca sullo schermo.

private void OnTap(object sender, GestureEventArgs e)
{
    transform.TranslateX = transform.TranslateY = 0;
}

In conclusione

Abbiamo visto una breve panoramica di tutti i controlli presenti nel toolkit. Come al solito, trovate qui sotto il link per scaricare un progetto d’esempio: questa volta però non è farina del mio sacco, il progetto è infatti contenuto all’interno del toolkit stesso. Mi sono permesso solamente di apportare qualche modifica per mostrarvi meglio il funzionamento di alcuni controlli (ad esempio, la visualizzazione di un alert in seguito all’utilizzo di uno Switch o di un DatePicker).


Windows Phone , Microsoft , Windows Phone Toolkit

6 comments

Related Post


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


  1. #1 da http://qmatteoq.tostring.it/blog/post/coding4fun-una-nuova-libreria-di-microsoft-per-lo-sviluppo-di-applicazioni-per-windows-phone-7-parte-1-i-controlli-2-parte

    qmatteoq.tostring.it - Coding4Fun: una nuova libreria di Microsoft per lo sviluppo di applicazioni per Windows Phone 7 – Parte 1: i controlli (2&#176; parte)