Programación para Windows Phone 7: Interfaz y diseño

Este es un artículo de una serie dedicada al desarrollo de aplicaciones para Windows Phone 7 en Silverlight. Como primer ejemplo estamos creando una aplicación sencilla de representación de datos y la iremos refinando en sucesivos episodios:

1. Aplicación base: representación de datos y visionado de vídeos.
   
2. Mejoras visuales y navegación
   
3. Guardar el estado (tombstoning)
   
4. Mejoras de rendimiento
   
5. Interacción con otros servicios
   
6. Preparación para el Marketplace

Hoy toca el episodio 2: Mejoras visuales y navegación, veremos cómo podemos hacer que nuestra aplicación tenga un aspecto profesional en unos pocos pasos.

En el episodio anterior usamos la plantilla Panorama para generar la aplicación. Esta plantilla está pensada para aplicaciones que contienen más información de la que cabe en pantalla y permite desplazar en horizontal el contenido. Para dar una mejor sensación durante el desplazamiento la imagen de fondo se mueve a velocidad diferente del contenido, de manera que da un aspecto de profundidad que da mucha suavidad al movimiento: el efecto Parallax, que muchos de mi quinta recordarán por el juego Shadow of the Beast.


Vamos a ver cómo debemos cambiar esa imagen de fondo e iremos personalizando el aspecto paso a paso.

Imágenes del proyecto

En las carpetas de la solución podemos ver que la plantilla Panorama nos incluyó cuatro imágenes en el proyecto cuando la creamos:

• ApplicationIcon.png: servirá de icono en la lista de aplicaciones
  
• Background.png: servirá como icono en la pantalla principal de "tiles", debe mantener la sección inferior limpia ya que el dispositivo escribirá el título de la aplicación ahí.
  
• PanoramaBackground.png: la imagen de fondo para la plantilla panorama, habitualmente es 1024x768, pero podemos cambiar el ancho según nos convenga para el efecto de desplazamiento.
  
• SplashScreenImage.jpg: la imagen que se usa durante el inicio de la aplicación
  

Iconos

Empezamos por los iconos de la aplicación, tenemos que crear dos, uno para la lista de aplicaciones de 62x62 píxeles y otro para la pantalla de tiles de 173x173, aquí podéis ver los que nos crea VS.Net por defecto:

ApplicationIcon (62x62)


Background (173x173)


Una aspecto a tener en cuenta al crear nuestros iconos es si queremos que se adapten al tema que haya definido el usuario o no. Para el caso de la imagen Background bastará con dejar el fondo del fichero png como transparente, de esta manera el fondo será del color que tenga aplicado el usuario para todas las "baldosas". En el caso del ApplicationIcon no podemos hacer gran cosa, por ahora sólo está permitido para el sector OEM y en nuestro caso la transparencia sólo nos quedará como una sombra oscura.

Vamos a crear nuestros dos iconos, podemos hacerlo con cualquier editor que nos permita grabar archivos .png. Como pretendía editar la transparencia he usado Paint.Net. Si creamos una imagen blanca con fondo transparente, luego ese fondo será sustituido por el color del tema (en azul en el emulador). Es importante dejar espacio en la zona inferior para que aparezca el título de la aplicación.



Para el icono de aplicación el fondo transparente no aplica el color del tema, así que crearemos un icono con un fondo sólido:

Imagen de fondo del panorama

La imagen de fondo que tenemos para el efecto panorama la podemos cambiar por cualquiera que sea de 768 píxeles de altura, según la pongamos más ancha o más estrecha el efecto de velocidad del fondo cambiará, así que podemos ir jugando con el ancho, para la aplicación de muestra seguiremos con el tamaño estándar de 1024x768.

SplashScreen

La pantalla de bienvenida aparece durante la carga inicial de la aplicación para hacernos más agradable la espera. Aunque siempre nos puede parecer más bonita la aplicación con una pantalla de Splash, la recomendación es que si tu aplicación arranca lo suficientemente rápido no la pongas. Recordad las veces que os ha molestado la música que os ponen cuando llamáis a alguna linea de atención al cliente, pues la pantalla de bienvenida puede acabar teniendo el mismo resultado.

En nuestro caso dejaremos por ahora la pantalla que hay (muestra un reloj estático, no tiene animación) y quizá más adelante pongamos una... o no, lo decidiremos en el episodio sobre las mejoras en el rendimiento.

Mejoras visuales y algo de UX

Efecto Tilt (inclinación)

Cuando pulsamos una de las baldosas de la pantalla principal o alguno de los iconos de aplicación en la secundaria podemos observar cómo el elemento seleccionado se inclina un poco hacia el lado donde el dedo presiona, de manera que el usuario observa el efecto sobre la acción de pulsar. Eso se consigue con el efecto Tilt, que, aunque no está disponible directamente en el sdk, podemos descargarlo de MSDN. Una vez descargado el proyecto debemos buscar el fichero TiltEffect.cs y añadirlo a nuestro proyecto. En el ejemplo lo pondremos en la carpeta lib, pero podemos ponerlo donde queramos.


Luego tenemos que cambiar el namespace de TiltEffect por el usado por defecto en nuestro proyecto. En nuestro caso: CanalDeNoticiasMSDNv2.

Código :

namespace CanalDeNoticiasMSDNv2
{
///<summary>
/// This code provides attached properties for adding a 'tilt' effect to all controls within a container.
///</summary>
public class TiltEffect : DependencyObject
{...

Ahora vamos a aplicar ese efecto en el MainPage.xaml:

1. Añadimos el Namespace de aplicación al principio del archivo:

Código :

... SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="False"
xmlns:local="clr-namespace:CanalDeNoticiasMSDNv2" >

2. Ahora en el grid principal ponemos el valor "True" a la propiedad TiltEffect.IsTiltEnabled

Código :

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid local:TiltEffect.IsTiltEnabled="True" x:Name="LayoutRoot" Background="Transparent">

Y ya tendremos el efecto habilitado para todos los controles Button y ListBoxItem, de esta manera el usuario tendrá una ayuda visual que le indique cuándo está pulsando sobre un elemento.

¿Problemas de espacio?

Una de los mayores problemas que tenemos en un dispositivo como Windows Phone es el espacio. Queremos que aparezca la mayor cantidad de información posible, aunque tenemos también que intentar ajustarnos a las directivas de diseño de Windows Phone y utilizar fuentes grandes y legibles.

En la plantilla Panorama tenemos un título por cada sección y justo debajo hemos colocado una listbox. El título está muy bien para identificar la sección, pero una vez estamos desplazando los elementos de la listbox nos quita una gran cantidad de espacio. Es posible aprovechar ese espacio, pero para ello deberemos combinar unos cuantos controles que nos den la misma apariencia que el control ListBox.

La idea es que al desplazar los elementos de la lista hacia arriba también se desplace el título con la lista y nos permita tener una zona de desplazamiento mucho más larga. Eso lo conseguiremos metiendo dentro de un mismo elemento de scroll título y contenido.

Lo primero que debemos hacer es quitar la cabecera al PanoramaItem, bastará quitar el texto que tenemos en el valor Header:

Código :

<controls:PanoramaItem>

Entonces sustituiremos el ListBox por un control ScrollViewer, que nos permitirá desplazar el contenido cuando no quepa en la pantalla. Dentro del ScrollViewer incluiremos el título que teníamos antes, con un margen para que quede en el mismo lugar que el título del PanoramaItem:

Código :

<ScrollViewer>
<StackPanel Margin="0,0,-12,0" >
<TextBlock Text="Vídeos" Margin="0,-25,0,0" Style="{StaticResource PhoneTextTitle1Style}" />

Ahora, necesitamos un elemento que nos permita repetir una plantilla de representación de elementos: ItemsControl nos permitirá hacer un binding como hacíamos con la ListBox y dentro colocar la misma plantilla que teníamos:

Código :

<ItemsControl ItemsSource="{Binding Videos}" Margin="0,25,0,0">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<Image Height="100" Width="100" Source="{Binding Thumbnail}" Margin="12,0,9,0"/>
<StackPanel Width="311">
<TextBlock Text="{Binding Title}" TextWrapping="Wrap"
Style="{StaticResource PhoneTextTitle3Style}"/>
</StackPanel> ...

Una vez hecho ésto ya podremos desplazar la columna entera hacia arriba, título incluido:


Pero nos hemos quedado sin una funcionalidad que, bueno, igual echaremos en falta: ya no tenemos el evento que nos permitía navegar al vídeo. Pero no nos vamos a amedrentar ahora, ¿verdad? Como usamos Silverlight podemos ir anidando controles, así que para tener un evento de pulsación podemos meter el StackPanel dentro de un botón, y además mantendremos el efecto Tilt que pusimos antes, ya que funciona para ListItem y para Button:

Código :

<Button BorderThickness="0">
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<Image Height="100" Width="100" Source="{Binding Thumbnail}" Margin="12,0,9,0"/>
<StackPanel Width="311">
<TextBlock Text="{Binding Title}" TextWrapping="Wrap"
Style="{StaticResource PhoneTextTitle3Style}"/>
</StackPanel>
</StackPanel>
</Button>

Otra opción habría sido usar el GestureListener del Silverlight Toolkit, pero hablaremos de esta librería otro día.

Efectos secundarios y edición con Blend

Le hemos quitado el borde al botón para evitar el recuadro, pero eso nos ha causado un pequeño daño colateral. El comportamiento por defecto del botón cambia el color de fondo al pulsar para dar el efecto de pulsado. Ese efecto será bueno para un botón pero en nuestra aplicación no acaba de quedar bien, pues el botón ocupa mucho sitio.

Por suerte, este efecto se puede cambiar variando el estilo del botón. Para evitarlo tenemos que modificar el comportamiento del estado Pressed del botón. Como es un comportamiento visual la manera más fácil es hacerlo con Blend, que también viene con el kit de desarrollo gratuito.

El primer paso es abrir el proyecto con Blend, para ello si estamos en Visual Studio basta con pulsar botón derecho sobre el proyecto > abrir con Blend.

Una vez en Blend abriremos MainPage.xaml para obtener el árbol de elementos y navegaremos hasta el control ItemsControl.

El botón que queremos editar es el que está dentro de la plantilla de elementos, para ello tendremos que pulsar el botón derecho en ItemsControl e ir a: Edit Additional Templates>Edit Generated Items (ItemTemplate)>Edit Current. Allí ya podremos editar el botón pulsando de nuevo el botón derecho sobre el [Button] y haremos Edit Template>Edit a Copy… Lo que nos creará una copia de la plantilla estándar Button sobre la que podremos trabajar para cambiar su comportamiento por defecto.

En la parte superior izquierda de la pantalla de Blend hay unos tabs donde encotraremos el tab de States. Aquí nos aparecerán los diferentes estados del botón. El que nos interesa a nosotros es el estado Pressed:


Si pulsamos sobre él nos aparecerá por debajo la plantilla. Pulsamos sobre el [Grid] para cambiar el color de fondo a transparente, de esta manera no aparecerá el efecto.


Guardamos y cerramos Blend, veremos en el Visual Studio cómo Blend nos ha creado un nuevo estilo para nuestro botón dentro de la página MainPage.xaml.

Ya sólo nos queda controlar el click del botón. El código cambia un poco ya que no tenemos un valor de selección, ahora miraremos qué elemento está enlazado en la propiedad DataContext del propio botón, a partir de ahí el código es igual:

Código :

private void Button_Click(object sender, RoutedEventArgs e)
{
Control c=sender as Control;
if (c != null)
{
ElementoEntradaVideo elemento=c.DataContext as ElementoEntradaVideo;
if (elemento != null)
{
new MediaPlayerLauncher
{
Media=new Uri(elemento.Video),
Controls=MediaPlaybackControls.All
}.Show();
}
}
}

Para el resto de columnas podemos asignar directamente el estilo que hemos creado en Blend a cada botón:

Código :

<Button Style="{StaticResource ButtonStyle1}" Click="Button_Click" >

Avisa al usuario que vas a descargar: Navegación

Vamos a pararnos a pensar un momento en cómo funciona nuestra aplicación por ahora: nuestro código lanza un vídeo o navega a una página web al pulsar sobre una de las entradas que mostramos. Este comportamiento sería algo normal en una aplicación de escritorio y no tenemos porque avisar.

En el caso de un teléfono, en muchas ocasiones estará conectado a una red WiFi, sino a una red 3G donde la transferencia suele tener un límite y si nos pasamos nuestra conexión empezará a ir más lenta. Eso puede provocar que el usuario de nuestra aplicación no se ponga muy contento si lanzamos una descarga de vídeo sin que él lo haya confirmado antes.

Para darle una oportunidad al usuario para decidir si quiere ver el vídeo o no, vamos a crear una página intermedia donde podamos ver más información del vídeo y un botón para lanzar el reproductor.

Vamos a crear una nueva Página en modo "Portrait" donde colocaremos la información sobre el vídeo:

Dentro de la página Portrait podremos poner el contenido resultado de una pulsación en un elemento. Vamos a navegar a la página usando la clase NavigationService desde el manejador de evento del click del botón:

Código :

Control c=sender as Control;
if (c != null)
{
ElementoEntradaVideo elemento=c.DataContext as ElementoEntradaVideo;
if (elemento != null)
{
NavigationService.Navigate(new Uri( string.Format("/DetalleVideo.xaml?id={0}",
App.ViewModel.Videos.IndexOf(elemento)), UriKind.Relative));
}

Este código navegará a una página llamada DetalleVideo en el directorio principal de la aplicación. A la página le pasamos un identificador que podremos recuperar más tarde en la página destino en su método OnNavigatedTo:

Código :

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
base.OnNavigatedTo(e);
if (App.ViewModel != null && App.ViewModel.Videos != null && App.ViewModel.Videos.Count > 0)
{
int index=int.Parse(this.NavigationContext.QueryString["id]);
this.DataContext =App.ViewModel.Videos[index];
}
}

Aquí asignaremos a la propiedad DataContext el elemento que habíamos seleccionado en la página anterior.

Para lanzar el vídeo vamos a utilizar una ApplicationBar como las que llevan otras aplicaciones, tenemos incluso un set de iconos estándar en la carpeta C:\Program Files\Microsoft SDKs\Windows Phone\v7.0\Icons , hay una carpeta dark y otra light, pero en el caso de la ApplicationBar nos bastará usar los encontrados en dark, pues la barra se adaptará automáticamente al tema. Vamos a poner los iconos mail y feature.video y los enlazaremos a los dos botones de la appbar.

Para que los iconos que hemos añadido al proyecto funcionen como tales tendremos que cambiar sus propiedades Build Action a Content y Copy to Output Directory a Copy Always.

Mostrar contenido HTML

En las entradas RSS es bastante común encontrarse con código HTML, normalmente dentro del campo Description. En Silverlight lo más común para mostrar código HTML es utilizar un WebBrowserControl y usar el método NavigateToString para pasarle el código HTML, pero en WP7 eso acarrea algunos problemas que se pueden solucionar con algunos trucos.

Además de la solución que proponen en ese blog y para adaptar al máximo la aplicación a las directivas de UX vamos a cambiar cómo se ven los hiperenlaces y cómo actúa la aplicación en el caso de pulsar uno de ellos, pues por defecto navegará pero dentro del mismo WebBrowserControl.

Añadimos manejadores a los eventos Loaded y Navigating para permitirnos cambiar el comportamiento. Al cargar vamos a cambiar el estilo del navegador para evitar que hagan zoom y cambiaremos el fondo y el color de fuente a los mismos que haya en el sistema. Se tiene que hacer en ese evento pues cualquier modificación que hagamos antes no tendrá efecto.

Para evitar que los enlaces que pueda tener la descripción se abran dentro del webbrowser que hemos puesto, en el evento Navigating vamos a parar la navegación y lanzaremos una WebBrowserTask que abrirá la página dentro del IExplorer del teléfono:

Código :

private void webBrowser_Navigating(object sender, NavigatingEventArgs e)
{
e.Cancel=true;
new WebBrowserTask() { URL=e.Uri.ToString() }.Show();
}

Notas finales

Además de lo que habéis visto en el ejemplo os recomiendo que leáis el blog del equipo de WP7. Para el tema de hoy podéis consultar la etiqueta UX donde encontraréis muchos posts con buenos consejos de Alfred Astort y otros: http://windowsteamblog.com/windows_phone/b/wpdev/archive/tags/ux/

En el próximo episodio hablaremos del Tombstoning para persistir el estado de nuestra aplicación y así evitar tener que descargar datos cuando no sea necesario.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.