7

Jan

Creare tile secondarie personalizzate nelle nostre applicazioni

Abbiamo già trattato in passato l’argomento tile secondarie: in questo post (e negli approfondimenti successivi) avevamo visto come crearle, gestirle e aggiornarle utilizzando i background agent o direttamente dall’applicazione.

Le API a disposizione per creare le tile secondarie sono molto semplici da utilizzare, ma non sono molto potenti: finchè si tratta di mostrare poche e semplici informazioni (un’immagine, un testo, un contatore) vanno benissimo, ma se vogliamo personalizzarle un po’ di più (banalmente, vogliamo inserire un testo disposto su due linee) ci scontriamo con qualche limite.

La stessa Microsoft diverso tempo fa, tramite un post su un blog MSDN, ha proposto una soluzione alternativa: la creazione della tile tramite XAML. Questo approccio prevede la creazione di un controllo all’interno del nostro progetto, da personalizzare a nostro piacimento: in fase di creazione della tile secondaria, quello che viene fatto è, da codice, “scattare” uno screenshot del controllo e usare l’immagine risultante come background della tile.

Il vantaggio di questo approccio è che all’interno del nostro controllo possiamo inserire tutti gli elementi che vogliamo e, a runtime, direttamente da codice, andare a personalizzarli: ad esempio, possiamo inserire un TextBlock e andare a valorizzarne la proprietà Text in base alle nostre esigenze.

Da poco è però disponibile una libreria su Codeplex, chiamata Ree7 Tile Toolkit for Windows Phone 7, che ci semplifica la vita: l’approccio rimane lo stesso, però non saremo più costretti a creare lo screenshot e salvarlo nello storage perchè le API incluse in questa libreria supportano direttamente la creazione di una tile partendo da un oggetto di tipo UIElement (ovvero la classe base da cui derivano tutti i controlli visuali di Silverlight, user control inclusi). In realtà, dietro le quinte il funzionamento sarà lo stesso: verrà creata una immagine PNG partendo dallo XAML e verrà utilizzato come background della tile.

Ma vediamola nel dettaglio per capire come utilizzarla.

Potete scaricare la libreria direttamente dalla pagina ufficiale su Codeplex oppure tramite NuGet, cercando la libreria Ree7 Tile Toolkit for Windows Phone 7.

I template

La creazione di una libreria sfruttando questa libreria passa attraverso il concetto di template, ovvero il layout grafico che verrà utilizzato per la tile. Sono due gli approcci possibili:

  • La libreria include già un template predefinito, che permette di creare tile con lo stesso look & feel di quelle native che fanno uso di un contatore (pensiamo a quella dell’hub Messages o di Outlook). Questo è l’approccio di cui parleremo in dettaglio in questo post.
  • Qualsiasi user control può diventare un template per la nostra tile: nel prossimo post vedremo come creare un template personalizzato.

Il template standard

Come anticipato poco fa, entriamo nel dettaglio di come sfruttare questa libreria per creare un’icona sfruttando il template standard composto da:

  • un background
  • un testo
  • un’icona
  • un contatore

Il risultato finale sarà qualcosa di molto simile a quello dell’hub Messages di Windows Phone: un testo con un’icona centrale affiancata da un numero (come potete vedere nello screenshot seguente, dove ho utilizzato una delle icone facente parti del progetto di esempio che accompagna la libreria).

image

Vediamo il codice con cui ho ottenuto questo risultato:

public void Create()
      {
      NativeCountTileTemplate template = new NativeCountTileTemplate
      {
      AppName = "Sample app",
      Count = "10",
      Icon = new BitmapImage(new Uri("/SampleTileIcon.png", UriKind.Relative)),
      Background = null
      };

      CustomTile tile = CustomTileFactory.GetTemplatedTile("SampleTile", template, TileSize.Standard);
      ShellTile.Create(new Uri("/MainPage.xaml?ID=1", UriKind.Relative), tile.GetShellTileData());
      }

Il primo passo è quello di definire il nostro template: per questo esempio abbiamo detto che utilizzeremo quello standard incluso nella libreria, identificato dalla classe NativeCountTemplate. Quello che facciamo è perciò creare una nuova istanza di questa classe e valorizzare le quattro proprietà che rappresentano la nostra tile:

  • AppName, che rappresenta il titolo
  • Count: che rappresenta il contatore
  • Icon: che rappresenta l’immagine
  • Background: che rappresenta lo sfondo. Attenzione che questa proprietà, analogamente a quella disponibile per tutti i controlli Windows Phone, è di tipo Brush. Questo significa che possiamo assegnarli un colore (SolidColorBrush), un’immagine (ImageBrush), un gradiente (LinearGradientBrush o RadialGradientBrush), ecc. Se non la impostiamo (o se la forziamo a null, come in questo caso) verrà utilizzato automaticamente il colore del tema corrente.

Dopodichè andiamo a utilizzare la CustomTileFactory, che ci permette di ottenere una CustomTile partendo dal nostro template grazie al metodo GetTemplatedTile, che accetta come parametri:

  • Il nome della tile (che è quello con cui verrà salvato nello storage, quindi occhio a non dare a tile diverse lo stesso nome)
  • Il template
  • La dimensione (al momento è supportato solamente TileSize.Standard, che corrisponde a 173x173)

A questo punto il gioco è fatto: l’oggetto di tipo CustomTile espone infatti il metodo GetShellTileData che ci restituisce un oggetto di tipo StandardTileData, che dovrebbe esserci famigliare. E’ infatti uno dei parametri richiesti dal metodo ShellTile.Create, che serve per creare la tile secondaria nella home del device. Vi ricordo che il primo parametro è invece il deep link a cui punterà la tile, che deve essere univoco e non utilizzato da altre tile secondarie.

In conclusione

Come vedete l’utilizzo di questa libreria semplifica molto la creazione di una tile personalizzata, dato che la parte di rendering del template e di generazione dell’immagine avviene dietro le quinte e ci permette di lavorare con un’API molto simile a quella nativa dell’SDK per la generazione delle tile.

Nel prossimo post vedremo un’esempio ancora più interessante: come generare una tile secondaria basata su un template personalizzato.

by Il blog di Matteo Pagani on 1/7/2012
Post archive