Cenni su XAML

Cenni su XAML

In questo articolo inizieremo a introdurre il linguaggio di markup XAML, diventato ormai una pietra miliare nello sviluppo di applicativi per Microsoft Windows. Questo argomento si collega direttamente all'implementazione del pattern MVVM in Microsoft .NET, in quanto fornisce gli strumenti base per l'implementazione dei comandi e per legare l'interfaccia grafica al modello logico dell'applicativo.

Come si può dedurre dal titolo, tratterò solo cenni su XAML visto che l'argomento è particolarmente vasto e tocca trasversalmente più tecnologie attualmente in uso in diversi settori dell'informatica.

Cosa è XAML?

XAML è un linguaggio di markup direttamente derivato da XML. L'idea di base, geniale ma non originale, è che la composizione visiva di un oggetto può essere espressa come un grafo di elementi. Un albero può essere espresso come un grafo e l'XML ha una struttura ad albero. Quindi, sostanzialmente, una composizione visiva può essere descritta in maniera agevole tramite un elenco di nodi XML. XAML definisce i tipi primitivi per la descrizione di una composizione visiva. In parole povere, descrive in maniera formale cosa abbiamo a video in quella determinata schermata (che da ora in poi chiameremo "vista").

Ogni nodo XAML rappresenta un oggetto e lega, in maniera tangibile, la parte visiva della vista alla sua parte logica.

<StackPanel>
    <Button Content="Premi qui" />
</StackPanel>

Con questo codice abbiamo appena definito un area visiva a stack dove abbiamo piazzato un pulsante. Il rapporto tra lo StackPanel e il Button è visibile a colpo d'occhio.

La differenza tra XAML rispetto altri approcci visivi basati su XML è il fatto che XAML disgiunge completamente la logica che pilota un determinato elemento visivo e la sua componente grafica, chiamata "Template". XAML quindi definisce da zero la composizione visiva di ogni controllo tramite la sua proprietà Template, che può essere completamente stravolta dallo sviluppatore ridefinendola con un nuovo albero visivo. Questa caratteristica permette di creare layout estremamente complessi in poco tempo.

La sintassi di XAML

XAML eredita completamente la sintassi XML e aggiunge alcuni elementi di markup proprietari. Sono presenti quindi tutti gli elementi che già conosciamo: i nodi, il supporto ai namespace XML, agli attributi, e i commenti. Nell'esempio precedente, ho per esempio associato all'attributo Content una stringa di testo. Gli attributi in XAML rappresentano le proprietà della classe che definisce l'oggetto che stiamo manipolando tramite XML. L'oggetto Button ha definita una proprietà Content di tipo Object. Semplicemente, invece di accedervi tramite un linguaggio .NET, utilizziamo un markup language. 

L'utilizzo di attributi non è l'unico modo per accedere ai membri del layer logico dell'oggetto. I membri dell'istanza possono essere settati utilizzando anche la sintassi XAML "a proprietà" che permette l'utilizzo di costrutti più complessi per impostare il valore del membro di istanza che stiamo manipolando.

<StackPanel>
    <Button>
        <Button.Content>
            <TextBlock Text="Premi qui" />
        </Button.Content>
    </Button>
</StackPanel>

In questa evoluzione del codice abbiamo definito il contenuto del pulsante in maniera esplicita utilizzando un TextBlock, l'equivalente XAML della vecchia Label WinForms. Alcuni controlli contenitore hanno la possibilità di definire in maniera implicita il contenuto del controllo. La proprietà Content viene settata di default se definiamo un nodo figlio del controllo utilizzando l'oggetto istanziato da quel controllo. L'esempio di sopra può diventare:

<StackPanel>
    <Button>
        <TextBlock Text="Premi qui" />
    </Button>
</StackPanel>

Nel caso siano supportate collezioni di oggetti, per generare gli elementi in XAML basta effettuare delle semplici ripetizioni:

<StackPanel>
    <Button>
        <TextBlock Text="Premi qui per il pulsante 1" Margin="5" />
    </Button>
    <Button>
        <TextBlock Text="Premi qui per il pulsante 2" Margin="5" />
    </Button>
</StackPanel>

Il processore XAML creerà automaticamente una istanza della collection relativa all'oggetto che stiamo manipolando.

Estensioni di markup

XAML supporta estensioni di markup proprietarie utilizzate per manipolare la logica degli oggetti definiti nell'albero visivo. Ad esempio, una delle più importanti è StaticResource, che ricava la reference a una risorsa statica definita nell'applicativo, che può variare da un determinato colore all'istanza di un template oggetto.

<StackPanel>
    <Button>
        <TextBlock Text="Premi qui per il pulsante 1" Margin="5" Foreground="{StaticResource HeavyMetalRed}"/>
    </Button>
    <Button>
        <TextBlock Text="Premi qui per il pulsante 2" Margin="5" Foreground="{StaticResource HeavyMetalRed}"/>
    </Button>
</StackPanel>

L'esempio colora il testo dei pulsanti di un rosso definito all'interno delle risorse dell'applicazione.

Conclusioni

XAML è un linguaggio molto complesso. Quelli elencati in questo breve articoli sono solo gli approcci base alla definizione di una vista tramite XAML. Attualmente esistono più versioni del processore XAML, ognuna della quale "in servizio" presso una determinata tecnologia Microsoft. Windows Phone, Windows Presentation Foundation, Silverlight e le Windows Store App tutte supportano il processore XAML per la definizione dell'interfaccia grafica. Ma ognuna di queste tecnologie presenta dei set o subset di sintassi non compatibili tra loro. Generalmente si può affermare però che Windows Presentation Foundation rappresenta in linea di massima il superset per quanto riguarda le sintassi di XAML e supporta l'insieme più completo di estensioni di markup. Silverlight, Windows Phone e Windows Store App definiscono comportamenti nativi, come ad esempio la definizione di un modello di navigazione a pagine, che su WPF solitamente non viene utilizzato. XAML è un mondo relativamente vasto, ma padroneggiarlo significa riuscire a creare applicativi visivamente accattivanti in molto meno tempo rispetto ad altre tecnologie. E, cosa non da poco, tutto XAML è orientato all'uso di pattern di tipo MVC.

Riferimenti esterni

Pagina di MSDN su XAML: http://msdn.microsoft.com/it-it/library/ms747122(v=vs.110).aspx