Developing appealing application using XAML

Antonio Liccardi – Garofalo Emanuele

Agenda

• Introduzione rapida a XAML• Principi user experience • Touch Language• Transizioni

Introduzione a XAML

• Cos’è?• Perché

usarlo?• Cosa farci?

XAML – Cos’è

• Xaml è un linguaggio di markup derivato da XML Contenitore

Contenitore

Elemento

Contenitore

Elemento

Elemento

Contenitore

Elemento

<Contenitore> <Contenitore> <Elemento> <Contenitore> <Elemento/> </Contenitore> </Elemento> <Elemento> <Contenitore> <Elemento/> </Contenitore> </Elemento> </Contenitore></Contenitore>

XAML – Struttura «tipica» di un file

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

...

</Page>

Definizione della classe

Importazione di namespace

Il namespace «x»

Namespace di default

Introduzione a XAML - Perchè

One ring to rule them all

Introduzione a XAML – Cosa farci

Layout affascinanti

Non come il testo qui sopra

MICROSOFT DESIGN LANGUAGE

Microsoft Design Principles

Pride in craftsmanship

Microsoft Design Principles

Microsoft Design Principles

Microsoft Design Principles

Microsoft Design Principles

Pride in craftsmanship

Be fast and fluid

Microsoft Design Principles

Pride in craftsmanship

Be fast and fluid

Authentically digital

Microsoft Design Principles

Microsoft Design Principles

Be fast and fluid

Authentically digital

Do more with less

Pride in craftsmanship

Microsoft Design Principles

Microsoft Design Principles

Pride in craftsmanship

Be fast and fluid

Authentically digital

Do more with less

Win as one

MICROSOFT TOUCH LANGUAGE

Microsoft Touch Language

Press and hold to learn

Swipe to selectSlide to dragTap for primary action

Pinch to zoom Rotate to rotateSwipe from edge forapp and system UI

Microsoft Touch Language

Provide Feedback.

XAML & Touch Language

Pointer events

Gesture events

Manipulation events

TOUCH LANGUAGEDEMO

Cosa abbiamo imparato fino ad oggi?

Ma, per le interfacce touch, di cosa altro ha bisogno l’utente?

Animazioni in XAML

Alla base delle animazioni in per le Windows Store Apps c’è un solo namespace–Windows.UI.Xaml.Media.Animation

3 possibili approcci per le animazioni:• Transition Animations Effetti di transizione• Theme Animations Animazioni a Tema• Custom Animations Ho esigenze particolari

Transition Animations

Uso: Effetti da applicare ad elementi durante il loro «rendering» o più genericamente durante le «transizioni»

Transition Animations

Demo

Theme Animation

Uso: Animazioni a trigger «esplicito».

Theme Animations

Demo

Custom Animations

Uso: Controllo completo sulle animazioni con l’uso di StoryBoard, KeyFrame e Functions

MA OCCHIO

Animazioni Indipendenti

• Il valore di Duration dell'animazione è di 0 secondi• L'animazione è destinata alla

proprietà:• UIElement.Opacity • Canvas.Left o Canvas.Top• Brush (con l’uso di SolidColorBrush)• ObjectAnimationUsingKeyFrames• UIElement: RenderTransform, Projection,

Clip

Custom Animations

Demo

RIFERIMENTI

Microsoft Design Languagehttp://bit.ly/Sf8UDY

Microsoft Touch Languagehttp://bit.ly/N6tpiU http://bit.ly/XFaODU

Sampleshttp://code.msdn.microsoft.com/windowsapps

Our book!