AppBar

Windows 8, WinRT, Advanced AppBar with vector icons in XAML

Ciao a tutti,
in quest’articolo vorrei proseguire il discorso sull’uso delle icone per l’AppBar.
Anche se sembra difficile, potrebbe capitare di non trovare un’icona adatta alle proprie necessità tra le 150 circa disponibili di default nel template di Visual Studio 2012.

Se appunto, non siamo fortunati nella ricerca dell’icona che fa per noi, possiamo pensare di utilizzare Metro Studio 2 di SyncFusion http://www.syncfusion.com/downloads/metrostudio che al momento viene dato in licenza gratuita al posto di 499$ 🙂

Metro Studio 2 è un software che mette a disposizione, suddivise per categorie, moltissime icone adatte alle nostre applicazioni MetroStyle e quindi per la AppBar.

Ecco una screenshoot di Metro Studio 2:

Una volta trovata l’icona che più si adatta alle nostre esigenze possiamo andare a eseguire diverse personalizzazioni, tra qui: dimensioni, colore di sfondo, rotazione, colore della shape, etc etc… e quando abbiamo completato possiamo esportare lo XAML che è stato generato.

Ecco un esempio di personalizzazione:

Io direi solo WOW!!! 🙂 ci troviamo una icona vettoriale pronta da inserire in uno stile nel nostro ResourceDictionary 🙂

Ecco un esempio di XAML pronto da esportare:

Qui invece un esempio di stile completo:

Se non vogliamo scaricare Metro Studio 2 esiste anche
http://www.thexamlproject.com/ che permette di ricercare icone ed esportare lo XAML… l’unica differenza è che qui non possiamo personalizzare la nostra icona.

Bene, ora vi mostro un esempio dell’AppBar con l’icona “Collaps” preparata in precedenza:

Bene, credo di avervi raccontato tutto per oggi 🙂
Buon divertimento con le icone
Maurizio

Windows 8, WinRT, XAML AppBar with Icon Style

Ciao a tutti,
oggi voglio mostrare come è possibile personalizzare i buttons che andremo ad inserire nella nostra AppBar, in modo da renderli adatti ad una Applicazione MetroStyle.

Le icone/buttons utilizzate in Windows 8 sono frutto del font Segoe UI Symbol, che in sostanza contiene una serie di glifi (in formato unicode) particolarmente indicati da inserire nell’AppBar.

Possiamo vede questi glifi in anteprima, semplicemente utilizzando la Mappa dei Caratteri.
Ecco una screenshot:

Oppure se preferiamo avere un’anteprima reale delle icone, eccole qui enumerate per noi sul blog di Andam Kinney:
http://adamkinney.com/blog/2012/03/05/windows-8-appbarbuttonstyles-enumerated-and-visualized/

Quello che ora dobbiamo fare è definire un set di stili nel nostro ResourceDictionary utilizzando il font Segoe UI Symbol.

Fortunatamente Microsoft ci è venuta incontro per questa necessità .. 🙂

Quando si crea una nuovo progetto con Visual Studio 2012, nella soluzione viene incluso il file di risorsa StandardStyles.xaml, che contiene tutti gli stily/modelli di base per la nostra Applicazione.

Se andiamo ad analizzare meglio il file, al suo interno troviamo già definiti per noi un sottoinsieme di icone pronte all’utilizzo e molte altre che sono commentate.
Ecco un esempio di icona:

Come possiamo notare (questo per tutti gli stili), si basano su AppBarButtonStyle che definisce la forma tonda più tutti i vari stati: pressed,hover,etc,etc …

La prima domanda che viene da porsi è: Perchè le icone sono commentate nel file StandardStyle.xaml?
Credo che Microsoft abbia fatto questa scelta per evitare un file di Risorse molto grande senza che venga fruttato a pieno, in questo modo si agevola il lavoro del parser che non deve prendersi carico di risorse inutili.

Se siamo pratici nell’utilizzo di Blend possiamo andare ad associare gli stili ai nostri buttons utilizzando le
Local Resource in questo modo:

Ora abbiamo tutti gli elementi per realizzare una AppBar in stile MetroStyle tipo questa:

Nell’esempio di AppBar che vi ho mostrato è presente anche un “separator” che serve semplicemente per dividere le sezioni per “argomenti” (passatemi il termine), la possiamo realizzare in questo modo:

Spero vi possa essere di aiuto!
Buon Windows 8 App 🙂
Maurizio