Aprendiendo sobre Visual State Manager (VSM) en Xamarin Forms

Leomaris Reyes
Nov 17 · 3 min read

Cuando desarrollamos una aplicación podemos enfrentarnos con requerimientos que ameritan algunos cambios visuales dependiendo del estado de un control específico. Por ejemplo, es posible que necesitemos aumentar la altura de un Entry mientras el usuario escribe pero también es posible que necesitemos modificar el color de texto del mismo control, lo más importante de todo esto es que dichos cambios deben de aplicarse cuando el control tenga el foco (“Esté Focused”). 🤓

Es por eso que en esta publicación aprenderemos sobre Visual State Manager. Cubriremos este tema en los siguientes puntos:

🔹 Aprendiendo los conceptos principales

🔹 Comprendiendo la estructura VSM

🔹 Creando un ejemplo paso a paso

🔹 Creando nuestro propio VSM


Aprendiendo los conceptos principales 🤓

✔ ¿Qué es exactamente el Visual State Manager?

Visual State Manager (VSM) se introdujo en Xamarin Forms 3.0. Nos permite realizar cambios visuales en nuestros controles según el estado.

✔ VSM y disparadores: Diferencias
Los Triggers también puede realizar cambios visuales en nuestros controles de IU basados ​​en cambios de propiedad o en eventos. Sin embargo, si deseas realizar varias combinaciones de cambios basadas en estados es mejor utilizar Visual State Manager porque es menos confuso debido a su estructura.


¡Empecemos! 😍

Comprendiendo la estructura VSM

Para comprender mejor la estructura requerida para Visual State Manager, la estaremos aplicando a través de ejercicios que crearemos paso a paso.

¡Aqui vamos!
1⃣. Declara un control en el que se adjuntará las etiquetas del VSM.

2⃣. Dentro de las etiquetas anteriores agrega las siguientes:

3⃣. Agrega las etiquetas de VisualStateGroup. Puedes usar x: Name o Name para hacer referencia al grupo CommonStates. Es importante saber que Visual State Manager define un grupo visual llamado “CommonStates” que contiene tres estados visuales: Normal, (Disabled) Deshabilitado y (Focused) Enfocado.

⚠ Este grupo de estado visual es compatible con todas las clases que se derivan de VisualElement que es la clase base para View(Vista) y Page (Página).

4⃣. Y ahora agrega el estado visual que desees! Como vimos anteriormente, tenemos tres estados visuales del grupo visual CommonStates. En este caso estaremos trabajando con el estado Focused.

5⃣. Dentro del paso 4, agrega las etiquetas <VisualState.Setters> y finalmente configura las propiedades que obtendrá el control cuando obtenga el estado deseado.

Aquí puedes ver un ejemplo completo:


Creando nuestro propio VSM

Pero … ¿Qué sucede si deseamos crear un estado que no existe en el grupo visual CommonStates? 🤔 Fácil … ¡Crea tu propio VSM!🤷‍♀

Como vimos en la estructura de la imagen explicada anteriormente, debes seguir los mismos pasos. Simplemente no agreges el nombre (x:Name) en la etiqueta <VisualStateGroup> (Paso número tres).

Define los estados visuales que deseas aplicar al control. En este caso voy a crear dos estados “Incorrect” y “Correct”.

Importante: Para cambiar el estado necesitas agregar la siguiente línea:

VisualStateManager.GoToState (

Nombre de control que tendrá el nuevo estado,

Nombre del nuevo estado

);

Para aplicar esta línea creemos un evento en el cual agregaremos nuestros nuevos estados!

¡Y hecho! ¡Nuestro Visual State Manager personalizado está listo! 😎


Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade