Windows 10 Developer Readiness. Interfaces Adaptativas

  • View
    466

  • Download
    0

Embed Size (px)

Transcript

1. Windows 10 Developer Readiness Spain - Powered by MVPs Javier Surez Josu Yeray Rafa Serna 2. Interfaces adaptativas en Windows 10 Windows 10 Developer Readlines Spain 3. Windows 10 Developer Readiness Spain Javier Surez Ruiz Microsoft MVP Windows Platform Development Blog: http://geeks.ms/blogs/jsuarez Email: javiersuarezruiz@hotmail.com Twitter: @jsuarezruiz 4. Windows 10 Developer Readiness Spain Agenda Comenzamos 1. El viaje de la convergencia 2.Universal App Platform Mejoras en estados visuales 1. Estrategias para interfaces adaptativas 2.XAML Views por dispositivo 3.El control Relative Panel 4.Adaptive Triggers Vistas por familias de dispositivos 5. Comenzamos! 6. Windows 10 Developer Readiness Spain Mayor facilidad para estar al da Plataforma de Apps y Core unificado El viaje de la convergencia Windows 10 Convergencia a nivel de kernel Convergencia en el modelo de App 7. Windows 10 Developer Readiness Spain Universal Windows Platform Plataforma de Desarrollo unificada Un nico paquete Cdigo adaptativo XboxIoT Universal Windows Platform Core APIs 8. La historia de las Apps Windows adaptativas 9. Windows 10 Developer Readiness Spain Opciones de diseo para adaptar la interfaz Estrategias de diseo Layouts flexibles con tamaos relativos Vistas XAML por dispositivo Archivos XAML separados con cdigo compartido Estados visuales XAML Utilizados para escalar y gestionar orientaciones 10. Windows 10 Developer Readiness Spain 11. Windows 10 Developer Readiness Spain 12. Los usuarios adoran las Apps que son geniales en cada uno de sus dispositivos 13. Qu tenemos gratis? 14. Windows 10 Developer Readiness Spain 15. Mejoras en Visual States 16. Windows 10 Developer Readiness Spain Visual State setters & triggers Setters permite establecer propiedades simples La mayora de propiedades no necesitan animacin Triggers declarados cuando se aplica un estado No necesitamos gestionar eventos en el code-behind 17. Windows 10 Developer Readiness Spain Tipos de trigger MinWindowWidth MinWindowHeight Cualquier cosa por encima de este valor Los valores se especifican en pxeles 18. DEMO Visual State Triggers 3:50 19. Windows 10 Developer Readiness Spain cuando algo en la ViewModel cambia cuando cambia algun valor dependiendo del tamao de la pantalla Bien, entonces Visual State Triggers Custom? 20. Windows 10 Developer Readiness Spain public class InputTypeTrigger : StateTriggerBase { private FrameworkElement _targetElement; private PointerDeviceType _lastPointerType, _triggerPointerType; public FrameworkElement TargetElement { get { return _targetElement; } set { _targetElement = value; _targetElement.AddHandler(FrameworkElement.PointerPressedEvent, new PointerEventHandler(_targetElement_PointerPressed), true); Custom Trigger 21. Windows 10 Developer Readiness Spain xmlns:triggers="using:StravaMobile.UAP.Triggers" Uso de Custom Trigger 22. Windows 10 Developer Readiness Spain La lgica es custom Se pueden combiner varios Triggers Se pueden utilizer otras opciones dentro del Trigger como x:Defer https://github.com/Microsoft/Windows-universal- samples/tree/master/xaml_statetriggers Crear Custom Triggers 23. DEMO Custom Triggers 3:50 24. Nuevos controles XAML 25. Windows 10 Developer Readiness Spain Relative Panel es un control de Layout XAML. Posiciona los elementos estableciendo relaciones entre ellos. Introduccin al panel Relative Panel Controles de Layout en Windows XAML Grid Stack Panel Canvas Scroll Viewer Border View Box Wrap Grid Relative Panel 26. Windows 10 Developer Readiness Spain Relative Panel Adaptativo Relativo al Panel Relativo a controles hermanos Simplifica nuestro XAML Simplifica el rbol visual Simplifica los estados visuales 27. Windows 10 Developer Readiness Spain Alineacin con el Panel 28. Windows 10 Developer Readiness Spain Opciones de posicin con respecto al Panel 29. Windows 10 Developer Readiness Spain Alinearse con hermanos (derecha) 30. Windows 10 Developer Readiness Spain Alinearse con hermanos (encima, derecha) 31. Windows 10 Developer Readiness Spain Alinearse con hermanos (debajo, centro) 32. Windows 10 Developer Readiness Spain Alinearse con hermanos (debajo, izquierda) 33. Windows 10 Developer Readiness Spain Opciones de posicionamiento entre hermanos 34. Windows 10 Developer Readiness Spain Opciones de alineacin entre hermanos 35. DEMODEMODEMO Relative Panel 36. Windows 10 Developer Readiness Spain Simplificando el rbol visual 37. El control Relative Panel es una de las claves para tus estrategias a la hora de adaptar la UI 38. El control SplitView 39. Windows 10 Developer Readiness Spain SplitView 40. Windows 10 Developer Readiness Spain Comportamiento Your Windows App 41. Windows 10 Developer Readiness Spain Segoe MDL2 Assets 42. Windows 10 Developer Readiness Spain SplitView.Pane 43. Windows 10 Developer Readiness Spain SplitView.Content 44. Windows 10 Developer Readiness Spain Propiedades del SplitView 45. Windows 10 Developer Readiness Spain SplitView.PaneDisplayMode SplitView.IsPaneOpen "True" SplitView.IsPaneOpen "False" Inline Overlay Compact Inline Compact Overlay 46. DEMODEMO SplitView 47. Windows 10 Developer Readiness Spain Qu pasa si? SplitView vs. Pivot Comandos en la parte superior VS inferior 48. Vistas por familia de dispositivo 49. Windows 10 Developer Readiness Spain Cuando ApiInformation no es suficiente Utilizamos familias de dispositivos como Xbox y Surface Hub Adapta la experiencia de usuario 50. Windows 10 Developer Readiness Spain Debemos determinar escenarios donde sea necesario Creamos vistas especficas en estos casos Cargamos la vista adecuada en consecuencia Adapta tu vista //Get the diagonal size of the integrated display var dsc = new DisplaySizeHelper.DisplaySizeClass(); double _actualSizeInInches = dsc.GetDisplaySizeInInches(); //Guidance: If the diagonal size is