designing appealing applications using xaml
Post on 17-Jun-2015
564 Views
Preview:
DESCRIPTION
TRANSCRIPT
Designing Appealing Apps Using XAML
Nicolò Carandiniblogs.ugidotnet.org/Nick60
n.carandini@tpcware.com
@TPCWare
• Funzionalità
• Facilità d’uso
• Reattività
• Robustezza
La qualità di un’applicazione
E’ tramite la User Interface che l’utente interagisce
con l’applicazione, ed è dagli screenshot che ci si
forma una prima idea della qualità di un’applicazione.
Qualità percepita
La User Interface è composta da:
• Layout degli elementi grafici
• Azioni che l’utente può eseguire sugli elementi
• Transizioni (eventualmente animate) da un stato
all’altro dell’applicazione
User Interface
Layout System
Vi sono diversi tipi di Layout System:
Canvas
• Windows Form
Hierarchical
• XAML Framework
• HTML/CSS
Ogni elemento è posizionato utilizzando una coppia di valori
(X, Y) rispetto all’origine della finestra, e i vari elementi possono
sovrapporsi uno all’altro, secondo un certo ordine (Z-order).
Canvas Layout
è caratterizzato da:
Interface composition
Gli elementi sono legati tra loro da relazioni
contenitore/contenuto.
Declarative definition
Si dichiara il valore delle proprietà degli elementi grafici
(margini, bordi, dimensioni, allineamenti, …) in modo da
lasciare al Layout System il calcolo dell’effettiva posizione.
Hierarchical Layout
La posizione degli elementi grafici dipende dal valore delle loro
proprietà:
Layout System
Rectangle:Fill=RedWidth=300Height=200
Rectangle:Fill=GreenWidth=300Height=200Margin= 10
Rectangle:Fill=BlueWidth=300Height=200Margin= 10
Rectangle:Fill=YellowWidth=300Height=200Margin= 10
Page
Rectangle:Fill=RedWidth=300Height=200
Per descrivere l’interfaccia grafica dell’esempio precedente,
visto che si tratta di un albero di elementi, viene naturale
utilizzare un linguaggio che derivi da XML:
<contenitore>
<contenitore>
<elemento/>
<contenitore>
<elemento/>
<elemento/>
<elemento/>
</contenitore>
</contenitore>
<elemento/>
</contenitore>
UI Language
WPF, Silverlight e XAML History
Nel 2006 la Microsoft rilascia WPF (Windows
Presentation Foundation) e introduce XAML come
linguaggio descrittivo delle interfacce grafiche.
WPF3.0
2006
WPF3.5
WPF4.0
SL1.0
WPF3.5 SP1
2007 2008 2009 2010 2011 2012
WPF4.5
SL2.0
SL3.0
SL4.0
SL5.0
XAML
Win
RT
.NET
Linguaggio dichiarativo
Descrive l’interfaccia grafica
Elementi grafici
Interazione con l’utente
Deriva da XML
eXtensible Markup Language
eXtensible Application Markup Language
XAML Language
XAML: framework o linguaggio?
A partire da Windows 8, XAML è sia un linguaggio sia
un framework, e il significato della sigla dipende dal
contesto in cui la si usa.
• XAML è il linguaggio per la descrizione di
interfacce grafiche.
• XAML è il framework di sviluppo per le Windows
Store Apps.
Windows Store Apps
XAML
CC++
C#VB
HTML/CSS
JavaScript
WinRT APIs
Windows Store Apps Desktop Apps
InternetExplorer
HTMLJavaScript
CC++
Win32
C#VB
.NETSL
Windows Kernel Services
XAML
CC++
C#VB
HTML/CSS
JavaScript
WinRT APIs
Windows Store Apps
Windows Kernel Services
Demo: XAML Example
Layout fluidi
Nello sviluppo di applicazioni
XAML, ogni pagina dev’essere
progettata in modo da potersi
adattare ai diversi form factor
e alle diverse view.
Form factors e pixel density
Windows scala automaticamente
gli elementi grafici per adattarsi alle
diverse risoluzioni dei device:
• 100% quando non scala
• 140% per device 1920 x 1080
con almeno 174 DPI
• 180% per device 2560 x 1440
con almeno 240 DPI
Application View & Device Orientation
Il Layout si deve adattare ai tre diversi
modi di vedere l’applicazione:
• Full
• Snapped
• Fill
E alla rotazione del device nei due
orientamenti:
• Landscape
• Portrait
Demo: Layout fluidi con XAML
Interazione con l’utente: gesture
Tap Press and hold Slide Swipe
Turn Pinch Swipe from edgefor App Cmd
Swipe from edgefor System Cmd
Windows 8 prevede un set
standard di interazioni che
l’utente può eseguire con i
diversi sistemi di input:
Touch
Mouse
Pen
Keyboard
Common interaction
XAML offre tre livelli di astrazione per facilitare la
gestione degli eventi Touch:
Gesture events
• Tapped, DoubleTapped, RightTapped, Holding
Pointer events
• PointerPressed, PointerReleased, PointerMoved,
PointerEntered, PointerExited
Manipulation events
Contengono informazioni di basso livello quali, ad
esempio, velocità e inerzia della gesture.
Touch Support
Demo: Touch
Quando l’utente interagisce con l’applicazione,
deve ricevere un segnale di risposta.
Ad esempio, un oggetto "toccabile" deve
reagire in modo visibile al tocco.
Per fornire questa risposta visuale, si usano le
animazioni.
Feedback visuale delle interazioni
Windows 8 introduce una serie di animazioni
predefinite, attentamente studiate per dare un
suggerimento visivo dell’interazione in corso.
I nuovi controlli introdotti con Windows 8, come ad
esempio FlipView, ListView e Flyout usano già tali
animazioni
Si possono utilizzare facilmente anche nei propri
controlli.
Vanno implementate se si vuol dare alla propria
applicazione il look and feel delle tipiche Windows
Store app.
Animazioni predefinite di Windows 8
Page transition: Animates the contents of a page into or out of view.
Content transition: Animates one piece or set of content into or out of view.
Fade in/out: Shows transient elements or controls.
Crossfade: Refreshes a content area.
Pointer up/down: Gives visual feedback of a tap or click on a tile.
Reposition: Moves an element into a new position.
Show/Hide popup: Displays contextual UI on top of the view.
Show/Hide edge UI: Slides edge-based UI into or out of view.
Show/Hide panel: Slides large edge-based panels into or out of view.
Add/Delete from list: Adds or deletes an item from a list.
Start/End a drag or drag-between: Gives visual feedback during a drag-and-drop operation.
Swipe hint: Hints that a tile supports the swipe interaction.
Swipe select/deselect: Transitions a tile to a swipe-selected state.
XAML Animation Library
Transition Animation
Ideally, your Windows Store app uses animations to enhance
the user interface or to make it more attractive without
annoying your users.
Theme Animation
You can use theme animations to enable more control while
still using a consistent Windows theme for how your
animation behaves.
Custom Animation
In Windows Store apps you animate objects by animating
their property values.
XAML Animation
Transition Animation
XAML introduce la nuova proprietà Transitions
dove possiamo elencare le transizioni che
devono essere applicate all’oggetto:
Transition Animation List
Quando si vuole controllare l’ordine e i tempi delle
animazioni, è possibile utilizzare una storyboard:
Theme Animation
Theme Animation List
Controllo completo di tutti gli aspetti:
Custom Animation
Demo: Animation
Documentazione Microsoft
Creating a UImsdn.microsoft.com/en-us/library/windows/apps/xaml/br229564.aspx
Miei articoli su DomusDotNet
Il fattore Xwww.domusdotnet.org/articoli/introduzione-a-xaml.aspx
Page Layout dinamici in XAMLwww.domusdotnet.org/articoli/page-layout-dinamici-in-xaml.aspx
Gestire i Visual state con VS 2012www.domusdotnet.org/articoli/gestire-i-visual-state-con-vs-2012.aspx
Riferimenti utili
top related