66
Reconnect(); - Sevilla CartujaDotNet

Reconnect(); Sevilla - Universal Windows Platform

Embed Size (px)

Citation preview

Page 1: Reconnect(); Sevilla - Universal Windows Platform

Reconnect();- Sevilla

CartujaDotNet

Page 2: Reconnect(); Sevilla - Universal Windows Platform

UWPReconnect(); Sevilla

Page 3: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

Javier Suárez RuizMicrosoft MVP Windows Platform

Development

• Blog: http://geeks.ms/blogs/jsuarez

• Email: [email protected]

• Twitter: @jsuarezruiz

Page 4: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

Page 5: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

Agenda

Comenzamos1. El viaje de la convergencia

2. Universal App Platform

Mejoras en estados visuales1. Estrategias para interfaces adaptativas

2. XAML Views por dispositivo

3. El control Relative Panel

4.Adaptive Triggers

5. SplitView

Vistas por familias de

dispositivos

Page 6: Reconnect(); Sevilla - Universal Windows Platform

Comenzamos!

Page 7: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

Mayor facilidad para estar al día

Plataforma de Apps y Core unificado

El viaje de la convergencia

Windows 10

Convergencia a nivel de kernel

Convergencia enel modelo de

App

Page 8: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

Universal Windows Platform

Plataforma de Desarrollo unificada

Un único paquete

Código adaptativo

XboxIoT

Universal Windows Platform

Core APIs

Page 9: Reconnect(); Sevilla - Universal Windows Platform

La historia de las Apps Windows adaptativas

Page 10: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

Opciones de diseño para adaptar la interfaz

Estrategias de diseñoLayouts flexibles con tamaños relativos

Vistas XAML por dispositivoArchivos XAML separados con código compartido

Estados visuales XAMLUtilizados para escalar y gestionar orientaciones

Page 11: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

Page 12: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

Page 13: Reconnect(); Sevilla - Universal Windows Platform

Los usuarios adoran las Apps queson geniales en cada uno de susdispositivos

Page 14: Reconnect(); Sevilla - Universal Windows Platform

¿Qué tenemos “gratis”?

Page 15: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

Page 16: Reconnect(); Sevilla - Universal Windows Platform

Mejoras en Visual States

Page 17: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

Visual State setters & triggers

Setters permite establecer propiedades simplesLa mayoría de propiedades no necesitan animación

Triggers declarados cuando se aplica un estadoNo 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 18: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

Tipos de trigger

MinWindowWidth

MinWindowHeight

“Cualquier cosa por encima de este valor”

Los valores se especifican en píxeles

Page 19: Reconnect(); Sevilla - Universal Windows Platform

DEMO

Visual State Triggers

3:50

Page 20: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

…cuando algo en la ViewModel cambia

…cuando cambia algun valor

…dependiendo del tamaño de la pantalla

Bien, entonces…

¿Visual State Triggers Custom?

Page 21: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

public class InputTypeTrigger : StateTriggerBase

{

private FrameworkElement _targetElement;

private PointerDeviceType _lastPointerType, _triggerPointerType;

public FrameworkElement TargetElement

{

get { return _targetElement; }

set

{

_targetElement = value;

_targetElement.AddHandler(FrameworkElement.PointerPressedEvent, newPointerEventHandler(_targetElement_PointerPressed), true);

Custom Trigger

Page 22: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

xmlns:triggers="using:StravaMobile.UAP.Triggers"

<VisualStateGroup x:Name="InputTypeStates">

<VisualState>

<VisualState.StateTriggers>

<triggers:InputTypeTrigger TargetElement="{x:Bind ActivityList}"PointerType="Touch" />

<triggers:InputTypeTrigger TargetElement="{x:Bind ActivityList}"PointerType="Pen" />

</VisualState.StateTriggers>

<VisualState.Setters>

<Setter Target="GoToTopButton.Visibility" Value="Visible" />

Uso de Custom Trigger

Page 23: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

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 24: Reconnect(); Sevilla - Universal Windows Platform

DEMO

Custom Triggers

3:50

Page 25: Reconnect(); Sevilla - Universal Windows Platform

Nuevos controles XAML

Page 26: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

Relative Panel es un control de Layout XAML. Posiciona

los elementos estableciendo relaciones entre ellos.

Introducción al panel Relative Panel

Controles de Layout en Windows XAML

GridStack

PanelCanvas

Scroll

ViewerBorder View Box

Wrap

GridRelative

Panel

Page 27: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

Relative Panel

AdaptativoRelativo al Panel

Relativo a controles “hermanos”

Simplifica nuestro XAMLSimplifica el árbol visual

Simplifica los estados visuales

Page 28: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

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 29: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

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 30: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

Alinearse con “hermanos” (derecha)

<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 31: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

Alinearse con “hermanos” (encima, derecha)

<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 32: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

Alinearse con “hermanos” (debajo, centro)

<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 33: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

Alinearse con “hermanos” (debajo, izquierda)

<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 34: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

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 35: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

Opciones de alineación 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 36: Reconnect(); Sevilla - Universal Windows Platform

DEMODEMODEMO

Relative Panel

Page 37: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

Simplificando el árbol visual

<Grid>

<StackPanel>

<StackPanel>

<TextBlock />

<TextBlock />

</StackPanel>

<StackPanel>

<TextBlock />

<TextBlock />

</StackPanel>

</StackPanel>

</Grid>

<RelativePanel>

<TextBlock />

<TextBlock />

<TextBlock />

<TextBlock />

</RelativePanel >

Page 38: Reconnect(); Sevilla - Universal Windows Platform

El control Relative Panel es una de las claves para tus estrategias a la hora de adaptar la UI

Page 39: Reconnect(); Sevilla - Universal Windows Platform

El control SplitView

Page 40: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

SplitView

Page 41: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

Comportamiento

Your Windows App

Page 42: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

Segoe MDL2 Assets

Page 43: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

SplitView.Pane

<SplitView>

<SplitView.Pane>

<StackPanel>

<RadioButton />

<RadioButton />

</StackPanel>

</SplitView.Pane>

</SplitView>

Page 44: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

SplitView.Content

<SplitView>

<SplitView.Pane />

<SplitView.Content>

<Frame/>

</SplitView.Content>

</SplitView>

Page 45: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

Propiedades del SplitView

<SplitView

IsPaneOpen="False"

CompactPaneLength="150"

OpenPaneLength="50"

Placement="Right|Left"

PaneDisplayMode="CompactInline">

<SplitView.Pane />

<SplitView.Content />

</SplitView>

Page 46: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

SplitView.PaneDisplayModeSplitView.IsPaneOpen

"True"SplitView.IsPaneOpen

"False"

Inline

Overlay

Compact Inline

Compact Overlay

Page 47: Reconnect(); Sevilla - Universal Windows Platform

DEMODEMO

SplitView

Page 48: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

¿Qué pasa si…?

SplitView vs. Pivot

Comandos en la

parte superior VS

inferior

Page 49: Reconnect(); Sevilla - Universal Windows Platform

Vistas por familia de dispositivo

Page 50: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

Cuando ApiInformation no es

suficiente

Utilizamos familias de dispositivos como

Xbox y Surface Hub

Adapta la experiencia de usuario

Page 51: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

Debemos determinar escenarios donde sea necesario

Creamos vistas específicas en estos casos

Cargamos la vista adecuada en consecuencia

Adapta tu vista

//Get the diagonal size of the integrated displayvar dsc = new DisplaySizeHelper.DisplaySizeClass();double _actualSizeInInches = dsc.GetDisplaySizeInInches();

//Guidance: If the diagonal size is <= 7" use the OneHanded optimized viewif ( _actualSizeInInches >0 && _actualSizeInInches <= ONEHANDEDSIZE){

rootFrame.Navigate(typeof(MainPage_OneHanded), e.Arguments);}

else{

rootFrame.Navigate(typeof(MainPage), e.Arguments);}

Page 52: Reconnect(); Sevilla - Universal Windows Platform

DEMODEMODEMO

Vistas por familia de dispositivo

Page 53: Reconnect(); Sevilla - Universal Windows Platform

Validando XAML!

Page 54: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

Validando XAML en Windows 10

Page 55: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

<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 rendimiento

Se resuelve en tiempo de compilación y produce errores!

Page 57: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

Comparativa de consumo de Memoria

Page 58: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

Usando bindings compilados

Reemplazamos {Binding …} por {x:Bind …}

x:Bind esta fuertemente tipadoEl context es la página o control de usuario

Mode=OneTime es el modo por defecto

Page 59: Reconnect(); Sevilla - Universal Windows Platform

DEMODEMODEMO

X:Bind

Page 60: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

Duck Typing – mismo nombre de propiedad en diferentes objetosText=“{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 “clásicos”?

Page 61: Reconnect(); Sevilla - Universal Windows Platform

Herramientas

Page 62: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

Visual Studio

Page 63: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

Visual Studio

Page 64: Reconnect(); Sevilla - Universal Windows Platform

DEMODEMODEMO

Visual Tree Inspector

Page 65: Reconnect(); Sevilla - Universal Windows Platform

P & R

Page 66: Reconnect(); Sevilla - Universal Windows Platform

Reconnect(); Sevilla

ConclusionesEl fin del viaje de la convergencia

Un paquete, una Store, etc.

Mejoras en estados visualesPropiedades simples y Triggers disponibles

Vistas por familia de dispositivoCuando la complejidad de adaptar layout a multiples familias de dispositivos es elevada, podemos crear vistas específicas por familia de dispositivo.

RelativePanelNuevo Panel que permite posicionar elementos con relaciones entre ellos.

Visita la web del programa de MVPs para acceder a las grabaciones!http://aka.ms/Win10MVP