Designing appealing applications using xaml

  • Published on
    17-Jun-2015

  • View
    556

  • Download
    3

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 XAMLNicol Carandiniblogs.ugidotnet.org/Nick60n.carandini@tpcware.com@TPCWare Funzionalit Facilit duso Reattivit RobustezzaLa qualit di unapplicazioneE tramite la User Interface che lutente interagisce con lapplicazione, ed dagli screenshot che ci si forma una prima idea della qualit di unapplicazione.Qualit percepitaLa User Interface composta da: Layout degli elementi grafici Azioni che lutente pu eseguire sugli elementi Transizioni (eventualmente animate) da un stato allaltro dellapplicazioneUser InterfaceLayout SystemVi sono diversi tipi di Layout System:Canvas Windows FormHierarchical XAML Framework HTML/CSSOgni 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 compositionGli elementi sono legati tra loro da relazioni contenitore/contenuto. Declarative definitionSi dichiara il valore delle propriet degli elementi grafici (margini, bordi, dimensioni, allineamenti, ) in modo da lasciare al Layout System il calcolo delleffettiva posizione.Hierarchical LayoutLa posizione degli elementi grafici dipende dal valore delle loro propriet:Layout SystemRectangle:Fill=RedWidth=300Height=200Rectangle:Fill=GreenWidth=300Height=200Margin= 10Rectangle:Fill=BlueWidth=300Height=200Margin= 10Rectangle:Fill=YellowWidth=300Height=200Margin= 10PageRectangle:Fill=RedWidth=300Height=200Per descrivere linterfaccia grafica dellesempio precedente, visto che si tratta di un albero di elementi, viene naturale utilizzare un linguaggio che derivi da XML:UI LanguageWPF, Silverlight e XAML HistoryNel 2006 la Microsoft rilascia WPF (Windows Presentation Foundation) e introduce XAML come linguaggio descrittivo delle interfacce grafiche.WPF3.02006WPF3.5WPF4.0SL1.0WPF3.5 SP12007 2008 2009 2010 2011 2012WPF4.5SL2.0SL3.0SL4.0SL5.0XAMLWinRT.NETLinguaggio dichiarativoDescrive linterfaccia graficaElementi graficiInterazione con lutenteDeriva da XMLeXtensible Markup LanguageeXtensible Application Markup LanguageXAML LanguageXAML: 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 AppsXAMLCC++C#VBHTML/CSSJavaScriptWinRT APIsWindows Store Apps Desktop AppsInternetExplorerHTMLJavaScriptCC++Win32C#VB.NETSLWindows Kernel ServicesXAMLCC++C#VBHTML/CSSJavaScriptWinRT APIsWindows Store AppsWindows Kernel ServicesDemo: XAML ExampleLayout fluidiNello sviluppo di applicazioni XAML, ogni pagina devessere progettata in modo da potersi adattare ai diversi form factore alle diverse view.Form factors e pixel densityWindows 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 DPIApplication View & Device OrientationIl Layout si deve adattare ai tre diversi modi di vedere lapplicazione: Full Snapped FillE alla rotazione del device nei due orientamenti: Landscape PortraitDemo: Layout fluidi con XAMLInterazione con lutente: gestureTap Press and hold Slide SwipeTurn Pinch Swipe from edgefor App CmdSwipe from edgefor System CmdWindows 8 prevede un set standard di interazioni che lutente pu eseguire con i diversi sistemi di input:TouchMousePenKeyboardCommon interactionXAML offre tre livelli di astrazione per facilitare la gestione degli eventi Touch:Gesture events Tapped, DoubleTapped, RightTapped, HoldingPointer events PointerPressed, PointerReleased, PointerMoved,PointerEntered, PointerExitedManipulation eventsContengono informazioni di basso livello quali, ad esempio, velocit e inerzia della gesture.Touch SupportDemo: TouchQuando 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 interazioniWindows 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 animazioniSi 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 8Page 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 LibraryTransition AnimationIdeally, your Windows Store app uses animations to enhance the user interface or to make it more attractive without annoying your users. Theme AnimationYou can use theme animations to enable more control while still using a consistent Windows theme for how your animation behaves. Custom AnimationIn Windows Store apps you animate objects by animating their property values.XAML AnimationTransition AnimationXAML introduce la nuova propriet Transitionsdove possiamo elencare le transizioni che devono essere applicate alloggetto:Transition Animation ListQuando si vuole controllare lordine e i tempi delle animazioni, possibile utilizzare una storyboard:Theme AnimationTheme Animation ListControllo completo di tutti gli aspetti:Custom AnimationDemo: AnimationDocumentazione MicrosoftCreating a UImsdn.microsoft.com/en-us/library/windows/apps/xaml/br229564.aspxMiei articoli su DomusDotNetIl fattore Xwww.domusdotnet.org/articoli/introduzione-a-xaml.aspxPage Layout dinamici in XAMLwww.domusdotnet.org/articoli/page-layout-dinamici-in-xaml.aspxGestire i Visual state con VS 2012www.domusdotnet.org/articoli/gestire-i-visual-state-con-vs-2012.aspxRiferimenti utili

Recommended

View more >