10.4.11

Aprender Windows Phone 7 (parte 23): Personalizar themes en Windows Phone 7

Hoy vamos a aprender a personalizar los themes de nuestras aplicaciones Windows Phone 7.

En la pantalla de configuración de Windows Phone 7, el usuario puede indicar si desea que usar el fondo del dispositivo en color oscuro (dark theme) o con el fondo blanco (light theme).

clip_image002

Figura 1.

¿Cómo afecta esto a las aplicaciones que creemos en Silverlight? Nada, siempre que no modificamos los controles que utilicemos (textboxes, textblocks...) y dejemos los colores que vienen por defecto.

Automáticamente estos controles detectarán el cambio de theme y pondrán los textos en el color correspondiente.

Podéis ver este comportamiento en el ejemplo:

clip_image004

Figura 2.

clip_image006

Figura 3.

Ahora supongamos que no nos gusta el esquema blanco y negro y queremos utilizar nuestros propios colores o poner unas imágenes distintas para nuestra aplicación cuando el tema es light y otras imágenes cuando el tema es dark.

Pues eso es lo que contaremos hoy en este tutorial.

¿Cómo se hace que nuestra aplicación detecte qué tema hay y modifique los controles en función de este tema?

Pues es sencillo.

Primero vamos a crear dos atributos que representarán el tema light y el tema dark:

 

private Color lightThemeBackground = Color.FromArgb(255, 255, 255, 255);

private Color darkThemeBackground = Color.FromArgb(255,0,0,0);

 

Estos dos atributos los utilizaremos para comparar cuál tema está seleccionado.

Vamos a crear un procedimiento llamado “personalizarTheme” que se ejecutará en el constructor de la página después de inicializar los componentes de la página.

El código de este procedimiento será:

 

private void personalizarTheme()

{

SolidColorBrush backgroundBrush = Application.Current.Resources["PhoneBackgroundBrush"] as SolidColorBrush;

if (backgroundBrush.Color == lightThemeBackground)

{

// theme light

// … insertar cambios cuando el theme es light

}

else

{

// theme dark

// … insertar cambios cuando el theme es dark

}

}

 

El color del theme seleccionado lo obtenemos a través del recurso “PhoneBackgroundBrush” que indica de qué color será pintado fondo. Comparando este color con el color del theme light sabemos si se ha seleccionado el theme light o el dark.

Y una vez que sabemos esto ejecutaremos una serie de instrucciones u otras.

En el ejemplo que vamos a crear, mostraremos la imagen de un sol o de una luna en función del theme seleccionado. Además el color de los textos también dependerá del theme.

Los dibujos de la luna y el sol los he hecho, lo notaréis por su gran calidad:

clip_image008

Figura 4.

clip_image010

Figura 5.

 

Creando un ejemplo

Primero abriremos Visual Studio 2010 for Windows Phone. Pulsaremos en el menú File -> New Project y seleccionamos los siguientes valores:

- Visual C#: Silverlight for Windows Phone

- Name: PrototipoTheme

- Location: (el que queráis, yo por ejemplo he usado...) C:\A_warterrain_A\Ejemplos WP7\

- Solution name: PrototipoTheme

clip_image012

Figura 6.

Seleccionamos el control ApplicationTitle (el texto “MY APPLICATION”) y cambiamos el valor de su propiedad Text por “PROTOTIPO THEME”.

Después cambiamos el control PageTitle (el texto “page name”) y cambiamos el valor de su propiedad Text por “temas”.

A continuación agregaremos un control Image (le ponemos de nombre imageAstro), seleccionamos la propiedad Source y pulsamos en Add y añadimos las dos imágenes del sol y la luna. Dejamos seleccionada la imagen de la luna.

Crearemos otro TextBlock (le ponemos de nombre textBlockAstro), y le ponemos como Text “Luna”. También modificamos el tamaño de la letra poniendo a tamaño 32.

Voy algo rápido porque creo que tenéis el nivel necesario después de todos estos tutoriales para no tener que entrar en los detalles. Si no os manejáis del todo bien, os recomiendo volver atrás y repetir algún tutorial para coger más soltura.

Os tendría que quedar una aplicación con el aspecto siguiente:

clip_image014

Figura 7.

¿Qué queda por hacer?

Añadir los dos atributos en la página:

 

private Color lightThemeBackground = Color.FromArgb(255, 255, 255, 255);

private Color darkThemeBackground = Color.FromArgb(255,0,0,0);

 

Vamos a insertar la llamada al procedimiento “personalizarTheme” en el constructor de la página. El código es el siguiente:

 

// Constructor

public MainPage()

{

InitializeComponent();

personalizarTheme();

}

 

Y ahora añadimos el procedimiento:

 

private void personalizarTheme()

{

SolidColorBrush backgroundBrush = Application.Current.Resources["PhoneBackgroundBrush"] as SolidColorBrush;

if (backgroundBrush.Color == lightThemeBackground)

{

// theme light

// … insertar cambios cuando el theme es light

PageTitle.Foreground = new SolidColorBrush(Color.FromArgb(255, 0, 0, 255));

ApplicationTitle.Foreground = new SolidColorBrush(Color.FromArgb(255, 0, 0, 255));

textBlockAstro.Foreground = new SolidColorBrush(Color.FromArgb(255, 0, 0, 255));

imageAstro.Source = new BitmapImage(new Uri("/PrototipoTheme;component/Images/figura4.png", UriKind.Relative));

textBlockAstro.Text = "Sol";

}

else

{

// theme dark

// … insertar cambios cuando el theme es dark

PageTitle.Foreground = new SolidColorBrush(Color.FromArgb(255, 255, 255, 0));

ApplicationTitle.Foreground = new SolidColorBrush(Color.FromArgb(255, 255, 255, 0));

textBlockAstro.Foreground = new SolidColorBrush(Color.FromArgb(255, 255, 255, 0));

imageAstro.Source = new BitmapImage(new Uri("/PrototipoTheme;component/Images/figura5.png", UriKind.Relative));

textBlockAstro.Text = "Luna";

}

}

 

Las líneas de código sirven para cambiar el color de los textos, cambiar la imagen que se cargará y el texto “Sol/Luna”.

¿Muy sencillo, verdad?

Veamos cómo queda:

 

 

Recursos de este artículo:

- Sitio web para desarrolladores de Windows Phone 7.

- Grupo del DotNetClub UCM

No comments:

Post a Comment