Utilizar Sample Data en Silverlight a través de Expression Blend

Cuando comenzamos un nuevo proyecto , este consta de una parte de diseño y otra de desarrollo. En la mayoría de los desarrollos, el diseñador cuando  incluye elementos en la interfaz de usuario, no suele saber como estos son visualizados por el usuario final. Dicho objetivo lo consigue cuando el diseño es implementado con la parte elaborada por el desarrollador. Para este inconveniente, Microsoft nos plantea una solución a través de Expression Blend 4. Es la posibilidad de enlazar los distintos objetos de la interfaz de usuario con datos de ejemplo(Sample Data), que aunque el contenido de estos datos poco tengan que ver con el real, si que el formato de los mismos es exactamente el que va tener la aplicación final.

Para entender esta nueva funcionalidad, vamos a empezar abriendo Expression Blend 4, bien creamos un nuevo proyecto de Silverlight o abrimos uno existente. En la parte superior derecha Expression Blend 4 nos ofrece tres pestañas (Propiedades,Recursos y Datos).

1

Seleccionamos la pestaña Datos, dentro de esta pestaña vamos a crear un nuevo Sample Data. Para ello presionamos en el icono que se muestra en la siguiente imagen:

2

Una vez presionado dicho icono elegimos la opción New Sample Data:

3

En la ventana emergente debemos otorgarle un nombre con el que sea fácilmente reconocible, en mi caso como mi aplicación va a basarse en los contactos de mi empresa, este será el nombre que le otorgaré como podemos ver a continuación:

4

Al realizar dicha acción por defecto dentro de nuestro Sample Data se ha generado una colección que consta a su vez de dos propiedades, veremos más adelante como podemos añadir, editar o eliminar estas colecciones y propiedades:

5

Seguidamente la colección la nombraremos como DPersonales, dentro de dicha colección vamos a introducir tres propiedades que llamaremos (Nombre, Apellidos y Dni). Por defecto se han creado dos propiedades, para añadir una nueva, debemos presionar sobre el icono más, junto a la colección DPersonales, como podemos observar en la siguiente imagen:

6

Por otro lado, cada una de las propiedades podemos otorgarle el forma que sea más adecuado a nuestras necesidades. Para ello desplegamos la propiedad Nombre y elegimos el formato que se muestra en la siguiente imagen:

7

Entrando más en materia como podemos observar no solo podemos elegir el tipo de datos que puede introducir el usuario, también podemos controlar el formato de los datos.

A continuación vamos añadir una nueva propiedad, en este caso la nombraremos como foto. El tipo de datos ha de ser Image, por otro lado debemos elegir la ubicación donde se encuentran los citados elementos como podemos ver a continuación:

8

Por último, ¿cómo mostramos los datos en la interfaz de usuario?. Simplemente seleccionamos la colección DPersonales y la arrastramos al área de diseño de Expression Blend 4:

9

Al realizar la anterior acción, nos crea un ListBox en el que aparecen los elementos de la colección en cada uno de los items del ListBox:

10

El ListBox por defecto podemos personalizarlo como nosotros deseemos a través de las plantillas. Para ello vamos añadir una propiedad , pero esta ha de ser compleja debido a que dentro de esta propiedad compleja añadiremos propiedades simples.

11

Nombramos la propiedad compleja como Edad y dentro añadimos dos propiedades simples llamadas Años y Fecha Nacimiento. El campo Años será de tipo Número y una longitud de 3 dígitos. El campo Fecha de Nacimiento será de tipo cadena pero de formato de fecha.

12 

Seguidamente vamos añadir al ListBox un nuevo campo (Años). Para ello seleccionamos el citado elemento, presionamos con el botón derecho sobre el y seleccionamos Edit Additional Templates->Edit Generated Items->Edit Current. De este modo vamos a poder editar la plantilla que representa la apariencia de cada uno de los items del ListBox.

13

Dentro de la plantilla vamos a introducir un nuevo objeto. Accedemos a la barra de herramientas seleccionamos el objetos Textblock y lo introducimos dentro de la plantilla. El siguiente paso es enlazar dicho objeto con los datos de ejemplos de la edad (Años) como podemos observar a continuación:

14

Cerramos la plantilla presionado sobre le icono 16 y ejecutamos la aplicación siendo el aspecto de la misma el siguiente:

17

Gracias a Sample Data podemos asimilar la presentación de los datos antes de implementar nuestro diseño con la parte de desarrollo de cualquier proyecto, consiguiendo con ello la eliminación de posibles errores y el cumplimiento de tiempos.

Deja un comentario

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