[ES] Carrusel tipo wizard para guía rápida

Si alguna vez os habéis planteado tener que crear una guía rápida accesible para vuestra app con una serie de imágenes os habréis dado cuenta de que os iría perfecto un pequeño carrusel de imágenes que reaccionara al slide del usuario y se fueran pasando. Recientemente nos hizo falta para nuestra app y lo llevé a cabo. Ahora extraigo un sample para que quién lo necesite pueda reutilizar las directrices del mismo.

La estructura que ideamos es bastante sencilla, lo único que hacemos es poner las imágenes cómo fondo en un grid e ir rotándolas cuando se hace el slide. Le añadimos las transiciones para que sea más amigable y se parezca a un control pivot pero sin giro infinito. Después de nuestras imágenes situamos un stackpanel que se encargará de albergar la barra de progreso cómo si fuera un wizard repartiendo las posiciones y marcándonos nuestro avance en el tutorial.

Para indicar los datos iniciales de la barra wizard sólo hay que darle valor a estas tres propiedades:

Con ello podemos definir el número de posiciones de la barra, la posición en la que se encuentra ahora mismo y el color con el que queremos que se muestre.

Y sin más os dejo el proyecto en GitHub para quien quiera probarlo, trastear con él y, sobre todo, usarlo!

Comments are closed here.