Upload
emanuele-garofalo
View
50
Download
1
Embed Size (px)
DESCRIPTION
Citation preview
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!