New controls on Windows 10: InkCanvas, RelativePanel, SplitView

1. Nuevos controles en Windows 10
Josué Yeray
Freelance Mobile developer
Windows Platform MVP
info@josueyeray.com
@josueyeray
blog.josueyeray.com

2. Comenzamos!

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. CartujaDotNet
Mismo Sistema, mismos controles

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. 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. 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. DEMO
Novedades en estilos y
propiedades

9. Proyeccion 3D

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. 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. CartujaDotNet
Proyección 3D
PerspectiveTransform3D:
<Grid.Transform3D>
<PerspectiveTransform3D x:Name="RootGridTransform"
OffsetX="-150"
OffsetY="100" Depth="400"/>
</Grid.Transform3D>

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. CartujaDotNet
Proyección 3D
CompositeTransform3D
<Grid.Transform3D>
<CompositeTransform3D x:Name="RedGridComposite"
TranslateZ="-100"
TranslateX="0"
TranslateY="0"/>
</Grid.Transform3D>

15. DEMO
Transform3D

16. Nuevos controles XAML

17. RelativePanel

18. CartujaDotNet
Relative Panel
Adaptativo
Relativo al Panel
Relativo a controles “hermanos”
Simplifica nuestro XAML
Simplifica el árbol visual
Simplifica los estados visuales

19. SplitView

20. CartujaDotNet
SplitView

21. InkCanvas

22. CartujaDotNet
InkCanvas DirectInk (Art by Laura & Sofía)

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. 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. DEMO
InkCanvas

26. DEMO
CÓDIGO DE LAS DEMOS:
www.github.com/josueyeray/win10samples

27. Nuevos controles en Windows 10
Josué Yeray
Freelance Mobile developer
Windows Platform MVP
info@josueyeray.com
@josueyeray
blog.josueyeray.com