Nel precedente capitolo abbiamo iniziato a esplorare i controlli che abbiamo a disposizione in WinRT, molti dei quali sono sicuramente già noti a chi ha avuto esperienze di sviluppo in Silverlight, Windows Phone o WPF. Questi controlli rappresentano sicuramente dei mattoni fondamentali, ma da soli non sono sufficienti a realizzare applicazioni "vincenti". Se abbiamo avuto modo di visionare qualcuna delle applicazioni presenti nello store di Windows 8, infatti, ci saremo resi conto di come esistano dei pattern specifici secondo i quali organizzare l'interfaccia, tra cui, per esempio, l'aggregazione dei vari elementi in strutture a griglia o a lista, magari suddivise in gruppi. Per imparare a realizzare interfacce di questo tipo, è piuttosto importante conoscere i controlli pensati per rappresentare sullo schermo molteplici elementi; GridView, ListView, nella fattispecie, rappresentano delle assolute novità, introdotte appositamente per le applicazioni Windows 8, ed è proprio a queste novità, ma anche a molto altro, che è dedicato questo capitolo. Una new entry è anche SemanticZoom, che ci consente di reagire a una gesture di zoom da parte dell'utente per mostrare, per esempio, delle informazioni di riepilogo. Anche per ciò che concerne la navigazione o la gestione di comandi e opzioni, esiste un oggetto specifico, che ha già fatto la sua comparsa in Windows Phone: stiamo parlando di AppBar, che in WinRT è stato ulteriormente potenziato. L'obiettivo di questo capitolo è proprio quello di imparare a sfruttare tutti questi oggetti, in modo che, al termine, abbiamo in mano tutti gli strumenti necessari per realizzare applicazioni, anche complesse, con la necessaria padronanza.

Visualizzare elenchi di elementi

Il controllo più elementare messo a disposizione da WinRT quando vogliamo mostrare un elenco di elementi è ItemsControl. Questo oggetto tipicamente si utilizza in binding con una collezione di oggetti, come nell'esempio 5.1.

<Grid ... />
 <ItemsControl ItemsSource="{Binding Items}" />
</Grid>

Public Property Items As List(Of String)
Public Sub New()
 InitializeComponent()
 Me.Items = New List(Of String)() 
  From {"Marco", "Cristian", "Alessio", "Stefano"}
End Sub

public List<string> Items { get; set; }
public MainPage()
{
 this.InitializeComponent();
 this.Items = new List<string>() { "Marco", "Cristian", "Alessio", "Stefano" };
}

La collezione Items che abbiamo utilizzato non è altro che una lista di stringhe, che per default vengono rappresentate da ItemsControl con degli elementi di testo. Come abbiamo accennato nel capitolo 3, grazie ai data template possiamo però personalizzare la modalità secondo cui rappresentare ogni singolo elemento; in questo modo, siamo anche in grado di legare in binding oggetti complessi. Se, per esempio, ogni elemento della lista è un oggetto Person, con le proprietà Name ed Email, possiamo definire l'ItemTemplate secondo cui visualizzarli, come nell'esempio 5.2.

<ItemsControl ItemsSource="{Binding Items}">
 <ItemsControl.ItemTemplate>
  <DataTemplate>
   <StackPanel Orientation="Horizontal">
    <TextBlock Text="{Binding Name}" />
    <HyperlinkButton Content="Invia Email..." 
             Tag="{Binding Email}" Click="SendEmail" />
   </StackPanel>
  </DataTemplate>
 </ItemsControl.ItemTemplate>
</ItemsControl>

Ogni elemento della lista, è uno StackPanel che contiene un TextBlock, in binding con la proprietà Name, e un HyperLinkButton. Quest'ultimo, in particolare, contiene l'indirizzo email all'interno della proprietà Tag, così che possiamo recuperarlo nel gestore dell'evento Click con il codice dell'esempio 5.3.

Public Async Function SendEmail(sender As Object, e As RoutedEventArgs) As Task
 Dim button = DirectCast(e.OriginalSource, HyperlinkButton)
 Dim email = DirectCast(button.Tag, String)
 Await Launcher.LaunchUriAsync(New Uri("mailto:" + email))
End Function

Private async void SendEmail(object sender, RoutedEventArgs e)
{
  var button = (HyperlinkButton)e.OriginalSource;
  var email = (string)button.Tag;
  await Launcher.LaunchUriAsync(new Uri("mailto:" + email));
}

ItemsControl ci è utile per iniziare a capire come funzionano i controlli basati su liste di elementi, ed è l'oggetto da preferire quando dobbiamo ripetere un determinato template un certo numero di volte; nonostante questo, però, si tratta di un controllo molto limitato, che fa davvero poco più di quanto abbiamo visto. Per esempio, non gestisce la selezione né il click sul singolo elemento, tant'è che siamo stati costretti a sfruttare degli HyperLinkButton. Inoltre, nel caso sia necessario supportare lo scrolling, è compito di noi sviluppatori gestirlo, per esempio inserendo quest'oggetto all'interno di uno ScrollViewer.Fortunatamente, in WinRT esistono anche due oggetti più avanzati, che racchiudono tutte queste funzionalità insieme a diverse altre, che saranno l'argomento delle prossime pagine: GridView e ListView.