Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

New controls in Windows 10

4,701 views

Published on

New controls on Windows 10: InkCanvas, RelativePanel, SplitView

Published in: Technology
  • Be the first to comment

New controls in Windows 10

  1. 1. Nuevos controles en Windows 10 Josué Yeray Freelance Mobile developer Windows Platform MVP info@josueyeray.com @josueyeray blog.josueyeray.com
  2. 2. Comenzamos!
  3. 3. CartujaDotNet Novedades en controles Estilo adaptado de muchos controles ya existentes Simplificación de XAML Evitar tener que usar controles extra para la apariencia
  4. 4. CartujaDotNet Mismo Sistema, mismos controles
  5. 5. CartujaDotNet Novedades en controles Todos los controles contenedores Grid, StackPanel, RelativePanel… Tienen las propiedades de un Border Ahorramos controles para mejorar el rendimiento (próxima sesión)
  6. 6. CartujaDotNet Novedades en controles En Windows 8.X / Windows Phone: Resultado: <Border BorderBrush="Red" BorderThickness="2" CornerRadius="10" Background="LightCoral"> <Grid Margin="10"> <TextBlock/> </Grid> </Border> This is Sparta!
  7. 7. CartujaDotNet Novedades en controles En Windows 10: Resultado: <Grid Margin="10" BorderBrush="Red" BorderThickness="2" CornerRadius="10" Background="LightCoral"> <TextBlock/> </Grid> This is Sparta!
  8. 8. DEMO Novedades en estilos y propiedades
  9. 9. Proyeccion 3D
  10. 10. CartujaDotNet Proyección 3D Hasta ahora podíamos realizar proyecciones y transformaciones Aplanaban los objetos con un “Pseudo 3D” No podíamos controlar la perspectiva
  11. 11. CartujaDotNet Proyección 3D En Windows 10 todos los elementos tienen la propiedad Transform3D Podemos controlar la perspectiva con la clase PerspectiveTransform3D Controla el “Punto de vista”
  12. 12. CartujaDotNet Proyección 3D PerspectiveTransform3D: <Grid.Transform3D> <PerspectiveTransform3D x:Name="RootGridTransform" OffsetX="-150" OffsetY="100" Depth="400"/> </Grid.Transform3D>
  13. 13. CartujaDotNet Proyección 3D En los elementos hijos podemos aplicar un CompositeTransform3D El motor de XAML se encarga de los cálculos necesarios para conservar la perspectiva indicada, aplicando las transformaciones. Tiene control del ZIndex
  14. 14. CartujaDotNet Proyección 3D CompositeTransform3D <Grid.Transform3D> <CompositeTransform3D x:Name="RedGridComposite" TranslateZ="-100" TranslateX="0" TranslateY="0"/> </Grid.Transform3D>
  15. 15. DEMO Transform3D
  16. 16. Nuevos controles XAML
  17. 17. RelativePanel
  18. 18. CartujaDotNet Relative Panel Adaptativo Relativo al Panel Relativo a controles “hermanos” Simplifica nuestro XAML Simplifica el árbol visual Simplifica los estados visuales
  19. 19. SplitView
  20. 20. CartujaDotNet SplitView
  21. 21. InkCanvas
  22. 22. CartujaDotNet InkCanvas DirectInk (Art by Laura & Sofía)
  23. 23. CartujaDotNet InkCanvas Trabajar con tinta electrónica siempre ha sido complejo Multiples problemas: Muy costoso en rendimiento Poco preciso al reconocer el lápiz/dedo Todo por hacer… la complejidad recaía en nosotros
  24. 24. CartujaDotNet InkCanvas El control InkCanvas, simplifica estas tareas: Dibujado de la escritura del usuario Ratón, Lapiz, Mano Guardar/Cargar los trazos “Strokes” del usuario Reconocimiento de texto Modo marcador
  25. 25. DEMO InkCanvas
  26. 26. DEMO CÓDIGO DE LAS DEMOS: www.github.com/josueyeray/win10samples
  27. 27. Nuevos controles en Windows 10 Josué Yeray Freelance Mobile developer Windows Platform MVP info@josueyeray.com @josueyeray blog.josueyeray.com

×