[Tips and Tricks] Creando vistas específicas por dispositivo en Apps Windows 10

Documents-01Introducción

Con la llegada del SDK de Windows 10 Preview tenemos la posibilidad de crear Apps Universales con un único binario que funcione en múltiples plataformas. Es un paso importante pero que conlleva realizar una acción que sera comun, diferenciar entre las diferentes plataformas donde correrá dicho binario para poder adaptar la interfaz de usuario. Con ese objetivo utilizamos entre otras opciones los Adaptive Triggers de los que ya hemos hablado.

Sin embargo, en ocasiones la misma vista en disferentes dispositivos puede que sea totalmente diferente.

¿Que hacer ante estas situaciones?

Creando vistas específicas por dispositivo

Podemos utilizar Adaptive Triggers para adaptar la interfaz o en caso de ser más simple tener dos vistas en dos ficheros diferentes, podemos hacerlo.

Crearemos un nuevo proyecto UAP:

Nueva App UAP

Nueva App UAP

Por defecto, se nos añade una vista llamada MainPage:

<Page
    x:Class="DeviceFamily_View.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DeviceFamily_View"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    </Grid>
</Page>

Añadimos un texto específico a mostrar en Windows junto a un botón:

<StackPanel         
     HorizontalAlignment="Center"  
     VerticalAlignment="Center">
     <TextBlock
          Text="Windows"
          FontSize="48" />
     <Button
          Content="Botón" />
</StackPanel>

Si ejecutamos la App veremos algo como lo siguiente:

Nuestra App en Windows

Nuestra App en Windows

Veremos exactamente lo mismo ejecutando la App en Windows Phone.

¿Y si deseamos tener la misma vista específica para Windows Phone?

Creamos una carpeta siguiente la siguiente nomenclatura:

  • DeviceFamily-[Family]

Donde Family es la familia del dispotivo para el que deseamos sobrescribir la vista. En nuestro ejemplo, creamos una carpeta llamada DeviceFamily-Mobile.

DeviceFamily-Mobile

DeviceFamily-Mobile

Una vez creada la carpeta, vamos a añadir una vista XAML en la misma. Clic derecho sobre la misma y elegimos la opción “Añadir nuevo elemento”:

Nueva vista XAML

Nueva vista XAML

Añadimos la sobreescritura de la vista MainPage. Es importante un detalle del fichero añadido, no añadimos code behind. Esta vista utilizará el mismo code behind que la que teníamos previamente.

Añadimos el contenido de la vista específica para Windows Phone:

<StackPanel         
     HorizontalAlignment="Center"  
     VerticalAlignment="Center">
     <TextBlock
          Text="Windows Phone"
          FontSize="48" />
     <Button
          Content="Botón"
          Click="Button_Click"/>
</StackPanel>

Esta vista es específica para Windows Phone. En este momento al ejecutar en Windows se mostrará la vista creada con el proyecto, mientras que si ejecutamos en Windows Phone se mostrará la vista de la carpeta DeviceFamily-Mobile. El code behind, como comentamos es compartido. Si añadimos por ejemplo el evento clic del botón:

private void Button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
     Debug.WriteLine("Lógica compartida!");
}

NOTA: Normalmente para lanzar la acción de un botón al ser pulsado utilizaremos un comando en la ViewModel asociada con DataContext de la vista.

Tendremos la lógica compartida en un mismo fichero.

NOTA: Recordad que estamos ante una versión Preview de las herramientas de desarrollo. La versión final puede variar con respecto al comportamiento actual.

Podéis descargar el ejemplo realizado a continuación:

También podéis acceder al código fuente directamente en GitHub:

Ver GitHub

De esta forma podemos sobreescribir vistas por completo para tener vistas específicas por familia de dispositivos. Recordar que cualquier tipo de duda o sugerencia la podéis dejar en los comentarios de la entrada.

Más información

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s