These slides have been presented at the XeDotNet meeting on May 3rd 2012.

1. agenda
sviluppare applicazioni metro
con windows 8 e winrt
andrea boschin – MVP Silverlight, Metro Insider

2. agenda
sviluppare applicazioni metro
con windows 8 e winrt
andrea boschin – MVP Silverlight

3. agenda
metro guidelines XeDotNet andrea@boschin.it
metro applications & winrt q&a @aboschin
tools & templates desktop codeblock68
feedback
features
10

4. agenda
metro guidelines XeDotNet andrea@boschin.it
metro applications & winrt q&a @aboschin
tools & templates desktop codeblock68
feedback
features
10

5. metro guidelines
o collezione di regole di design
o hanno lo scopo di migliorare la
user experience
o adottate da Windows Phone 7
o basate su 5 «pillar»
• be authentically digital
• do more with less
• be fast and fluid
• show pride in craftsmanship
• win as one
metro guidelines

6. metro guidelines
win as one be autentically digital do more with l
o riconoscimento della natura digitale dello strumento
o rimozione di #skeuomorphic design
o rimozione del chrome: il contenuto è la struttura
o valorizzazione del colore
o valorizzazione dello spazio

7. metro guidelines
win as one be autentically digital do more with l
o riconoscimento della natura digitale dello strumento
o rimozione di #skeuomorphic design
o rimozione del chrome: il contenuto è la struttura
o valorizzazione del colore
o valorizzazione dello spazio

8. metro guidelines
win as one be autentically digital do more with l
Il design è skeuomorfico.
nel tentativo di imitare la realtà
l’interfaccia stanca l’occhio
senza dare un valore aggiunto
Il design è minimale.
tralasciando di imitare la realtà
sfrutta al meglio lo strumento
digitale

9. metro guidelines
win as one be autentically digital do more with l
Il design è skeuomorfico.
nel tentativo di imitare la realtà
l’interfaccia stanca l’occhio
senza dare un valore aggiunto
Il design è minimale.
tralasciando di imitare la realtà
sfrutta al meglio lo strumento
digitale

10. metro guidelines
ntically digital do more with less be fast and fluid
o elogio della semplicità
o rimozione di elementi inutili
o rimozione di feature ridondanti e sofisticate
o ottenere lo scopo con il minimo sforzo possibile
"sai di aver raggiunto la perfezione non quando non hai più
nulla da aggiungere ma quando non ti resta altro da
togliere.“
Antoine de Saint-Exupéry

11. metro guidelines
ntically digital do more with less be fast and fluid
o elogio della semplicità
o rimozione di elementi inutili
o rimozione di feature ridondanti e sofisticate
o ottenere lo scopo con il minimo sforzo possibile
"sai di aver raggiunto la perfezione non quando non hai più
nulla da aggiungere ma quando non ti resta altro da
togliere.“
Antoine de Saint-Exupéry

12. metro guidelines
more with less be fast and fluid show pride in cra
o la rapidità compensa la scarsità di elementi nella UI
o la fluidità nell’interfaccia comunica continuità
o l’uso di animazioni da un feedback all’utente

13. metro guidelines
more with less be fast and fluid show pride in cra
o la rapidità compensa la scarsità di elementi nella UI
o la fluidità nell’interfaccia comunica continuità
o l’uso di animazioni da un feedback all’utente

14. metro guidelines
e fast and fluid show pride in craftsmanship win
o cura nei particolari
o accuratezza nelle scelte
o completezza nelle feature
o pulizia nel colore e nel carattere

15. metro guidelines
e fast and fluid show pride in craftsmanship win
o cura nei particolari
o accuratezza nelle scelte
o completezza nelle feature
o pulizia nel colore e nel carattere

16. metro guidelines
ftsmanship win as one be autentically digital do
o è incoraggiata la collaborazione tra le applicazioni
o esporre interfaccia di share
o accettare lo share proposto da altre applicazioni
o l’unione fa la forza (win as one)

17. metro applications & winrt
o metro style application
applicazione basata su un nuovo
ambiente sandboxed che può
essere scaricata mediante il
Windows 8 Store.
o winrt
nuovo runtime che incapsula le api
di basso livello di Windows 8
mediante un paradigma object
oriented
o windows metadata (winmd)
metro applications & winrt
metadati esposti come assembly
.NET per condividere i servizi di
winrt tra diversi linguaggi

18. metro applications & winrt
metadata metro style applications windows ru
o create per essere multi piattaforma
• Intel
• ARM
o ottimizzate per l'uso con touch e mouse
• design touch-first
• i controlli supportano egregiamente anche il mouse
o si possono realizzare in vari linguaggi
• XAML + C# o VB.NET
• XAML + C++
• HTML5 + CSS3 + Javascript

19. metro applications & winrt
metadata metro style applications windows ru
o create per essere multi piattaforma
• Intel
• ARM
o ottimizzate per l'uso con touch e mouse
• design touch-first
• i controlli supportano egregiamente anche il mouse
o si possono realizzare in vari linguaggi
• XAML + C# o VB.NET
• XAML + C++
• HTML5 + CSS3 + Javascript

20. metro applications & winrt
metadata metro style applications windows ru
User Interface
HTML5/CSS XAML DirectX Controls Data Binding
SVG Tiles Input Accessibility Printing
Devices Communications & Data
Geolocation Portable Sensors NFC Contracts Local & Cloud Storage Web
Notifications Streams
Media
Visual Background
Playback Capture PlayTo XML Networking SMS
Effects Transfer
Fundamentals
Application Services Threading/Timers Memory Management Authentication Cryptography Globalization

21. metro applications & winrt
metadata metro style applications windows ru
User Interface
HTML5/CSS XAML DirectX Controls Data Binding
SVG Tiles Input Accessibility Printing
Devices Communications & Data
Geolocation Portable Sensors NFC Contracts Local & Cloud Storage Web
Notifications Streams
Media
Visual Background
Playback Capture PlayTo XML Networking SMS
Effects Transfer
Fundamentals
Application Services Threading/Timers Memory Management Authentication Cryptography Globalization

22. metro applications & winrt
cations windows runtime windows metadata
o multipiattaforma
• pensato per essere consumato da diversi linguaggi
• è la parte del sistema veramente x-platform
o object oriented
• incapsula le API di Windows e le rende Object Oriented
• basato su COM (IUnknown e IInspectable)
Your
Windows Windows 8
Managed
Runtime API
Code

23. metro applications & winrt
cations windows runtime windows metadata
o multipiattaforma
• pensato per essere consumato da diversi linguaggi
• è la parte del sistema veramente x-platform
o object oriented
• incapsula le API di Windows e le rende Object Oriented
• basato su COM (IUnknown e IInspectable)
Your
Windows Windows 8
Managed
Runtime API
Code

24. metro applications & winrt
cations windows runtime windows metadata
Metro style Apps Desktop Apps
View
XAML HTML / CSS
JavaScript
Controller
Model
C/C++ C#, VB HTML C C#
(Chakra) JavaScri C++ VB
pt
Windows Runtime APIs
System Services
Communication Graphics & Devices &
& Data Media Printing
Application Model Internet .NET
Win32 SL
Explorer
Windows Kernel Services
Kerne
l

25. metro applications & winrt
cations windows runtime windows metadata
Metro style Apps Desktop Apps
View
XAML HTML / CSS
JavaScript
Controller
Model
C/C++ C#, VB HTML C C#
(Chakra) JavaScri C++ VB
pt
Windows Runtime APIs
System Services
Communication Graphics & Devices &
& Data Media Printing
Application Model Internet .NET
Win32 SL
Explorer
Windows Kernel Services
Kerne
l

26. metro applications & winrt
s runtime windows metadata metro style applic
o espongono i metadati di winrt
• formato binario derivato di metadati CLI
• abilitano la condivisione multi-language
• i namespace Windows.* sono esposti tramite winmd
o creazione di componenti per winrt
• generati nativamente dai compilatori C++, C# e VB.NET
• i propri componenti come winmd sono visibili a Javascript
• ci sono numerose limitazioni nei tipi da esporre a JS

27. metro applications & winrt
s runtime windows metadata metro style applic
o espongono i metadati di winrt
• formato binario derivato di metadati CLI
• abilitano la condivisione multi-language
• i namespace Windows.* sono esposti tramite winmd
o creazione di componenti per winrt
• generati nativamente dai compilatori C++, C# e VB.NET
• i propri componenti come winmd sono visibili a Javascript
• ci sono numerose limitazioni nei tipi da esporre a JS

28. metro applications & winrt
s runtime windows metadata metro style applic
Projection
IInspectable C++ App
IUnknown
Projection
C#/VB App
CLR
Object
Projection
HTML App
Chakra
Windows
Metadata

29. metro applications & winrt
s runtime windows metadata metro style applic
Projection
IInspectable C++ App
IUnknown
Projection
C#/VB App
CLR
Object
Projection
HTML App
Chakra
Windows
Metadata

30. tools & templates
o Windows 8 Consumer Preview
o Visual Studio 11 + Blend
o Progetti Metro
o Metro Simulator
tools & templates

31. tools & templates
Simulator Windows 8 Consumer Preview Vi
o download
• setup
http://windows.microsoft.com/en-US/windows-8/download
• iso images
http://windows.microsoft.com/en-US/windows-8/iso
o versioni
• x86 (32bit), x64 (64bit)
• Inglese, Cinese, Francese, Tedesco e Giapponese
o requisiti
• 1GB ram
• 1GHz processor
• Installazione fisica, VHD o virtuale
• consigliato
• VMWare player o VirtualBox

32. tools & templates
Simulator Windows 8 Consumer Preview Vi
o download
• setup
http://windows.microsoft.com/en-US/windows-8/download
• iso images
http://windows.microsoft.com/en-US/windows-8/iso
o versioni
• x86 (32bit), x64 (64bit)
• Inglese, Cinese, Francese, Tedesco e Giapponese
o requisiti
• 1GB ram
• 1GHz processor
• Installazione fisica, VHD o virtuale
• consigliato
• VMWare player o VirtualBox

33. tools & templates
umer Preview Visual Studio 11 + Blend Prog
o Download
• Visual Studio 11 + Blend
http://msdn.microsoft.com/en-us/windows/apps/hh852659
• Tools & SDK
http://msdn.microsoft.com/en-us/windows/apps/br229516
o Visual Studio
• nuova interfaccia Metro style
• nuove feature
• template di progetto per applicazioni Metro
o Blend
• integra versione per HTML5
• piuttosto instabile la parte XAML (ma migliorera...)

34. tools & templates
umer Preview Visual Studio 11 + Blend Prog
o Download
• Visual Studio 11 + Blend
http://msdn.microsoft.com/en-us/windows/apps/hh852659
• Tools & SDK
http://msdn.microsoft.com/en-us/windows/apps/br229516
o Visual Studio
• nuova interfaccia Metro style
• nuove feature
• template di progetto per applicazioni Metro
o Blend
• integra versione per HTML5
• piuttosto instabile la parte XAML (ma migliorera...)

35. tools & templates
11 + Blend Progetti Metro Metro Simulator
o Visua Studio 11
• integra nuovi template di progetto per Javascript, C# e C++
o Template
• applicazione Metro
• blank
• grid
• split
• class library Metro
• utile anche per produrre ".winmd"

36. tools & templates
11 + Blend Progetti Metro Metro Simulator
o Visua Studio 11
• integra nuovi template di progetto per Javascript, C# e C++
o Template
• applicazione Metro
• blank
• grid
• split
• class library Metro
• utile anche per produrre ".winmd"

37. tools & templates
getti Metro Metro Simulator Windows 8 Con
o simulatore
• consente di debuggare senza un device touch
• simula orientamento, snapping, etc..
• simula anche sensore GPS
o come si avvia?
• modalità di avvio di Visual Studio

38. tools & templates
getti Metro Metro Simulator Windows 8 Con
n device touch
etc..
io

39. demo

40. features
o javascript o C#
o programmazione asincrona
o navigazione & appbar
o layout & orientation
o controlli
o charm & contracts
o tiles
features

41. features
ntracts tiles javascript o C# programmazione a
o Javascript + HTML5 + CSS3
PRO
• interessante soluzione con skill di HTML5 + CSS3 (ma non
basta)
• set di «controlli» che aiutano molto
• blend for HTML è eccellente
CONS
• quello che scrivete non è cross-platform
• javascript non è da tutti
o C# + XAML
PRO
• recuperati il 99% degli skill Silverlight
• un linguaggio efficace che risolve problemi
CONS
• siete fuori moda

42. features
ntracts tiles javascript o C# programmazione a
o Javascript + HTML5 + CSS3
PRO
• interessante soluzione con skill di HTML5 + CSS3 (ma non
basta)
• set di «controlli» che aiutano molto
• blend for HTML è eccellente
CONS
• quello che scrivete non è cross-platform
• javascript non è da tutti
o C# + XAML
PRO
• recuperati il 99% degli skill Silverlight
• un linguaggio efficace che risolve problemi
CONS
• siete fuori moda

43. features
avascript o C# programmazione asincrona navig
o modello completamente asincrono
• le api di WinRT sono molto spesso asincrone
• per convenzione i metodi asincrono hanno il suffisso
«Async»
• ad esempio
• accesso alla rete
• filesystem
• message dialog
• etc...
o in precedenza asincrono significava
• hard to write
• hard to understand
• hard to maintain
il codice asicroni è focalizzato a gestire la complessità
dell’asincronia piuttosto che l'obbiettivo finale

44. features
avascript o C# programmazione asincrona navig
o modello completamente asincrono
• le api di WinRT sono molto spesso asincrone
• per convenzione i metodi asincrono hanno il suffisso
«Async»
• ad esempio
• accesso alla rete
• filesystem
• message dialog
• etc...
o in precedenza asincrono significava
• hard to write
• hard to understand
• hard to maintain
il codice asicroni è focalizzato a gestire la complessità
dell’asincronia piuttosto che l'obbiettivo finale

45. features
avascript o C# programmazione asincrona navig
o prima - callback ed eventi
public void CallMyMethod()
{
MyServiceClient client = new MyServiceClient();
client.MyMethodCompleted += HandleMyMethodCompleted;
client.MyMethodAsync();
}
private void HandleMyMethodCompleted(object sender, AsyncEventArgs e)
{}
o oggi - keyword «async + await»
public async void CallMyMethod()
{
MyServiceClient client = new MyServiceClient();
await client.MyMethodAsync();
}

46. features
avascript o C# programmazione asincrona navig
o prima - callback ed eventi
public void CallMyMethod()
{
MyServiceClient client = new MyServiceClient();
client.MyMethodCompleted += HandleMyMethodCompleted;
client.MyMethodAsync();
}
private void HandleMyMethodCompleted(object sender, AsyncEventArgs e)
{}
o oggi - keyword «async + await»
public async void CallMyMethod()
{
MyServiceClient client = new MyServiceClient();
await client.MyMethodAsync();
}

47. features
avascript o C# programmazione asincrona navig
o basato su Task Parallel Library
• la chiamata asincrona restituisce un «future» object (Task)
• Task, Task<T>, e una serie di altre interfacce
• il codice successivo è considerato la «task
continuation»
• il codice è del tutto simile a quello di una chiamata sincrona
• Mantenuto lo stato tra prima e dopo la chiamata
• Gestione delle eccezione con try-catch
• il «future» può essere manipolato
• es: WhenAny e WhenAll controllano collection di Task
• differenze tra .NET Framework e WinRT future objects
• WinRT non dispone di alcuni metodi
• usare AsTask() per ottenere un future di .NET

48. features
avascript o C# programmazione asincrona navig
o basato su Task Parallel Library
• la chiamata asincrona restituisce un «future» object (Task)
• Task, Task<T>, e una serie di altre interfacce
• il codice successivo è considerato la «task
continuation»
• il codice è del tutto simile a quello di una chiamata sincrona
• Mantenuto lo stato tra prima e dopo la chiamata
• Gestione delle eccezione con try-catch
• il «future» può essere manipolato
• es: WhenAny e WhenAll controllano collection di Task
• differenze tra .NET Framework e WinRT future objects
• WinRT non dispone di alcuni metodi
• usare AsTask() per ottenere un future di .NET

49. features
ione asincrona navigazione & appbar layout & o
o modello di applicazione
• composta da numerose pagine (modello web)
• navigazione tra pagine con passaggio di parametri
• in App.xaml.cs viene creato un "Frame"
• ciascuna pagina detiene un riferimento al frame
o strumenti
• metodi per la navigazione
• Navigate(), GoBack(), GoForward(), StopLoading()
• proprietà per verificare lo stato della navigazione
• CanGoBack, CanGoForward
• eventi di navigazione
• Navigated, Navigating, NavigationFailed,
NavigationStopped
o persistenza
• metodi per persistere e ripristinare lo stato
• GetNavigationState, SetNavigationState

50. features
ione asincrona navigazione & appbar layout & o
o modello di applicazione
• composta da numerose pagine (modello web)
• navigazione tra pagine con passaggio di parametri
• in App.xaml.cs viene creato un "Frame"
• ciascuna pagina detiene un riferimento al frame
o strumenti
• metodi per la navigazione
• Navigate(), GoBack(), GoForward(), StopLoading()
• proprietà per verificare lo stato della navigazione
• CanGoBack, CanGoForward
• eventi di navigazione
• Navigated, Navigating, NavigationFailed,
NavigationStopped
o persistenza
• metodi per persistere e ripristinare lo stato
• GetNavigationState, SetNavigationState

51. features
ione asincrona navigazione & appbar layout & o
o application bars
• appaiono con swipe o right click
• top & bottom sono esposte dall'oggetto Page
• il contenuto è discrezionale (non fisso come in WP7)
o principi
• nav bar: nella posizione top
• thumbnails di accesso rapido (es: IE10)
• sezioni dell'applicazione
• app bar: nella posizione bottom
• comandi globali (sulla sinistra)
• comandi contestualizzati (sulla destra)

52. features
ione asincrona navigazione & appbar layout & o
o application bars
• appaiono con swipe o right click
• top & bottom sono esposte dall'oggetto Page
• il contenuto è discrezionale (non fisso come in WP7)
o principi
• nav bar: nella posizione top
• thumbnails di accesso rapido (es: IE10)
• sezioni dell'applicazione
• app bar: nella posizione bottom
• comandi globali (sulla sinistra)
• comandi contestualizzati (sulla destra)

53. features
azione & appbar layout & orientation controlli c
o layout
• privilegiato lo spazio orizzontale a quello verticale
• deve tenere in considerazione diversi form-factor
• la differenza di spazio tra form-factors va utilizzata
• in alternativa usare ViewBox per adattare la dimensione
o strumenti
• in XAML: Grid, StackPanel, Canvas to the rescue
• disponibilità di controlli per implementare pagine e "hub"
o ViewState
• indica l'orientamento e lo stato "visuale"
• FullScreenLandscape
• Filled
• Snapped
• FullScreenPortrait
• è obbligatorio gestirla

54. features
azione & appbar layout & orientation controlli c
full screen landscape full screen portrait
orizzontale a quello verticale
erazione diversi form-factor
tra form-factors va utilizzata
ewBox per adattare la dimensione
snapped
Panel, Canvas to the rescue
i per implementare pagine e "hub"
e lo stato "visuale"
cape filled
t

55. controlli
orientation controlli charm & contracts tiles
o nuovi controlli metro-style
• FlipView : singolo elemento
• ListView : lista verticale
• GridView : list orizzontale
• ListView e GriddView supportano il grouping
o nuovi template per ItemsPanel
• WrapGrid
• VariableSizedWrapGrid
• CarouselPanel
o SemanticZoom
• controllo che utilizza GridView e/o ListView
• per navigare si usa pich & zoom
• per zoom semantico si intende lo zoom nel
raggruppamento
• anni > foto negli anni
• giorni > appuntamenti

56. features
orientation controlli charm & contracts tiles
o nuovi controlli metro-style
• FlipView : singolo elemento
• ListView : lista verticale
• GridView : list orizzontale
• ListView e GriddView supportano il grouping
o nuovi template per ItemsPanel
• WrapGrid
• VariableSizedWrapGrid
• CarouselPanel
o SemanticZoom
• controllo che utilizza GridView e/o ListView
• per navigare si usa pich & zoom
• per zoom semantico si intende lo zoom nel
raggruppamento
• anni > foto negli anni
• giorni > appuntamenti

57. features
orientation controlli charm & contracts tiles
o transizioni
• gestiscono l'ingresso e l'uscita di elementi • Cr
• Cr
• applicate in un ItemsControl con • Dr
• ChildrenTransitions • Fa
• ItemContainerTransitions • Fa
• ContentTransitions • Po
• applicate nei controlli • Po
• Transitions • Re
• Se
• tipi: • Se
• EntranceThemeTransition • Sp
• RepositionThemeTransition • Ta
• Ta
o animazioni
• Sp
• gestiscono varie situazioni

58. features
orientation controlli charm & contracts tiles
resso e l'uscita di elementi • CrossSlideBackThemeAnimation
• CrossSlideHintThemeAnimation
temsControl con • DropTargetItemThemeAnimation
ansitions • FadeInThemeAnimation
inerTransitions • FadeOutThemeAnimation
ansitions • PopInThemeAnimation
ntrolli • PopOutThemeAnimation
s • RepositionThemeAnimation
• SelectDownThemeAnimation
• SelectUpThemeAnimation
hemeTransition • SplitCloseThemeAnimation
ThemeTransition • TapDownThemeAnimation
• TapUpThemeAnimation
• SplitOpenThemeAnimation
e situazioni

59. features
n controlli charm & contracts tiles javascript
o charms
• rappresentano le 4 azioni di una applicazione
• search : ricerca
• share : condivisione
• devices : connessione a dispositivi
• settings : impostazioni
o contracts
• sono le modalità con cui una applicazione espone uno
charm
• si impostano dal manifest
• si gestiscono implementando la gestione di eventi
• esempio – search contract
• espone windows.search
• gestisce l'evento di ricerca "da charm"
• gestisce l'evento di ricerca "dall'esterno"
• eventuamente supportare i "suggerimenti"

60. features
n controlli charm & contracts tiles javascript
o charms
• rappresentano le 4 azioni di una applicazione
• search : ricerca
• share : condivisione
• devices : connessione a dispositivi
• settings : impostazioni
o contracts
• sono le modalità con cui una applicazione espone uno
charm
• si impostano dal manifest
• si gestiscono implementando la gestione di eventi
• esempio – search contract
• espone windows.search
• gestisce l'evento di ricerca "da charm"
• gestisce l'evento di ricerca "dall'esterno"
• eventuamente supportare i "suggerimenti"

61. features
& contracts tiles javascript o C# programmaz
o a cosa serve?
• è l'elemento più visto dell'applicazione
• una tile ben fatta può migliorare la percezione dell'utente
o come funziona?
• esiste sempre almeno una tile square di default
• opzionalmente si può definire la versione wide
• la tile può contenere un badge
• mediante notifiche è possibile cambiare aspetto, dimensione e
contenuto scegliendo tra uno dei template disponibili
• una notifica ha formato XML e può contenere diverse versioni della
tile
o come si aggiorna?
• si manda una notifica locale dall'applicazione stessa
• si riceve una notifica push
• la notifica può avere una scadenza oltre la quale la tile torna al
default
o inoltre
• è possibile creare una coda di notifiche (max 5)

62. features
& contracts tiles javascript o C# programmaz
o a cosa serve?
• è l'elemento più visto dell'applicazione
• una tile ben fatta può migliorare la percezione dell'utente
o come funziona?
• esiste sempre almeno una tile square di default
• opzionalmente si può definire la versione wide
• la tile può contenere un badge
• mediante notifiche è possibile cambiare aspetto, dimensione e
contenuto scegliendo tra uno dei template disponibili
• una notifica ha formato XML e può contenere diverse versioni della
tile
o come si aggiorna?
• si manda una notifica locale dall'applicazione stessa
• si riceve una notifica push
• la notifica può avere una scadenza oltre la quale la tile torna al
default
o inoltre
• è possibile creare una coda di notifiche (max 5)

63. contacts
o Feedback su:
• http://xedotnet.org/feedbac
andrea@boschin.it
k
o Codice evento
@aboschin
• S3YLM
codeblock68
feedback
10