Passa ai contenuti principali

Appunti di WPF – Quarta Puntata – XAML, le basi

XAML è l’acronimo di eXtensible Application Markup Language e rappresenta un “dialetto” del formato XML in grado di rappresentare in maniera completa istanze di oggetti e relativa gerarchia contenuto/contenitore.

Prima di entrare in dettaglio su come è strutturato lo XAML e come possiamo definire una interfaccia grafica utilizzando questo linguaggio, vediamo di capire quali sono i vantaggi che si possono avere utilizzandolo. Per fare ciò partiremo da alcune controindicazioni che si hanno nel momento in cui si realizza un’interfaccia grafica classica (ad esempio in Windows Form).

Per prima cosa, è piuttosto difficile, in un’applicazione Windows Form, separare il codice di interfaccia vero e proprio dalla logica dell’applicazione. Poi, tutto l’aspetto grafico di una interfaccia deve essere realizzato con uno strumento esterno a quello con cui viene realizzata l’applicazione, utilizzando dei file bitmap (o equivalenti) per poi essere inserite nell’interfaccia come risorse (incorporate o meno). La gestione di semplici effetti grafici (come, ad esempio, il passaggio del mouse su un bottone), inoltre, deve essere inserita nel codice dell’applicazione appesantendo la leggibilità della stessa. Infine, le immagini in una interfaccia Windows Form, non possono essere ridimensionate senza perdere in qualità.

WPF risolve queste problematiche attraverso l’utilizzo di XAML.

Va precisato che WPF non necessariamente richiede la definizione dell’interfaccia grafica tramite da XAML (potremmo definire tutti gli oggetti grafici come accade per una Windows Form) ma il suo utilizzo semplifica notevolmente la realizzazione e permette il disaccoppiamento del codice applicativo da quello di interfaccia.

Una finestra WPF è composta, dunque, da un file XAML che rappresenta la definizione degli oggetti che compongono la sua interfaccia grafica (in termini di disposizione gerarchica degli stessi, aspetto e proprietà) e di un file VB (o CS) che contiene il codice applicativo. In sostanza una finestra WPF è assimilabile ad una Web Form in cui abbiamo un file aspx che definisce l’interfaccia grafica e un file vb che contiene il code behind.

Quando realizziamo un’interfaccia grafica utilizzando un file XAML dobbiamo tener presente tre semplici regole:

· Ogni nodo XAML rappresenta una classe .NET. Il nome del nodo è lo stesso della classe. Ad esempio il nodo <Button> corrisponde alla classe Button;

· Poichè XAML è XML, possiamo innestare nodi all’interno di nodi in una struttura gerarchica per definire che un oggetto è contenuto in un altro;

· E’ possibile impostare le proprietà di un nodo (classe) utilizzando gli attributi. In caso di proprietà complesse, è possibile utilizzare degli speciali tag innestati nel nodo.

Vediamo ora un esempio di una finestra, molto semplice, definita da WPF:

  1. <Window x:Class="MainWindow"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.     Title="MainWindow" Height="350" Width="525">
  5.     <Grid>
  6.         <Button x:Name="MyButton">Premi</Button>
  7.     </Grid>
  8. </Window>

WPF_04_XAML_Basi_Fig1
Osserviamo che il nodo radice del documento è rappresentato dal tag <Window> che comunica al framework di WPF che la nostra finestra (stile windows worm) sarà rappresentata da una classe MainWindow derivata dalla classe Window. Le proprietà Title, Height e Width sono impostate utilizzando appositi attributi.

All’interno della finestra troviamo un contenitore Grid (identificato dal tag <Grid> e di cui parleremo più avanti) e, all’interno di quest’ultimo, un bottone (tag <Button>). Il bottone ha un nome associato (attributo x:Name) che permette di referenziarlo qualora ne avessimo la necessità nel code behind e un testo visualizzato. Una differenza tra Windows Form e WPF è che in Windows Form ogni controllo deve avere un nome, mentre in WPF i controlli possono anche non averne (ovviamente nel caso in cui non abbiano nome, questi non potranno essere referenziati a livello di code behind).

Poiché ogni tag corrisponde ad una classe .NET, come fa il compilatore a sapere quale classe Button associare al tag <Button>? In altre parole, come fa a completare il namespace della classe Button (che, per la cronaca, si trova in System.Windows.Controls) visto che da nessuna parte è indicato?

L’arcano si svela nell’utilizzo dei namespace. Come possiamo vedere, tra gli attributi del tag <Window> compaiono i seguenti:

  1. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  2. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"


che indicano al parser XAML di andare a cercare i tag all’interno di opportune definizioni alla stregua di quello che fa il compilatore del linguaggio VB quando inseriamo la parola chiave Imports per referenziare namespace del mondo .NET.

In particolare:

· http://schemas.microsoft.com/winfx/2006/xaml/presentation : è il namespace principale di WPF in cui sono contenuti tutti i controlli grafici di WPF e alcune delle classi utilizzate più di frequente. Da notare che il namespace viene referenziato senza aggiungere prefissi il che significa che si tratta del namespace di default del documento;

· http://schemas.microsoft.com/winfx/2006/xaml : si tratta del namespace caratteristico di XAML che include alcune funzionalità utili all’interno del documento (come ad esempio il nome degli oggetti dell’interfaccia). Questo namespace è referenziabile con il prefisso x nel senso che, ovunque si voglia fare riferimento ad un oggetto in esso contenuto bisognerà scrivere x:ElementName.

Osserviamo che non c’è corrispondenza tra namespace XML e namespace .NET.

Per poter utilizzare altre classi del framework o nostre classi create in un assembly separato, dobbiamo definire opportunamente i namespace in cui tali classi sono contenute per poter permette al parser XAML di riconoscerle.

Se vogliamo referenziare un assembly del framework .NET all’interno dello XAML, dobbiamo inserire il riferimento al namespace con la seguente sintassi:

xmlns:Prefix=”clr-namespace:Namespace;assembly=AssemblyName”

dove Prefix è il prefisso con cui referenzieremo le classi all’interno dello XAML, Namespace è il namespace .NET da referenziare e AssemblyName l’assembly in cui è contenuto il namespace.

Per esemplificare il concetto, supponiamo di voler utilizzare, all’interno della nostra interfaccia, la classe DateTime :

  1. <Window x:Class="DateTimeWindow"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.     xmlns:sys="clr-namespace:System;assembly=mscorlib"
  5.     Title="DateTimeWindow" Height="300" Width="300">
  6.     <StackPanel>
  7.         <ListBox>
  8.             <ListBox.Items>
  9.                 <ListBoxItem>
  10.                     <sys:DateTime>12/31/2009 17:00</sys:DateTime>
  11.                 </ListBoxItem>
  12.                 <ListBoxItem>
  13.                     <sys:DateTime>12/31/2009 18:00</sys:DateTime>
  14.                 </ListBoxItem>
  15.                 <ListBoxItem>
  16.                     <sys:DateTime>12/31/2009 19:00</sys:DateTime>
  17.                 </ListBoxItem>
  18.             </ListBox.Items>
  19.         </ListBox>
  20.     </StackPanel>
  21. </Window>

Abbiamo definito una list box al cui interno abbiamo inserito tre elementi contenenti 3 date.

WPF_04_XAML_Basi_Fig2 

Scarica la versione PDF dell'articolo. Scarica la versione Amazon Kindle dell'articolo.

Commenti

Post popolari in questo blog

MVP Reconnect …… ovvero quando entri nella “famigghia” resti sempre nella “famigghia”!!!

Ma di che “famigghia” stiamo parlando!!!!

Fermi tutti, non si tratta di robe strane o sette segrete o affari malavitosi….stiamo parlando della grande famiglia dei Microsoft MVP.

Per chi non sapesse cosa sono i Microsoft MVP, vi consiglio di fare un giro sul sito ufficiale del programma (link), ma, volendolo spiegare in pochisime parole, si tratta di un riconoscimento che Microsoft da a persone che si distinguono per il loro impegno, aiutando gli altri ad ottenere il massimo grazie alle tecnologie Microsoft. Si tratta di persone, non dipendenti Microsoft, che mettono la loro passione, il loro tempo, la loro buona volontà per la divulgazione e la condivisione della conoscenza. Non necessariamente (come qualcuno erroneamente sostiene, evidentemente non conoscendo le basi del programma) si tratta di professionisti nel termine letterale del termine ma si tratta comunque di un gruppo di persone che sacrifica un pò del suo tempo (e, a volte, vi assicuro neanche pò!!!) per la sua passione.

Pe…

Nuova versione del Band SDK

E’ di ieri l’annuncio del rilascio della nuova versione dell’SDK per il Microsoft Band.
Si tratta della versione 1.3.10417 (la precedente e, prima della serie, era la 1.3.10219 preview).
Maggiori informazioni, download dell’SDK per le tre piattaforme Windows Phone, iOS e Android all’indirizzo http://developer.microsoftband.com/.
Allo stesso indirizzo potrete trovare anche la documentazione.
Nei mesi scorsi mi sono gia’ occupato della precedente versione e questi sono i post che ne parlano:
Microsoft Band SDK Preview - First LookMicrosoft Band SDK Preview - ”Hello Band”Microsoft Band SDK Preview - Accesso ai sensoriMicrosoft Band SDK Preview - TileMicrosoft Band SDK Preview - NotificheMicrosoft Band SDK Preview - Personalizzazione
Gli argomenti trattati e il codice proposto dovrebbe, ad una prima lettura delle nuove funzionalita’ inserite, essere ancora valido e funzionante ma nei prossimi giorni prendero’ in esame tutti gli argomenti dei precedenti post e vedremo cosa cambia e cosa e’ …

Template di progetto per sviluppare applicazioni WPF con Intel® RealSense™

E’ disponibile, nella gallery di Visual Studio, la prima versione del mio template di progetto per applicazioni WPF scritte in C# che permette di realizzare applicazioni con l’SDK di Intel® RealSense™.Il template si può scaricare direttamente all’interno Visual Studio utilizzando il tool “Extensions and Updates”oppure all’indirizzo https://visualstudiogallery.msdn.microsoft.com/1c36ecfd-8c00-4aee-b20c-a1726ab6424dIl template esegue le seguenti operazioni per voi:Aggiunge la reference all’assembly libpxcclr.cs.dll (nelle due distinte versioni per x86 e x64);Aggiunge lo script di post build per copiare la libreria libpxccpp2c.dll dalla cartella dell’SDK alla cartella bin del vostro progetto.Una volta creato il progetto dovete rimuovere la configurazione di compilazione AnyCPU (che non ha più senso) dalla vostra solution e sarete pronti per sviluppare con Intel® RealSense™.Ovviamente dovete installare l’SDK che potete scaricare all’indirizzo https://software.intel.com/en-us/intel-realsen…