windows 10 universal apps
TRANSCRIPT
Creando Apps Windows 10
Universal Windows Platform (UWP)
Presentación
Presentación
Novedades
Controles
Diseño y XAML
Bindings
Herramientas
Universal Windows Platform (UWP)
Andrés Londoño
Desarrollador Senior Web y Móvil.Miembro Comunidad Avnet.Microsoft Student Partner Lead LATAM.Microsoft Influencer and Community Specialist.
@andreslon Andreslonblog.blogspot.com/geeklon@andreslon
Introducción
Phone Small Tablet
2-in-1s(Tablet o Laptop)
Desktops & All-in-OnePhablet Large Tablet
Classic Laptop
Xbox IoTSurface Hub
Holographic
Windows 10
Introducción
Introducción
Fácil para los usuarios mantenerse actualizados
Núcleo y Plataforma de aplicaciones unificada
Windows 10
OS kernelConvergido
Modelo de AppConvergido
El viaje de convergencia
Introducción
Un Windows
DesktopSKU
PC
2 in 1
MobileSKU
Tablet
Phablet
Phone
XboxSKU
Xbox
IoTSKU
Band
IoT headlessSKU
Raspberry Pi
Home Automation
Surface HubSKU
Surface Hub
HolographicSKU
HoloLens
Introducción
Capacidades especificas
PhoneDevice
XboxDevice
DesktopDevice
Windows Core
Universal Windows Platform
Windows App
Phoneextension
Xboxextension
Desktopextension
Introducción
Plataforma Universal de Windows
Un Sistema Operativo
Un núcleo Windows para todos los dispositivos
Una Plataforma para las aplicaciones
Las aplicaciones se ejecutan en todas las familias
Un centro de desarrollo
Un solo panel y flujo para publicar aplicaciones
Una Tienda
Alcance Global, monetización Local
Consumidores, Negocios & Educación
Controles
InkCanvas
• Se puede configurar para utilizar diferentes Inputs (Pen, Touch, Mouse, etc.)
• Se pueden modificar atributos de dibujo
• Posibilidad de sintetizar información
InkCanvas
InkPresenter
Controles
RelativePanelImplementa un estilo de diseño definido por las relaciones entre sus elementos secundarios. Está destinado
a crear diseños de aplicaciones que puedan adaptarse a los cambios en la resolución de pantalla.
Controles
SplitView (Panel de navegación adaptativo)
<SplitView DisplayMode="Inline|Overlay|CompactInline|CompactOverlay">
<SplitView.Pane><!-- Navigation Content Here --></SplitView.Pane>
<!-- Main Content Here -->
</SplitView>
Controles
SplitView (Panel de navegación adaptativo)
Controles
Pivot
Diseño y XAML
Diseño Adaptativo
Diseño ResponsivoUn diseño flexible responde a los pequeños cambios
Muchos controles manejan responsividad básica
Diseño AdaptativoLos diseños inteligentes se adaptan a cambios mayores
Características como Estados Visuales (Visual States) ayudan en este diseño
Diseño adaptadoUna aplicación para un tipo de dispositivo especifico puede simplificar el diseño
Algunos dispositivos tienen lenguajes de diseño únicos
Diseño y XAML
Diseño Adaptativo
Teléfono (portrait)
Tableta (landscape) / Escritorio
Diseño y XAML
Diseño Adaptado
Teléfono (portrait)
Tableta (landscape) / Escritorio
Diseño y XAML
Diseño y XAML
Diseño y XAML
Continuum para convertibles y Teléfonos
Diseño y XAML
PerspectiveTransform3D<Grid>
<Grid.Transform3D><!– Parent Camera --><PerspectiveTransform3D/>
</Grid.Transform3D>
<Border Background="#FF7F00"><Border.Transform3D>
<CompositeTransform3D RotationX="-90 " …/></Border.Transform3D>
</Border>
<Border Background="#FF6700"><Border.Transform3D>
<CompositeTransform3D RotationY="-90" …/></Border.Transform3D>
</Border></Grid>
Bindings
Datos dinámicos
INotifyPropertyChangedImplementado en view model
Se lanza ante cualquier cambio en una propiedad de una View Model
INotifyCollectionChangedImplementado en ObservableCollection<T> y ReadOnlyObservableCollection<T>
Se lanza cuando la colección se modifica
(también IObservableVector)
Bindings
Bindings compilados <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>
• x:Bind esta fuertemente tipado
El context es la página o control de usuario
• Mode=OneTime es el modo por defecto
Bindings
Bindings compilados
Bindings
x:Phase – rendering progresivo en listados
Windows 8.1 introdujo el evento ContainerContentChangingPermitía el renderizado progresivo de elementos de listado
Requería código para actualizar la plantilla que evitaba el uso de binding
x:Phase permite declarar rendering por fases
<DataTemplate x:DataType="model:FileItem">
<Grid Width="200" Height="80">
<TextBlock Text="{x:Bind DisplayName}" />
<TextBlock Text="{x:Bind prettyDate}" x:Phase="1"/>
</Grid>
</DataTemplate>
Herramientas
Bridge technologies
Windows 10Sistema Operativo
Tecnologías Puente
(Bridging technologies)
Win32Escritorio
Webhospedada
JavaAndroid
Obj.CiOS
Plataforma Universal de Windows
WWAC++& CX
.Netlenguajes
HTMLDirectX
XAML
C++
.Netlenguajes
MFCWFWPF
.Netruntime
Herramientas
Visual Studio
Nuevos modos diseño, performance instrumentation timeline tool y mucho más…
Herramientas
Visual Studio
Visual Tree Inspector
Herramientas
“Template 10”
Nueva plantilla en blancoIncluye archivos y carpetas para guiar en las convenciones
Similar a la plantilla MVCAdd-on para resolver problemas habituales
Resuelve el 90% de casosEl código resuelve el 90& de usos de caso
Windows 10La plantilla esta disponible en GitHub y aun en desarrollo
Herramientas
“Template 10”
Herramientas
“Template 10”
Herramientas
“Template 10”
Presentación
Presentación
Novedades
Controles
Diseño y XAML
Bindings
Herramientas
¿ Preguntas ?
Andrés Londoño
Desarrollador Senior Web y Móvil.Miembro Comunidad Avnet.Microsoft Student Partner Lead LATAM.Microsoft Influencer and Community Specialist.
@andreslon Andreslonblog.blogspot.com/geeklon@andreslon