8

Jan

Creare tile secondarie personalizzate per la nostra applicazione – Seconda parte

Nel post precedente abbiamo visto come utilizzare una libreria open source chiamata Reel7 Tile Toolkit per creare tile secondarie più accattivanti e personalizzabili rispetto a quelle realizzabili utilizzando le API standard. Nell’esempio avevamo realizzato una tile utilizzando il template di default offerto dalla libreria, che permette di creare tile con lo stesso look & feel di quelle native come l’hub Messages o Outlook. In questo post vedremo come realizzare una tile dall’aspetto completamente personalizzato.

Il template

Il punto di partenza del template personalizzato non è altro che un semplice controllo in XAML: la libreria non farà altro, dietro le quinte, che “scattare” uno screenshot del controllo e utilizzare l’immagine risultante come background della nostra libreria.

Facciamo perciò clic con il tasto destro sul nostro progetto, selezioniamo Add, New Item e scegliamo Windows Phone User Control. Diamogli un nome a nostro piacimento (ad esempio, Tile.xaml) e scegliamo Ok. Uno user control non è nient’altro che un controllo XAML che è possibile inserire all’interno di una paginae che “vive” di vita propria: a tutti gli effetti si comporta come se fosse una pagina, essendo composto da UI (lo XAML) e da codice (il code behind). Gli user control (analogamente a quanto avviene per i custom control di ASP.NET) servono sostanzialmente quando abbiamo una parte della nostra applicazione (magari dotata di una sua logica) che dobbiamo inserire in più pagine: in questo modo, possiamo mantenere un solo controllo e non doverlo duplicare in ogni punto in cui è richiesto.

Il nostro controllo in realtà non avrà logica: sfrutteremo infatti solamente l’aspetto visuale. La prima cosa da fare è andare nello XAML e ridimensionare la Grid inserita di default alla risoluzione delle tile, ovvero 173x173:



      
      
      //inserisci qui i controlli della tile
      
      
      

A questo punto all’interno della Grid possiamo inserire tutti i controlli che vogliamo per personalizzare la nostra tile. Ad esempio, possiamo inserire due TextBlock come nell’esempio:


      
      
      
      
      

Come facciamo ora ad utilizzare questo controllo come tile? Il codice è lo stesso che abbiamo visto nel post precedente, con la differenza che invece di andare a creare un’istanza della classe NativeCountTileTemplate andremo a creare una nuova istanza del nostro controllo, come nell’esempio:

public void Create()
      {
      Tile customTemplate = new Tile();

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

Il risultato sarà il seguente:

image

Personalizzare il contenuto

L’esempio che abbiamo visto è però puramente didattico e ci è servito per capire il meccanismo dei template: così com’è infatti ci serve a ben poco, dato che tipicamente le tile secondarie sono dinamiche, ovvero il contenuto varia a seconda dell’informazione da mostrare.

Vediamo perciò ora come possiamo fare per modificare a runtime il valore delle due TextBlock che abbiamo inserite. Innanzitutto dobbiamo valorizzarne la proprietà x:Name, così da dargli un ID univoco:


      
      
      
      
      

Tutti i controlli di Silverlight (incluso perciò il nostro controllo custom) espongono il metodo FindName, che ci permette di recuperare un controllo specifico figlio del controllo corrente dato il suo ID univoco. Usando questo metodo possiamo recuperare i riferimenti ai due TextBlock che abbiamo inserito e cambiarne il valore dinamicamente, come nell’esempio:

public void Create()
      {
      Tile customTemplate = new Tile();
      TextBlock first = customTemplate.FindName("txtFirst") as TextBlock;
      TextBlock second = customTemplate.FindName("txtSecond") as TextBlock;

      first.Text = "Hello";
      second.Text = "World";

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

Per accedere alla proprietà Text esposta dal controllo TextBlock dobbiamo prima fare una cast del risultato del metodo FindName a TextBlock: questo perchè il metodo FindName potrebbe restituire un controllo qualsiasi, perciò ritorna un generico object.

Una volta che abbiamo i riferimenti al controllo, non dobbiamo far altro che valorizzare la proprietà Text a nostro piacimento, ottenendo un risultato come questo:

image

In conclusione

In questo esempio abbiamo lavorato con dei TextBlock inseriti nella nostra tile: nulla vieta però di inserire qualsiasi altro controllo (ad esempio, di tipo Image) e con lo stesso meccansimo recuperarne il riferimento e andarne poi a valorizzare le proprietà. Occhio però a non “strafare”: è bene che le tile abbiano comunque un layout semplice e pulito, che aderisca il più possibile alle linee guida di Metro.

Di seguito trovate il link per scaricare il progetto di esempio utilizzato in questo post e in quello precedente.

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