Utilizando fuentes personalizadas en nuestras aplicaciones de Windows Phone 7

Introducción

Cuando desarrollamos una aplicación de Windows Phone 7 normalmente utilizaremos las fuentes de letra habituales instaladas en nuestro sistema y que serán utilizadas por Windows Phone en tiempo de ejecución.

Si Windows Phone no tiene o no encuentra esa fuente de letra, utilizará la Segoe WP, pero imaginémonos que queremos utilizar una fuente de letra personalizar en nuestra aplicación, ¿cómo podemos hacerlo?.

Iniciando el proyecto

Lo primero de todo es contar con una fuente de letra.

En mi caso he elegido una fuente de letra de nombre «SketchFlow Print» (modo demo).

Preparando el proyecto en Visual Studio 2010

Lógicamente, lo primero que tenemos que hacer una vez tengamos la fuente de letra que queremos utilizar, es crear nuestro proyecto en Visual Studio 2010.

Una vez hecho esto y en mi caso, he cambiado el modo de depuración a Windows Phone Device.

Al ejecutar nuestra aplicación, ésta se mostrará por defecto de la siguiente manera en nuestro Windows Phone 7:

Agregando una fuente de letra personalizada al proyecto

Como podemos ver en la imagen anterior, la fuente de letra es la que Windows Phone utiliza por defecto.

Ahora bien, para agregar una fuente de letra personalizada, vamos a crear un directorio denominado Fonts y vamos a agregar dentro la fuente de letra (con extensión ttf) en este directorio.

Una vez hecho esto, seleccionaremos la fuente de letra y modificaremos en la ventana de propiedades la propiedad Acción de compilación para ponerla como Contenido.

Lo último que tenemos por delante es indicar al control de usuario que queramos la fuente de letra a utilizar.

Por ejemplo, para el título de la aplicación y en su control TextBlock:

   1: <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" 

   2: FontFamily="Fonts/SketchFlow Print.ttf#SketchFlow Print" FontSize="60" />

Aquí lo importante es observar la propiedad FontFamily.

Aquí indico la ruta en la que se encuentra nuestra fuente personalizada (Fonts), el fichero de nuestra fuente de letra (SketchFlow Print.tff), y el nombre de la fuente de letra (SketchFlow Print) y que podemos ver fácilmente en la primera captura de pantalla, que se consigue en Windows haciendo doble clic sobre la fuente de letra.

Probando el proyecto

Finalmente, nuestra aplicación tendrá ahora un aspecto similar al siguiente:

Utilizando la fuente de letra en toda la aplicación

Ahora bien, este truco sirve para utilizar una fuente de letra personalizada con un control de usuario concreto, pero imaginemos que queremos utilizar la fuente de letra a lo largo de todo el proyecto o aplicación.

¿Cómo resolver esto de forma fácil para que no tengamos que indicar siempre el nombre de la fuente de letra y su nombre?.

Imaginemos incluso los beneficios/perjuicios a la hora de mantener nuestra aplicación y la cantidad de modificaciones que tendríamos que hacer (aunque en este caso lo resolvamos fácilmente con un reemplazar).

Para resolver este dilema, lo que podemos hacer es abrir el archivo App.xaml.

Dentro de este archivo, nos situaremos en la sección Application.Resources.

Aquí indicaremos la fuente de letra a utilizar tal y como se indica a continuación:

   1: <Application.Resources>

   2:     <FontFamily x:Key="SketchFlowPrintFont">Fonts/SketchFlow Print.ttf#SketchFlow Print</FontFamily>

   3: </Application.Resources>

A continuación, nos iremos al código de nuestra aplicación y modificaremos la propiedad FontFamily del control de usuario de esta forma:

   1: <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" 

   2: FontFamily="{StaticResource SketchFlowPrintFont}" FontSize="60" />

Como podemos apreciar, lo único que hemos hecho aquí es simplificar el uso de la fuente de letra acudiendo a los recursos de la aplicación.

Espero que te resulte útil.