Hace unos días os pasé este artículo sobre el control Image. Me ha pedido un compañero que haga yo el tutorial y así queda más claro. Ok, vamos con ello.
Vamos a hacer un ejemplo para aprender a trabajar con el control Image. Este control sirve para poner imágenes en las aplicaciones Silverlight para Windows Phone 7.
En el ejemplo que vamos a crear un callejero con una imagen del mapa de una hermosa ciudad elegida al azar. Por ejemplo, Talavera de la Reina.
Vais a ver qué divertido y sencillo es.
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: CallejeroTalavera- Location: (el que queráis, yo por ejemplo he usado...) C:\A_warterrain_A\Ejemplos WP7\- Solution name: CallejeroTalavera
Figura 1.
Seleccionamos el control ApplicationTitle (el texto “MY APPLICATION”) y cambiamos el valor de su propiedad Text por “TALAVERA DE LA REINA”.
Después cambiamos el control PageTitle (el texto “page name”) y cambiamos el valor de su propiedad Text por “Callejero”.
Vamos a arrastrar un control Image desde la pestaña Tolbox hasta nuestra página y lo ensancharemos para que ocupe una buena parte de la pantalla.
Tenemos una foto del mapa de Talavera de la Reina que he sacado de Internet.
Imágen callejero Talavera de la Reina.
Entramos en las propiedades del control Image que hemos añadido a nuestro proyecto. Y pulsamos el botón “...” que hay al lado de la propiedad Source. Esta propiedad va a definir de dónde se obtiene la imagen del control Image.
Figura 2.
En la ventana que se abrirá hay que seleccionar el botón “Add” para buscar la imagen que se visualizará. En nuestro caso buscaremos la imagen del mapa de Talavera de la Reina.
Cuando la añadáis aparecerá lo siguiente:
Figura 3.
Aquí han pasado varias cosas.
Visual Studio ha creado una carpeta llamada Images dentro de nuestro proyecto y ha guardado dentro una copia de la imagen.
En Path véis que aparece “/CallejeroTalavera;component/Images/mapa_talavera.png”. Esta es una dirección URI (Uniform Resource Identifier). “/CallejeroTalavera” indica el paquete de despliegue. “component/Images/mapa_talavera.png” indica el fichero dentro del paquete.
La razón por la que se utiliza este tipo de dirección es porque mientras que las direcciones de tipo URL referencian direcciones web, las direcciones URI pueden referenciar recursos en cualquier localización.
Si pulsamos Ok veremos que la imagen nos aparece deformada.
Figura 4. Fill.
Esto es debido a que la opción por defecto es cambiar las dimensiones de la imagen para que rellene completamente la imagen ajustándose a los bordes del control Image. Este comportamiento está definido por la propiedad Stretch (por defecto vale Fill).
Si cambiamos el valor de esta propiedad por Uniform, mantendrá las proporciones originales pero a menos que la imagen tenga las mismas proporciones que el control, en el resto de los casos ajustará el eje horizontal o el vertical y el otro eje se reducirá para que encaje la imagen.
Figura 5. Uniform.
En este caso, se ha ajustado el eje horizontal pero el vertical se ha reducido para que encaje la imagen.
Figura 6. UniformToFill.
Si seleccionamos el valor UniformToFill mantendrá la proporción del eje horizontal y vertical de la imagen. El problema es que puede ser que no veamos toda la imagen porque no quepa.
Pero nosotros estamos haciendo un callejero. Es decir queremos ver la imagen a un tamaño que podamos leer el nombre de las calles y movernos por la imagen deslizando y arrastrando el dedo por la pantalla.
¿Cómo se hace esto?
Es sencillo. Los pasos a dar son:
- En el control Image, propiedad Strech = Uniform.- En el control Image, propiedad Width = 2544 (ancho de la imagen).- En el control Image, propiedad Height = 1302 (altura de la imagen).- Añadir un control ScrollViewer y meter dentro la imagen. Podéis arrastrar el control y soltarlo en la página Podéis hacerlo en el código XAML. El resultado debería ser similar el siguiente:
- En el control ScrollViewer, poner la propiedad HorizontalScrollBarVisibility="Auto". - En el control ScrollViewer, poner la propiedad VerticalScrollBarVisibility="Auto".
Y ya está. Ahora si lanzamos la aplicación podremos navegar por la pantalla tocando y arrastrando con el dedo.
Os pongo unos pantallazos de cómo quedaría y un video para que os quede mucho más claro los conceptos que hemos explicado aquí.
Figura 7.
Figura 8.
¡Está chulísimo!
Os voy a dejar pendiente unos cuántos ejercicios para que practiquéis. Yo ahora me iré a echar un “Crackdown 2” y relajarme un ratito.
Ejercicio:
Podéis personalizar el callejero a vuestro gusto añadiendo:
- Escalado para hacer la imagen más pequeña o grande. (Pista: podéis poner dos botones “+” y “-“ o también podéis permitir al usuario que con un gesto de los dedos expanda o contraiga la imagen).- Opción de seleccionar una calle en un combo y que la imagen se autoredirija a la posición de esa calle.
Recursos de este artículo:
0 comentarios:
Post a Comment