Designing appealing applications using xaml

  • Published on
    17-Jun-2015

  • View
    556

  • Download
    3

Embed Size (px)

DESCRIPTION

E tramite la User Interface che lutente interagisce con lapplicazione, ed dagli screenshot che ci si forma una prima idea della qualit di unapplicazione. In questa presentazione vengono illustrate le caratteristiche della UI e l'uso di XAML/C# per la creazione di Windows Store apps.

Transcript

  • Designing Appealing Apps Using XAML

    Nicol Carandiniblogs.ugidotnet.org/Nick60

    n.carandini@tpcware.com

    @TPCWare

  • Funzionalit

    Facilit duso

    Reattivit

    Robustezza

    La qualit di unapplicazione

  • E tramite la User Interface che lutente interagisce con lapplicazione, ed dagli screenshot che ci si forma una prima idea della qualit di unapplicazione.

    Qualit percepita

  • La User Interface composta da:

    Layout degli elementi grafici

    Azioni che lutente pu eseguire sugli elementi

    Transizioni (eventualmente animate) da un stato allaltro dellapplicazione

    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 allorigine della finestra, e i vari elementi possono sovrapporsi uno allaltro, 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 delleffettiva 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 linterfaccia grafica dellesempio precedente, visto che si tratta di un albero di elementi, viene naturale

    utilizzare un linguaggio che derivi da XML:

    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 linterfaccia grafica

    Elementi grafici

    Interazione con lutente

    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 devessere 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 lapplicazione:

    Full

    Snapped

    Fill

    E alla rotazione del device nei due

    orientamenti:

    Landscape

    Portrait

  • Demo: Layout fluidi con XAML

  • Interazione con lutente: 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

    lutente 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 lutente interagisce con lapplicazione, 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 dellinterazione 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 alloggetto:

  • Transition Animation List

  • Quando si vuole controllare lordine 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