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

Introducció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:

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

<Page
    x:Class="DeviceFamily_View.MainPage"
    xmlns:local="using:DeviceFamily_View"
    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:

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.

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”:

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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *