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

Windows 8 App Developer Group on Linkedin

Are you interested in keeping up to date and discussing topics about Windows 8, Windows 8 Store App,WinRT,XAML?

Don’t forget to join the new “Windows 8 App Developer” Group on Linkedin!!!!

Vuoi rimanere aggiornato e discutere su tematiche che riguardano Windows 8, Windows 8 Store App,WinRT,XAML?

Unisciti al gruppo “Windows 8 App Developer” su Linkedin!!

Maurizio

Framework.NET 4.5 to Support Zip File Manipulation Out of the Box

Ciao,

giusto in questi giorni durante la fase di realizzazione di un App per Windows 8, mi sono imbattuto nell’utilizzo di una delle novità del Framework 4.5, haimè poco pubblicizzate, ma che ritengo di notevole interesse, costituita dalla possibilità di manipolare archivi compressi con l’algoritmo Zip classico.

Stiamo parlando di un’aggiunta al già esistente namespace System.IO.Compression che ora viene incontro all’esigenza della gestione di archivi compressi.

Dopo questa prima sperimentazione posso assolutamente dire che questo nuovo namespace è un pò spartano, ma comunque un buon supporto se non abbiamo esigenze particolari, se invece abbiamo la necessità di usare funzionalità avanzate SharpZipLib e DotNetZip rimangono le library di riferimento. 🙂

Ad ampliare System.IO.Compression.dll ora abbiamo a disposizione il namespace System.IO.Compression.FileSystem.dll dove mettiamo in evidenza le classi:

System.IO.Compression.FileSystem.ZipFile
System.IO.Compression.FileSystem.ZipArchive

Partiamo con la classe ZipFile dove troviamo 2 metodi principali:
– CreateFromDirectory
– ExtractToDirectory

I due metodi ci permettono di zippare/upzippare un archivio in una determinata destinazione, vedi esempio qui sotto:

ZipFile.CreateFromDirectory("", "", CompressionLevel.Optimal, true)
ZipFile.ExtractToDirectory("", "")

Il nuovo namespace mette a disposizione due classi chiamate ZipArchive e ZipArchiveEntry, le quali rappresentano, rispettivamente, un archivio Zip e una entry, cioè un singolo elemento dello Zip/Archivio.

La classe ZipFile, vista in precedenza, espone un metodo Open che restituisce un’istanza di ZipArchive.
E’ quindi possibile leggere il contenuto dell’archivio eseguendo una semplice interazione della collezione Entries che risulta essere una ReadOnlyCollection vedi esempio:


using(ZipArchive zip = ZipFile.Open("", ZipArchiveMode.Read))
{
foreach(var item in zip.Entries)
{
Console.WriteLine("FileName: {0} ", item.FullName)
}
}

Ecco le proprietà della classe ZipArchiveEntry:
– FullName (che identifica il path completo del file)
– CompressedLength (dimensione in bytes da compresso)
– Length (la dimensione originaria del file)
– Name (nome senza il path)
– LastWriteTime (data/ora dell’ultima modifica)

Creazione di un Archivio compresso:

using(ZipArchive zip = ZipFile.Open("", ZipArchiveMode.Create))
{
zip.CreateEntry("", CompressionLevel.Optimal)
}

Modificare un archivio Zip esistente aggiungendo o rimuovendo file:

using(ZipArchive zip = ZipFile.Open("", ZipArchiveMode.Update))
{
zip.CreateEntry("", CompressionLevel.Fastest)
ZipArchiveEntry zipEntry = zip.GetEntry("")
zipEntry.Delete()
}

Vista la semplicità di utilizzo non mi soffermerei troppo sulle varie implementazioni mostrate, ma aggiugeree qualche considerazione:
– La classe ZipArchive implementa l’interfaccia IDisposable quindi è consigliato l’utilizzo nel blocco using.
– Durante la creazione di un archivio compresso i file elencati verranno aggiunti allo Zip solo quando il blocco using sarà finalizzato.
– Nella fase di Update di un archivio compresso, le modifiche saranno applicate solo quanto il blocco using sarà finalizzato.

Bene, credo di avervi raccontato tutta la mia esperienza sull’argomento, come accennato prima, il nuovo utilissimo namespace è ancora un pò spartano viste le poche funzionalità a disposizione, ma è comunque un inizio è un buon supporto nell’attesa di una sua estensione nelle prossime versioni del Framework.

Maurizio 🙂

Using Callisto Library and SettingsFlyout !!!!

Ciao,
vediamo come utilizzare il controllo SettingFlyout messo a disposizione dalla Callisto Library per la nostra Settings Charm.

Partendo dal post precedente dove abbiamo parlato e visto come scaricare la Callisto Library ora proviamo ad utilizzarla per realizzare una
Settings Charm per le nostre Windows 8 Apps.

Qui ci mettiamo in ascolto sulla richiesta da parte dell’utente della Setting Pane:

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            SettingsPane.GetForCurrentView().CommandsRequested += OnSettingsPane_CommandsRequested;
            base.OnNavigatedTo(e);
        }

        protected override void OnNavigatedFrom(NavigationEventArgs e)
        {
            SettingsPane.GetForCurrentView().CommandsRequested -= OnSettingsPane_CommandsRequested;
            base.OnNavigatedFrom(e);
        }

Nel delegato andiamo a definire la nostra SettingFlyout:

private void OnSettingsPane_CommandsRequested(SettingsPane sender,SettingsPaneCommandsRequestedEventArgs args)
{
SettingsCommand cmd = new SettingsCommand("", "", (x) =>
{
//nuova SettingsFlyout - CallistoLibrary
SettingsFlyout settings = new SettingsFlyout();

//Configurazione
settings.FlyoutWidth = Callisto.Controls.SettingsFlyout.SettingsFlyoutWidth.Wide;
settings.HeaderBrush = new SolidColorBrush(Color.FromArgb(255, 139, 69, 19));
settings.HeaderText = "

"
settings.Background = new ImageBrush { ImageSource = new BitmapImage(new Uri(@"ms-appx:/Assets/BackgroundImage.png")) };

//Contenuto della SettingsFlyout
settings.Content = new SettingContent();

settings.IsOpen = true;
});
args.Request.ApplicationCommands.Add(cmd);
}

Molto rapidamente abbiamo configurato la nostra Settings Charm creando un nuovo SettingsCommand e definendo al suo interno una SettingsFlyout parte della Callisto Library.

In aggiunta come esempio ho creato una page di contenuto dedicata SettingContent fatta in questo modo:

<Page
x:Class=".SettingContent"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<TextBlock Text="" FontSize="28" Margin="10,0,0,0" />
<TextBox x:Name="" Width="400"
HorizontalAlignment="Left" Margin="10,0,0,0" />

Ecco il risultato finale:

Settings Charm

Settings Charm

Windows 8, WinRT, Privacy and Policy!!!

Ciao a tutti,
per esperienza personale pubblico questo POST!!!! 😦

Se state sviluppando un App per Windows 8 o siete pronti per la fase si Certificazione a parte ricordarvi di leggere tutti i “requirements” necessari per l’approvazione vi ricordo vivamente la Privacy.

La “Privacy” deve apparire in due step:

Description Page pagina di dettaglio del prodotto sullo Store, qui deve comparire un rimando alla Privacy and Policy.

Settings Charm anche qui deve comparire un rimando alla stessa Privacy.

Tutto queste è necessario se la Vostra App utilizza in qualche informazioni personali, condivisione, memorizzazione, etc etc …

Vi ricordo questo, prima di ricevere un bel “Reject” dell’App dopo l’attesa di 7 giorni.

Maurizio 🙂

Callisto library for Windows Store App

Ciao a tutti,
devo obbligatoriamente segnalare (per chi non fosse a conoscenza) e dopo aver lavorato direttamente con questo toolkit, che arriva in soccorso per lo sviluppo delle nostre Win 8 Apps.

Callisto è un appunto una library scaricabile liberamente da github oppure tramite NuGET.

Al suo interno troveremo oltre alla demo, diversi controlli, helper, converter, nati per semplificarci la vita … 🙂

Un breve elenco delle features presenti:

– Flyout (a primitive that includes positioning and ‘light dismiss’ logic)
– Menu (primarily to be used from AppBar, contains the base for providing, well, a Menu)
– MenuItem (an item for a menu, including separators and contains the command point for the menu item)
– SettingsFlyout (an item to create a custom settings pane UI)
– Rating (a ratings control for Metro UI)
– LiveTile (an in-app tile experience to give you animated or ‘live’ tiles)
– Tilt (an effect to provide the tilt experience when clicked on edges/corners)
– OAuth helpers (a set of helpers to create OAuth 1.0 signatures/headers for those sites that hate OAuth 2.0)
– BooleanToVisibilityConverter
– LengthToBooleanConverter
– RelativeTimeConverter
– Extensions

Onori agli sviluppatori di questo toolkit: Tim Heuer and Morten Nielsen.

Buon Win 8 App a tutti 🙂
Maurizio