Download - Taller Windows 10 TLP Innova
![Page 1: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/1.jpg)
DESARROLLA PARA TODOS LOS
DISPOSITIVOS CON WINDOWS
10Un único paquete, interfaces adaptativas,
nuevos controles, novedades en XAML, herramientas, etc.
![Page 2: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/2.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
Javier SuárezMobile Team Lead BraventMicrosoft MVP Windows Platform Development
• Blog: http://geeks.ms/blogs/jsuarez• Email: [email protected]• Twitter: @jsuarezruiz
![Page 3: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/3.jpg)
Bien, bien, dejémonos de historias, ¿qué vamos a hacer?
![Page 4: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/4.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
EL GRAN OBJETIVO
![Page 5: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/5.jpg)
Antes de arrancar, ¿de dónde venimos?, ¿dónde estamos?
![Page 6: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/6.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
Mayor facilidad para estar al día
Plataforma de Apps y Core unificado
EL VIAJE DE LA CONVERGENCIA
Windows Phone 7.5
Windows Phone 8Windows Phone 8.1
Windows 8
Xbox One
Windows on Devices
Xbox 360
Windows 8.1
Windows 10
Convergencia a nivel de kernel
Convergencia en el modelo de App
![Page 7: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/7.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
Phone Small Tablet2-in-1s
(Tablet or Laptop)Desktops
& All-in-OnesPhablet Large TabletClassic Laptop
Xbox IoTSurface Hub HoloLens
Windows 10
![Page 8: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/8.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
Multiple device families
PC XBoxMobile Surface Hub
HoloLensDevices +IoT
Universal Windows Apps
One Store +One Dev Center
Reuse Existing Code
One SDK + Tooling
Adaptive User Interface
NaturalUser Inputs
One Universal Windows Platform
![Page 9: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/9.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
UNIVERSAL WINDOWS PLATFORM• UN Sistema operativo
– Mismo core Windows para todos los dispositivos
• UNA Plataforma de Apps– Apps corren entre todas las familias de dispositivos
• UN Dev Center– Mismo flujo de publicación y dashboard
• UNA Store – Monetización, negocio, educación
![Page 10: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/10.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
APP WINDOWS• Un mismo binario
– Corre en cualquier dispositivo– Ajustable por familia de dispositivo
PhoneDispositivo
XboxDispositivo
DesktopDispositivo
Core Windows
Universal Windows Platform
App Windows
![Page 11: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/11.jpg)
Las Apps NO se destinan a Windows 10, las Apps se destinan a familias de dispositivos
![Page 12: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/12.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
PLANTILLAS DISPONIBLESCreamos Nuevo Proyecto Windows Universal
![Page 13: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/13.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
Vista VistaModelo
Modelo
Modelo
MainView.Xaml
MainViewModel.cs
Data Binding
Comandos
Interfaz de Usuario Lógica de Negocio
Lógica de Negocio
Lógica de Presentación
MVVM
![Page 14: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/14.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
MVVM Mayor facilidad para mantener, extender y compartir el código.Más facilidad a la hora de colaborar.Testing.Más fácil de diseñar.
![Page 15: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/15.jpg)
Repasemos las buenas practicas y el patron MVVM aplicado
![Page 16: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/16.jpg)
La historia de las Apps Windows adaptativas
![Page 17: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/17.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
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
![Page 18: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/18.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
DISEÑO ADAPTATIVOPhone (portrait)
Tablet (landscape) / Desktop
![Page 19: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/19.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
DISEÑO ADAPTADOPhone (portrait)
Tablet (landscape) / Desktop
![Page 20: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/20.jpg)
Los usuarios adoran las Apps que son geniales en cada uno de sus dispositivos
![Page 21: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/21.jpg)
¿Qué tenemos “gratis”?
![Page 22: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/22.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
La ventana se redimensiona, las cabeceras del Pivot se ajustan automáticamentePosibilidad de usar teclado y ratón
![Page 23: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/23.jpg)
El control SplitView
![Page 24: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/24.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
SPLITVIEW
![Page 25: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/25.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
COMPORTAMIENTOYour Windows App
![Page 26: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/26.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
Segoe MDL2 Assets
![Page 27: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/27.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
SPLITVIEW.PANE<SplitView>
<SplitView.Pane>
<StackPanel>
<RadioButton />
<RadioButton />
</StackPanel>
</SplitView.Pane>
</SplitView>
![Page 28: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/28.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
SPLITVIEW.CONTENT <SplitView>
<SplitView.Pane /> <SplitView.Content>
<Frame/> </SplitView.Content>
</SplitView>
![Page 29: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/29.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
PROPIEDADES DEL SPLIVIEW<SplitView
IsPaneOpen="False"CompactPaneLength="150"OpenPaneLength="50"Placement="Right|Left"PaneDisplayMode="CompactInline"> <SplitView.Pane /> <SplitView.Content />
</SplitView>
![Page 30: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/30.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
SPLITVIEW.PANEDISPLAYMODE
SplitView.IsPaneOpen
"True"
SplitView.IsPaneOpen
"False"
Inline
Overlay
Compact Inline
Compact Overlay
![Page 31: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/31.jpg)
Mejoras en Visual States
![Page 32: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/32.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
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>
![Page 33: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/33.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
TIPOS DE TRIGGER• MinWindowWidth• MinWindowHeight
– “Cualquier cosa por encima de este valor”– Los valores se especifican en píxeles
![Page 34: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/34.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
• …cuando algo en la ViewModel cambia• …cuando cambia algun valor• …dependiendo del tamaño de la pantalla
• Bien, entonces…
¿Visual State Triggers Custom?
![Page 35: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/35.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
• 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
![Page 36: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/36.jpg)
Nuevos controles XAML
![Page 37: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/37.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
Relative Panel es un control de Layout XAML. Posiciona los elementos estableciendo relaciones entre ellos.
INTRODUCCIÓN AL PANEL RELATIVE PANELControles de Layout en Windows XAML
Grid Stack Panel Canvas Scroll
Viewer Border View Box Wrap Grid
Relative Panel
![Page 38: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/38.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
RELATIVE PANEL• Adaptativo
– Relativo al Panel– Relativo a controles “hermanos”
• Simplifica nuestro XAML– Simplifica el árbol visual– Simplifica los estados visuales
![Page 39: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/39.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
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>
![Page 40: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/40.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
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" />
![Page 41: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/41.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
ALINEARSE CON “HERMANOS”
<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>
![Page 42: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/42.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
ALINEARSE CON “HERMANOS”
<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>
![Page 43: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/43.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
ALINEARSE CON “HERMANOS”
<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>
![Page 44: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/44.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
ALINEARSE CON “HERMANOS”
<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>
![Page 45: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/45.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
OPCIONES DE POSICIONAMIENTO ENTRE “HERMANOS”
<Rectangle Height="100" Width="100" Fill="Red"
RelativePanel.Above="BlueRect"
RelativePanel.RightOf="BlueRect"
RelativePanel.Below="BlueRect"
RelativePanel.RightOf="BlueRect" />
![Page 46: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/46.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
OPCIONES DE POSICIONAMIENTO 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"
/>
![Page 47: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/47.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
SIMPLIFICANDO EL ÁRBOL VISUAL<Grid>
<StackPanel>
<StackPanel>
<TextBlock />
<TextBlock />
</StackPanel>
<StackPanel>
<TextBlock />
<TextBlock />
</StackPanel>
</StackPanel>
</Grid>
<RelativePanel>
<TextBlock />
<TextBlock />
<TextBlock />
<TextBlock />
</RelativePanel >
![Page 48: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/48.jpg)
El control Relative Panel es una de las claves para tus estrategias a la hora de adaptar la UI
![Page 49: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/49.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
EXTENSIONES DE PLATAFORMA• APIs específicas por familia
– Capacidades específicas por familia– Compatible entre dispositivos
PhoneDevice
XboxDevice
DesktopDevice
Windows Core
Universal Windows Platform
Windows App
Phoneextension
Xboxextension
Desktopextension
![Page 50: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/50.jpg)
Las extensions no afectan a los binarios de otras familias de dispositivos
![Page 51: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/51.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
EXTENSIONES POR PLATAFORMA<ItemGroup>
<!-- Reference to the .Net Framework and Windows SDK are automatic -->
<SDKReference Include="Windows Desktop, Version=10.0.9910.0"/>
<SDKReference Include="Windows Mobile, Version=10.0.0.1"/>
</ItemGroup>
![Page 52: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/52.jpg)
Validando XAML!
![Page 53: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/53.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
<ListView> <ListView.ItemTemplate> <DataTemplate> <StackPanel> <SymbolIcon Symbol="{Binding Symbol}"/> <TextBlock Text="{Binding Name}"/> <Button Click="Button_ClickHandler"/> </StackPanel> </DataTemplate> </ListView.ItemTemplate></ListView>
<ListView> <ListView.ItemTemplate> <DataTemplate x:DataType="local:FreeBookCategory"> <StackPanel> <SymbolIcon Symbol="{x:Bind Symbol}"/> <TextBlock Text="{x:Bind Name}"/> <Button Click="{x:Bind Click}"/> </StackPanel> </DataTemplate> </ListView.ItemTemplate></ListView>
MEJORAS EN RENDIMIENTOBindings compilados AKA {x:Bind}: como {Binding}
Se resuelve en tiempo de compilación y produce errores!
![Page 54: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/54.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
Binding
Binding compilado
Links: Windows Performance Analyzer, EventSource
![Page 55: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/55.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
No Bindings
x:Bind OneTime
x:Bind OneWay
{Binding}OneWay{Binding}
OneTime
CONSUMO DE MEMORIA
1600 borders con su fondo bindeado
![Page 56: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/56.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
USANDO BINDINGS COMPILADOS• Reemplazamos {Binding …} por {x:Bind …}
• x:Bind esta fuertemente tipado– El context es la página o control de usuario
• Mode=OneTime es el modo por defecto
![Page 57: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/57.jpg)
DEMODEMODEMOX:Bind
![Page 58: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/58.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
• Duck Typing – mismo nombre de propiedad en diferentes objetos– Text=“{Binding Age}” funciona con objetos perro y persona – x:Bind Mitigation: Usa una clase base o interfaz
• Dictionary graphs– {Binding} puede funcionar con JSON y otros diccionarios de objetos no tipados– {x:Bind} No funciona sin información de tipado– Probablemente se podrían hacer suficientes Catings para hacer que funcione, pero la experiencia sería pobre
• Creación de bindings programáticamente– {x:Bind} no tiene la capacidad de añadir / quitar bindings en runtime
• Use in a style– {x:Bind} no se puede usar en un estilo para setters etc– Si podemos usarlo en un DataTemplate definido en el style
¿CUÁNDO USAMOS BINDINGS “CÁSICOS”?
![Page 59: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/59.jpg)
Vistas por familias de dispositivos
![Page 60: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/60.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
¿Qué pasa si…?
SplitView vs. Pivot
Comandos en la parte superior VS inferior
![Page 61: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/61.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
DEVICE FAMILIES• En Windows 10, podemos distinguir los dispositivos de dos formas:
• Por resolución• Por familia
![Page 62: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/62.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
DEVICE FAMILIES• Windows 10 ofrece distintas familias de dispositivos:• Desktop• Mobile• Xbox• IoT• …
![Page 63: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/63.jpg)
Herramientas
![Page 64: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/64.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
VISUAL STUDIONuevos modos diseño, performance instrumentation timeline tool y mucho más…
![Page 65: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/65.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
VISUAL STUDIOVisual Tree Inspector
![Page 66: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/66.jpg)
DEMODEMODEMOVisual Tree Inspector
![Page 67: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/67.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
GRACIAS a TODOSPor vuestro tiempo!
Javier SuárezMicrosoft MVP Windows Platform Development
• Blog: http://geeks.ms/blogs/jsuarez• Email: [email protected]• Twitter: @jsuarezruiz
![Page 68: Taller Windows 10 TLP Innova](https://reader031.vdocuments.co/reader031/viewer/2022032003/55c5a5f2bb61eb222a8b46a6/html5/thumbnails/68.jpg)
TALLER WINDOWS 10TLPINNOVA
.
.
DESARROLLA PARA TODOS LOS DISPOSITIVOS CON WINDOWS 10Un único paquete, interfaces adaptativas, nuevos controles, novedades en XAML, herramientas, etc.