windows 10 universal apps

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