Lo que veremos aquí aplica a Windows Phone y Windows 8.1, en Windows 8 por alguna razón que desconozco no se encontraba disponible el Sample Data con Blend.
Con Blend tenemos una gran herramienta para hacer prototipos funcionales y ver como quedarán nuestras apps, aun sin tener el código que se ejecutará finalmente, vamos a recordar nuestro diseño
Bien vamos a intentar diseñar en este post la primera de las columnas. Como ven en la estructura de mi proyecto que presento a continuación simplemente tengo un panorama y tres panorama items.
Ahora vamos a crear los datos de ejemplo que nos permitirán crear nuestro diseño. Como ven en las opciones hay varias formas de crear datos de ejempo. Yo tipicamente lo creo a partir de una clase y selecciono la clase principal MainViewModel, sin embargo esto tiene sus implicaciones, como que los datos no sirven para hacer prototipos funcionales por que no se ven en tiempo de ejecución y que cada que agregamos propiedades serviría refrescar el DataSource y enlazarlo de nuevo.
Bueno, para evitarnos esas complicacipnes y lograr lo de tener prototipos funcionales en este ejercicio usaré la opción New Sample Data, que crea basicamente un archivo XAML con datos de ejemplo que se cargan en tiempo de diseño si así lo queremos.
Después de seleccionar la opción New Sample Data, Blend nos pide colocar un nombre. Ya que vamos a crear un Sample Data que tiene la estructura del Main View Model sugiero en nombre que ven en la siguiente imagen.
Después de creado el Sample Data podemos empezar a agregar propiedades, como ven las hay de tres tipos, datos simples, propiedad compleja (para simular una clase) o propiedad colección (para simular una lista)
Los que debemos hacer por tanto es simular la mis estructura que tiene el MainViewModel, esto con el fin de que cuando lo asignemos como contexto de nuestra vista encaje como un guante. Sin embargo en el Sample Data solo pondremos los datos que sean necesarios para generar efectos gráficos, en nuestro ejemplo simplemente para visualizar data.
Miren como la estructura del Data Source coincide exactamente con los nombres de las propiedades de la clase MainViewModel
Para verificar los tipos de datos es bueno que se pasen por el API y así puedan ver que tipos de datos obtendrán y cuales quieren dibujar en su diseño, por ejemplo miren el género, no se confien de los nombres en el API en esta como en otras APIs puede pasar que les toque hacer recomendaciones.
Las propiedades de los Sample Data en Blend pueden establecerse de varios tipos: String, Boolean, Numeric e Image. El string tiene algo particular y es que tiene un formato que nos ofrece varias alternativas para la generación de los datos de ejemplo, como generar nombres, telefonos, direcciones, esto con el ánimo de que los prototipos funcionales queden realistas.
La propiedad imagen nos permite tomar una carpeta donde tengamos imagenes y usarlas como datos de ejemplo, con el mismo objetivo de lo anterior, crear prototipos funcionales realistas.
No olviden que cuando quieren que los datos esten disponibles o no en tiempo de ejecución, pueden activar o desactivar.
Muy bien, después de configurar nuestro Sample Data, arrastramos la colección que configuramos hasta el primer panorama y la soltamos allí. Veremos como automáticamente se crea un ListBox con los datos de ejemplo, que inicialmente no vemos por que tienen la letra blanca.
En este punto debemos editar la plantilla para poder cambiar el color de la letra y ademas acomodar los datos como los queremos ver. No olviden borrar la plantilla que queda en el archivo local XAML por el efecto de haber arrastrado la colección. Dando clic derecho sobre el ListBox editamos la plantilla a través de las siguientes opciones.
Le ponemos un nombre a la plantilla que vamos a crear y observen bien la guardamos en un diccionario de recursos.
Editamos la plantilla colocando los datos que queremos en la posición correspondiente, usando los contenedores de XAML que necesitemos. Observen la jerarquía de esta plantilla.
Al salir de la edición de la plantilla veremos una bonita lista.
Usar un botón en los items de nuestras listas, nos permitirá usar facilmente su propiedad Command para hacer alguna función cuando el usuario haga tap sobre el item. El problema es que tenemos que tener en cuenta lo siguiente:
Como ven la lista provoca que el color de acento del teléfono se vea al presionar el botón y obviamente si como en nuestro caso no estamos trabajando en los estilos por defecto, eso no va a gustarnos mucho. Pues bien, para solucionarlo debemos editar de nuevo la plantilla y esta vez editar el estilo del botón.
No se olviden de asignarle un nombre acorde
Allí tendremos la posibilidad de editar lo que sucede en los Visual States del botón, y de observar el efecto que vimos en el video
Pues bien, seleccionamos el ButtonBackground y ponemos el color que deseamos y el efecto es este:
Genial, simple y fácil. Incluso sin haber hecho nada de los post anteriores este post puede resultar útil a diseñadores. Espero les haya gustado y bueno luego voy a sorprenderlos con el avance del diseño.
Actualización 17 de Febrero
Quería compartirles como se ve el panorama después de un tiempo y lo bonito de trabajar con Blend, y ver nuestros diseños sin dejarlos a la imaginación, más bien observandolos en tiempo de diseño.
No hay comentarios:
Publicar un comentario