Interfaces Adaptativas en Windows 10
Descargar como PPTX, PDF0 recomendaciones2,281 vistas
El documento aborda las interfaces adaptativas en Windows 10, explicando la convergencia de la plataforma y las mejoras en las aplicaciones a través de la Universal Windows Platform. Se presentan estrategias de diseño para interfaces adaptativas, incluyendo el uso de layouts flexibles y nuevos controles como el Relative Panel y SplitView. Además, se discuten triggers visuales y custom triggers para optimizar la experiencia del usuario en diferentes dispositivos.
Interfaces Adaptativas en Windows 10
- 1. Interfaces adaptativas en Windows 10 Windows 10 Preview Javier Suárez
- 2. CartujaDotNet Javier Suárez Ruiz XAML Developer Bravent Microsoft MVP Windows Platform Development • Blog: http://geeks.ms/blogs/jsuarez • Email: javiersuarezruiz@hotmail.com • Twitter: @jsuarezruiz
- 3. CartujaDotNet 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
- 4. Comenzamos!
- 5. CartujaDotNet Mayor facilidad para estar al día Plataforma de Apps y Core unificado El viaje de la convergencia Windows 10 Convergencia a nivel de kernel Convergencia en el modelo de App
- 6. CartujaDotNet Universal Windows Platform Plataforma de Desarrollo unificada Un único paquete Código adaptativo XboxIoT Universal Windows Platform Core APIs
- 7. La historia de las Apps Windows adaptativas
- 8. CartujaDotNet Opciones de diseño para adaptar la interfaz Estrategias de diseño Layouts flexibles con tamaños relativos Vistas XAML por dispositivo Archivos XAML separados con código compartido Estados visuales XAML Utilizados para escalar y gestionar orientaciones
- 10. CartujaDotNet
- 11. Los usuarios adoran las Apps que son geniales en cada uno de sus dispositivos
- 13. CartujaDotNet
- 14. Mejoras en Visual States
- 15. CartujaDotNet Visual State setters & triggers Setters permite establecer propiedades simples La mayoría de propiedades no necesitan animación Triggers declarados cuando se aplica un estado No necesitamos gestionar eventos en el code-behind <VisualState x:Name="wideState"> <VisualState.Setters> <Setter Target="myPanel.Orientation" Value="Horizontal" /> </VisualState.Setters> <VisualState.StateTriggers> <AdaptiveTrigger MinWindowWidth="600"/> </VisualState.StateTriggers> </VisualState>
- 16. CartujaDotNet Tipos de trigger MinWindowWidth MinWindowHeight “Cualquier cosa por encima de este valor” Los valores se especifican en píxeles
- 18. CartujaDotNet …cuando algo en la ViewModel cambia …cuando cambia algun valor …dependiendo del tamaño de la pantalla Bien, entonces… ¿Visual State Triggers Custom?
- 19. CartujaDotNet 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
- 20. CartujaDotNet xmlns:triggers="using:StravaMobile.UAP.Triggers" <VisualStateGroup x:Name="InputTypeStates"> <VisualState> <VisualState.StateTriggers> <triggers:InputTypeTrigger TargetElement="{x:Bind ActivityList}" PointerType="Touch" /> <triggers:InputTypeTrigger TargetElement="{x:Bind ActivityList}" PointerType="Pen" /> </VisualState.StateTriggers> <VisualState.Setters> <Setter Target="GoToTopButton.Visibility" Value="Visible" /> Uso de Custom Trigger
- 21. CartujaDotNet La lógica 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
- 24. CartujaDotNet Relative Panel es un control de Layout XAML. Posiciona los elementos estableciendo relaciones entre ellos. Introducción al panel Relative Panel Controles de Layout en Windows XAML Grid Stack Panel Canvas Scroll Viewer Border View Box Wrap Grid Relative Panel
- 25. CartujaDotNet Relative Panel Adaptativo Relativo al Panel Relativo a controles “hermanos” Simplifica nuestro XAML Simplifica el árbol visual Simplifica los estados visuales
- 26. CartujaDotNet Alineación con el Panel <RelativePanel> <Rectangle x:Name="RedRect" Height="100" Width="100" Fill="Red" RelativePanel.AlignHorizontalCenterWithPanel="True" RelativePanel.AlignVerticalCenterWithPanel="True" /> <Rectangle x:Name="BlueRect" Height="100" Width="200" Fill="Blue" /> </RelativePanel>
- 27. CartujaDotNet Opciones de posición con respecto al Panel <Rectangle Height="100" Width="100" Fill="Red" RelativePanel.AlignLeftWithPanel="True" (default) RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignTopWithPanel="True" (default) RelativePanel.AlignBottomWithPanel="True" RelativePanel.CenterInPanelHorizontally="True" RelativePanel.CenterInPanelVertically="True" />
- 28. CartujaDotNet Alinearse con “hermanos” (derecha) <RelativePanel> <Rectangle x:Name="BlueRect" Height="100" Width="100" Fill="Blue" /> <Rectangle x:Name="RedRect" Height="100" Width="100" Fill="Red" RelativePanel.RightOf="BlueRect" RelativePanel.AlignVerticalCenterWith="BlueRect" /> </RelativePanel>
- 29. CartujaDotNet Alinearse con “hermanos” (encima, derecha) <RelativePanel> <Rectangle x:Name="BlueRect" Height="100" Width="100" Fill="Blue" /> <Rectangle x:Name="RedRect" Height="100" Width="100" Fill="Red" RelativePanel.Below="BlueRect" RelativePanel.AlignRightWith="BlueRect" /> </RelativePanel>
- 30. CartujaDotNet Alinearse con “hermanos” (debajo, centro) <RelativePanel> <Rectangle x:Name="BlueRect" Height="100" Width="100" Fill="Blue" /> <Rectangle x:Name="RedRect" Height="100" Width="100" Fill="Red" RelativePanel.Below="BlueRect" RelativePanel.AlignHorizontalCenterWith="BlueRect" /> </RelativePanel>
- 31. CartujaDotNet Alinearse con “hermanos” (debajo, izquierda) <RelativePanel> <Rectangle x:Name="BlueRect" Height="100" Width="100" Fill="Blue" /> <Rectangle x:Name="RedRect" Height="100" Width="100" Fill="Red" RelativePanel.Below="BlueRect" RelativePanel.AlignLeftWith="BlueRect" /> </RelativePanel>
- 32. CartujaDotNet Opciones de posicionamiento entre “hermanos” <Rectangle Height="100" Width="100" Fill="Red" RelativePanel.Above="BlueRect" RelativePanel.RightOf="BlueRect" RelativePanel.Below="BlueRect" RelativePanel.RightOf="BlueRect" />
- 33. CartujaDotNet Opciones de alineación entre “hermanos” <Rectangle Height="100" Width="100" Fill="Red" RelativePanel.AlignTopWith="BlueRect" RelativePanel.AlignRightWith="BlueRect" RelativePanel.AlignBottomWith="BlueRect" RelativePanel.AlignLeftWith="BlueRect" RelativePanel.AlignHorizontalCenterWith="BlueRect" RelativePanel.AlignVerticalCenterWith="BlueRect" />
- 35. CartujaDotNet Simplificando el árbol visual <Grid> <StackPanel> <StackPanel> <TextBlock /> <TextBlock /> </StackPanel> <StackPanel> <TextBlock /> <TextBlock /> </StackPanel> </StackPanel> </Grid> <RelativePanel> <TextBlock /> <TextBlock /> <TextBlock /> <TextBlock /> </RelativePanel >
- 36. El control Relative Panel es una de las claves para tus estrategias a la hora de adaptar la UI
- 43. CartujaDotNet Propiedades del SplitView <SplitView IsPaneOpen="False" CompactPaneLength="150" OpenPaneLength="50" Placement="Right|Left" PaneDisplayMode="CompactInline"> <SplitView.Pane /> <SplitView.Content /> </SplitView>
- 46. CartujaDotNet ¿Qué pasa si…? SplitView vs. Pivot Comandos en la parte superior VS inferior
- 47. Vistas por familia de dispositivo
- 48. CartujaDotNet Cuando ApiInformation no es suficiente Utilizamos familias de dispositivos como Xbox y Surface Hub Adapta la experiencia de usuario
- 49. CartujaDotNet Debemos determinar escenarios donde sea necesario Creamos vistas específicas 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 <= 7" use the OneHanded optimized view if ( _actualSizeInInches >0 && _actualSizeInInches <= ONEHANDEDSIZE) { rootFrame.Navigate(typeof(MainPage_OneHanded), e.Arguments); } else { rootFrame.Navigate(typeof(MainPage), e.Arguments); }
- 50. DEMODEMODEMO Vistas por familia de dispositivo
- 52. Interfaces adaptativas en Windows 10 Windows 10 Preview Javier Suárez