1. Developing appealing
application using XAML
Antonio Liccardi – Garofalo Emanuele

2. Agenda
• Introduzione rapida a XAML
• Principi user experience
• Touch Language
• Transizioni

3. Introduzione a XAML
• Cos’è?
• Perché usarlo?
• Cosa farci?

4. XAML – Cos’è
• Xaml è un linguaggio di markup derivato da
XML Contenitore
<Contenitore>
<Contenitore> Contenitore
<Elemento>
<Contenitore> Elemento
<Elemento/> Contenitore
</Contenitore>
</Elemento> Elemento
<Elemento>
<Contenitore>
<Elemento/> Elemento
</Contenitore> Contenitore
</Elemento>
</Contenitore> Elemento
</Contenitore>

5. XAML – Struttura «tipica» di un file
<Page Definizione della classe
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" Importazione di namespace
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-
compatibility/2006"
mc:Ignorable="d">
...
Namespace di default
</Page>
Il namespace «x»

6. Introduzione a XAML - Perchè

7. Introduzione a XAML – Cosa farci
Non come il testo qui sopra

8. MICROSOFT DESIGN
LANGUAGE

9. Microsoft Design Principles

10. Microsoft Design Principles

11. Microsoft Design Principles

12. Microsoft Design Principles

13. Microsoft Design Principles

14. Microsoft Design Principles

15. Microsoft Design Principles

16. Microsoft Design Principles

17. Microsoft Design Principles

18. Microsoft Design Principles

19. MICROSOFT TOUCH
LANGUAGE

20. Microsoft Touch Language
Press and hold to learn Tap for primary action Slide to drag Swipe to select
Swipe from edge for
Pinch to zoom app and system UI Rotate to rotate

21. Microsoft Touch Language
Provide Feedback.

22. XAML & Touch Language
Pointer events
Gesture events
Manipulation events

23. DEMO
TOUCH LANGUAGE

24. Cosa abbiamo imparato fino ad oggi?
Ma, per le interfacce touch, di cosa altro ha
bisogno l’utente?

25. 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

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

27. Transition Animations

28. Theme Animation
Uso: Animazioni a trigger «esplicito».

29. Theme Animations

30. Custom Animations
Uso: Controllo completo sulle animazioni
con l’uso di StoryBoard, KeyFrame e
Functions
MA
OCCHIO

31. 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

32. Custom Animations

33. RIFERIMENTI
Microsoft Design Language
http://bit.ly/Sf8UDY
Microsoft Touch Language
http://bit.ly/N6tpiU
http://bit.ly/XFaODU
Samples
http://code.msdn.microsoft.com/windowsapps

34. Our book!