Usando datos de ejemplo (Sample Data) en prototipos Sketchflow para Windows Phone (2/2)

Bueno siguiendo con el Sketch de Pillbox vamos a añadirle algunos datos de ejemplo, para ello vamos a buscar en la pestaña Data el botón que nos permite crearlos.

Seleccionamos nuevos datos de ejemplo

Se nos pedirá un nombre para los datos que se van a crear y la ubicación de los mismos, esto puede ser a nivel de la página en la que estamos trabajando o a nivel del proyecto para que esté disponible en otras páginas.

Después de aceptar la creación del origen de datos, veremos que en Data aparece un nuevo elemento con el nombre que hemos asignado y una estructura simulada.

Si lo deseamos podemos añadir al nivel de la colección más propiedades, por el momento nosotros usaremos las que se crean por defecto.

Para hacer esto damos clic sostenido en la colección y lo arrastramos sobre el pivot, verificando que se nos indique qué se creará un Listbox con los items de la colección, si ya tuviésemos un Listbox, los datos simplemente se enlazarían.

Al crearse la lista vemos que aparecen algunos items simulados y que en Data el recuadro aparece marcado con una linea amarilla, esto es por que tenemos seleccionado el Listbox y se nos está indicando que está enlazado con los datos de ejemplo.

 Para hacer más realista la presentación de los datos vamos a editar los datos ejemplo con el otro botón que hay al lado de la colección.

Al presionar este botón vemos que podemos editar la cantidad de datos simulados que aparecen e incluso los valores de estos datos.

Al aceptar los datos que se ven serán actualizados. Ahora bien, para editar la presentación de esos datos de ejemplo, damos clic derecho sobre el Listbox y buscamos la ruta para editar el Template de los items.

Si observamos con detenimiento lo que sucede, la jerarquía cambia y muestra el arbol visual que está contenido dentro de los items del Listbox, además de permitirnos manipularlo.

Yo por ejemplo quiero que el Checkbox aparezca primero y el nombre no debajo si no al lado. Si conocemos el contenedor Stackpanel sabemos que tiene la posibilidad de mostrar vertical u horizontalmente, así que lo cambiaré a horizontal y arrastraré el checkbox sobre el Textblock, lo que debe dejar el ejemplo así

Como vieron además subí el tamaño de la fuente y le puse margen derecha al Checkbox, todo esto se hace en la ventana de propiedades, que es bastante intuitiva.

Si ejecutamos el proyecto veremos como queda

Los invito a hacer este pequeño ejemplo para familiarizarse con el Sketchflow y con Expression Blend, verán que cuando estén construyendo su aplicación definitiva, ya sabrán como manipular la herramienta.

Hasta la próxima.

Sorey