Il linguaggio di User Experience Metro permette di realizzare interfacce che "escono" dai margini della finestra, consentendo allo sviluppatore di costruire griglie orizzontali molto estese. Per venire incontro all'utente che altrimenti dovrebbe scorrere un interminabile elenco di item, viene introdotto il concetto di Semantic Zoom.
Il semantic zoom permette all'utente di avere una visione "ragguppata" degli item presenti nella griglia, in base ad alcuni elementi semantici, come l'inziale del nome, l'area geografica, l'età o altro che possa caratterizzare un numero limitato di item. Una volta selezionato l'elemento semantico, viene spostato il focus sugli item opportuni.
In XAML sono due gli oggetti che ci vengono in aiuto: il primo è il SemanticZoom che permette di associare due GridView o ListView tra loro definendo sia la ZoomedInView, che è la vista normale, e la ZoomedOutView che è la vista raggruppata. L'altro elemento che ci serve è la CollectionViewSource che permette di realizzare una fonte dati gerarchica definendo gruppi ed elementi per ciascun gruppo.
La ItemSource della ZoomedInView sarà la nostra CollectionViewSource, mentre la ItemSource della ZoomedOutView punterà alla proprietà View.CollectionGroups sempre della CollectionViewSource. In questo modo il controllo si prenderà carico di visualizzare posizionando opportunamente lo scroll della View gli elementi del gruppo.
L'esempio che ho realizzato è basato sul template che viene proposto con Visual Studio 11 beta. Il controllo SemanticZoom ovviamente non funziona se inserito in un ScrollViewer.
Il progetto di esempio può essere scaricato qua: