VisualStudio 2012

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

Windows 8, WinRT, ApplicationData, Settings Charm

Ciao a tutti,
prima di riprendere con gli articoli legati all’uso del Pattern MVVM sulle Windows 8 Apps, parleremo di come manipolare i settings localmente.

La prima cosa che balza all’occhio quando si è davanti ad un progetto Windows 8 Store App e che non abbiamo più a disposizione il file App.Config, ormai storico compagno da anni 🙂 (che nel bene o nel male ci permetteva di salvare parti di configurazione in modo molto rapido)

Quindi la domanda successiva è: Come posso gestire i miei Settings?

WinRT ci fornisce diverse nuove API pronte all’uso che ci rendono il lavoro molto più semplice è veloce per manipolare, caricare, memorizzare i nostri dati.

Facciamo un passo indietro, prima di vedere come è possibile manipolare dei dati in locale dobbiamo conoscere cosa avviene dietro le quinte durante un Deploy piuttosto che un Download/Installazione dallo Store.

Windows 8 crea per noi una folder dove risiede il nostro Package (App) e una cartella sotto il path: user/appdata/local/packages/ dove possiamo liberamente andare a scrivere, leggere, creare cartelle, manipolare dati.

<code
//Qui la struttura di esempio dopo un Deploy
MyAppFolder
– (installazione dell'App e Folder Dedicata)

// Qui AppDataFolder per MyAppFolder
user/appdata/local/packages/
– LocalState
– RoamingState
– TempState
– Settings

Ecco come accedere alle rispettive Folder/Settings sopra descritte:

//Roaming
Windows.Storage.ApplicationData.Current.RoamingFolder
Windows.Storage.ApplicationData.Current.RoamingSettings

//Local
Windows.Storage.ApplicationData.Current.LocalFolder
Windows.Storage.ApplicationData.Current.LocalSettings

//Temp
Windows.Storage.ApplicationData.Current.TemporaryFolder

– Settings: semplici settaggi accessibili dalla “Settings Charm” che possono essere sincronizzati tra macchine (Roaming)
– LocalSettings: dati persistenti tra le sessioni di un App
– Temporary: dati in cache temporanea utilizzata come area di lavoro, garantiscono ottime prestazioni.

Qui il <link> per il download degli esempi.

Un breve esempio di come scrivere i nostri Settings, l’accesso e tramite IDictionary quindi i tipi base a disposizione in WinRT:

//RoamingSettings
Windows.Storage.ApplicationData.Current.RoamingSettings.Values[“MyRoamingSetting] = MyRoamingValue;

//LocalSettings
Windows.Storage.ApplicationData.Current.LocalSettings.Values[“MyLocalSetting] = MyLocalValue;

Quando usiamo i RoamingSettings è perchè abbiamo pensato ad una possibile installazione dell’App su più Device che accedono con la stessa utenza, a questo punto Windows 8 sincronizzerà per noi il contenuto.

Ora vi mostro un esempio di classe in grado di gestire dei Settings:

// SettingsHelper
public static class SettingsHelper
{
public static ApplicationDataContainer SettingsContainer { get; set; }

static SettingsStore()
{
SettingsContainer = ApplicationData.Current.LocalSettings;

/* SettingsContainer = ApplicationData.Current.RoamingSettings; */
}

///

/// AppName
///

public static string AppName
{
get { return SettingsContainer.Values["AppName"] as string; }
set { SettingsContainer.Values["AppName"] = value; }
}

///

/// RootFolder
///

public static string RootFolder
{
get { return SettingsContainer.Values["RootFolder"] as string; }
set { SettingsContainer.Values["RootFolder"] = value; }
}
}

Come possiamo notare, molto velocemente siamo in grado di cambiare il settings su cui andremo a leggere/scrivere senza modificare la rimanenza del codice.
Questo esempio di classe è utilizzabile con la SettingsCharm, chiaro dovremo aggiungere 2 funzionalità per fare il Load/Save dei dati. 🙂

Buon Windows 8 App a tutti!!! 🙂
Maurizio