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