Addio Metro: è stato bello.

Alessandro Scardova — Wed, 03 Oct 2012 14:39:53 GMT

Mancano pochi giorni al lancio ufficiale di Windows 8 e finalmente sembra che si sia chiarita la vicenda intorno al codename “Metro”, che nella fase Beta indicava sia un’applicazione per Windows 8 e Windows RT che il particolare design che le caratterizza, arrivando fino a definire la nuova pagina Start di Windows 8.

Tralascerò i motivi per cui Microsoft ha dovuto abbandonare il codename e la incredibile vicenda legata ad una nota catena di Cash & Carry tedesca per concentrami sul concetto di Design Language.

La versione RTM di Visual Studio chiama correttamente i template per sviluppare applicazioni per Windows 8 e Windows RT “Windows Store” e da un post di Mary Jo Foley di qualche giorno fa si fa chiarezza (o quasi) sul punto:

Windows Store apps
(per i fanatici del branding la parola apps è in minuscolo)
Sono le app realizzate per Windows 8 e Windows RT che verranno distribuite attraverso il Windows Store, che non necessariamente devono avere un particolare design style, fermo restando il rispetto dei requisiti per la certificazione, attualmente alla versione 3.0.

Modern apps
In un primo tempo pensavo che Modern identificasse il nuovo nome del design language, anche perché i concetti base sono simili a quello che viene definito Movimento Moderno, ma mi sono presto dovuto ricredere: Somasegar in una intervista telefonica, definisce "Modern apps" is a sweeping term that mean apps that work on connected devices and make use of continuous services,". Non ci troviamo quindi di fronte ad una definizione di un design ma piuttosto ad una architettura specifica per applicazioni mobili e non solo, in grado di consumare servizi remoti.

Microsoft design style
a quanto pare Microsoft ha messo il cappello al design language: quello che fino ad oggi abbiamo chiamato Metro style è diventato il design language di Microsoft, nato e pensato per le Windows Store apps i cui principi possono essere estesi ad altri tipi di applicazioni, sia desktop che web, a documenti e presentazioni.

La documentazione è ancora in aggiornamento con la nuova nomenclatura, le stesso PDF che riassume UX Guildelines in versione RTM citano ancora Metro styles app, in generale però quando si parla di design delle Windows Store apps si fa riferimento al Microsoft design style.

Salvo valide motivazioni, ad esempio legate ad un particolare brand dell’app, se volete sviluppare app Windows Store di successo è bene seguire i principi del Microsoft design stile definiti in questa pagina.

Addio Metro, è stato divertente giocare col quel nome, ma oggi diamo un caloroso benvenuto al Microsoft design style!

Metro UX con XAML: creare una GridView custom

Alessandro Scardova — Sun, 25 Mar 2012 18:20:35 GMT

Molti mi hanno chiesto come creare in XAML una griglia con gli elementi che possano spammare su più righe o su più colonne, più o meno come accade con la pagina Start di Windows 8 o come potete vedere in altre applicazioni Metro.

La soluzione è abbstanza semplice: basta ereditare il controllo GridView e fare un override del metodo PrepareContainerForItemOverride avendo cura di inserire nel oggetto bindato all’item (il model se usate MVVM) le proprietà che rappresentano i valori di RowSpan e ColumnSpan dell’oggetto contenitore, nel mio caso un VariableSizedWrapGrid in questo modo:

public class SpannableGridView : GridView
{
    protected override void PrepareContainerForItemOverride(Windows.UI.Xaml.DependencyObject element, object item)
    {
        var dataItem = item as SampleDataItem;

        if (dataItem != null)
        {
            element.SetValue(VariableSizedWrapGrid.ColumnSpanProperty, dataItem.ColumnSpan);
            element.SetValue(VariableSizedWrapGrid.RowSpanProperty, dataItem.RowSpan);
        }

base.PrepareContainerForItemOverride(element, item);
}
}

Da notare che:

il DataTemplate associato all’item non deve essere a dimensione fissa perchè deve adattarsi alle varie dimensioni;
se usate un VariableSizedWrapGrid dovete impostare la dimensione di ItemHeight e ItemWidth alla dimensione che dovrà avere l’item con ColumnSpan e RowSpan impostati a 1.

Detto questo potete scaricarvi l’esempio qua.