windows 10 universal apps

32
Creando Apps Windows 10 Universal Windows Platform (UWP)

Upload: andres-londono

Post on 10-Apr-2017

588 views

Category:

Engineering


0 download

TRANSCRIPT

Page 1: Windows 10 universal apps

Creando Apps Windows 10

Universal Windows Platform (UWP)

Page 2: Windows 10 universal apps

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

Page 3: Windows 10 universal apps

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

Page 4: Windows 10 universal apps

Introducción

Page 5: Windows 10 universal apps

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

Page 6: Windows 10 universal apps

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

Page 7: Windows 10 universal apps

Introducción

Capacidades especificas

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

Phoneextension

Xboxextension

Desktopextension

Page 8: Windows 10 universal apps

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

Page 9: Windows 10 universal apps

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

Page 10: Windows 10 universal apps

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.

Page 11: Windows 10 universal apps

Controles

SplitView (Panel de navegación adaptativo)

<SplitView DisplayMode="Inline|Overlay|CompactInline|CompactOverlay">

<SplitView.Pane><!-- Navigation Content Here --></SplitView.Pane>

<!-- Main Content Here -->

</SplitView>

Page 12: Windows 10 universal apps

Controles

SplitView (Panel de navegación adaptativo)

Page 13: Windows 10 universal apps

Controles

Pivot

Page 14: Windows 10 universal apps

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

Page 15: Windows 10 universal apps

Diseño y XAML

Diseño Adaptativo

Teléfono (portrait)

Tableta (landscape) / Escritorio

Page 16: Windows 10 universal apps

Diseño y XAML

Diseño Adaptado

Teléfono (portrait)

Tableta (landscape) / Escritorio

Page 17: Windows 10 universal apps

Diseño y XAML

Page 18: Windows 10 universal apps

Diseño y XAML

Page 19: Windows 10 universal apps

Diseño y XAML

Continuum para convertibles y Teléfonos

Page 20: Windows 10 universal apps

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>

Page 21: Windows 10 universal apps

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)

Page 22: Windows 10 universal apps

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

Page 23: Windows 10 universal apps

Bindings

Bindings compilados

Page 24: Windows 10 universal apps

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>

Page 25: Windows 10 universal apps

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

Page 26: Windows 10 universal apps

Herramientas

Visual Studio

Nuevos modos diseño, performance instrumentation timeline tool y mucho más…

Page 27: Windows 10 universal apps

Herramientas

Visual Studio

Visual Tree Inspector

Page 28: Windows 10 universal apps

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

Page 29: Windows 10 universal apps

Herramientas

“Template 10”

Page 30: Windows 10 universal apps

Herramientas

“Template 10”

Page 31: Windows 10 universal apps

Herramientas

“Template 10”

Page 32: Windows 10 universal apps

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