Definir distintos estados visuales para un control

Artículo
10/11/2017

Para crear interactividad en su aplicación, puede definir una apariencia visual diferente para cada estado visual que puedan tener sus controles UserControl, Window o Page o la plantilla de control y, a continuación, agregar controles de comportamiento o código para cambiar entre estos estados en función de la interacción del usuario. Puede modificar la transición entre dos combinaciones de estado, e incluso crear animaciones que se ejecuten al entrar por primera vez en un estado.

Grupos de estados

Un grupo de estados contiene todos los estados visuales que forman parte de la misma categoría lógica y no se pueden mostrar al mismo tiempo. Solo se puede mostrar un estado de este grupo de estados por vez, pero un estado de un grupo sí se puede mostrar al mismo tiempo que un estado de otro grupo de estados.

Por ejemplo, si trabaja con un control UserControl que represente una carta de una baraja, es posible que desee tener un grupo de estados denominado SideDisplayed que incluya estados para mostrar la carta cara arriba (FaceUp) y cara abajo (FaceDown). Es posible que también tenga un grupo de estados denominado MouseInteraction que incluya estados que modifiquen la apariencia de la carta cuando el puntero se encuentre sobre la carta (MouseOver) y cuando se haga clic en la carta (Click). Una carta puede estar cara arriba y puede hacer que el puntero pase sobre ella al mismo tiempo, de modo que ambos estados se encuentran en grupos de estados distintos. Sin embargo, la carta no puede estar cara arriba y cara abajo al mismo tiempo, por tanto ambos estados pueden estar en el mismo grupo.

Grupos de estados y estados de una carta de una baraja

Ee371169.4fecf399-1962-4668-86e7-efe1a485cbc1(ES-ES,Expression.30).png

Para obtener más información, vea Definir estados visuales y tiempos de transición diferentes en un control de usuario.

Estados

Al seleccionar un estado, se activa la grabación del estado y se grabarán todos los cambios que se realicen para dicho estado. Para desactivar la grabación del estado, haga clic en el botón de grabación Ee371169.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(ES-ES,Expression.30).png o seleccione Base en el panel Estados. Si desea modificar la apariencia de un estado de un grupo de estados y al mismo tiempo ver el control del estado de otro grupo de estados, puede anclar una vista previa del segundo estado mientras está en el modo de grabación para el primer estado.

Para obtener más información, vea Definir estados visuales y tiempos de transición diferentes en un control de usuario.

Para cambiar entre estados, puede usar el control de comportamiento GoToStateAction o puede escribir código en un controlador de eventos.

Para obtener más información, vea Cambiar estados en respuesta a una interacción del usuario.

Transiciones

Puede ampliar el tiempo que se tarda en pasar de un estado a otro cuando se produce un cambio de estado. Puede establecer la duración de la transición para un grupo de estados completo o bien para las transiciones que se producen entre combinaciones de estados específicas.

Establecer la duración de la transición para todos los estados de un grupo de estados

Ee371169.d1eabf30-62d2-47ae-a52b-453c702b9358(ES-ES,Expression.30).png

Establecer la duración de la transición solo para transiciones del estado Click a todos los demás estados

Ee371169.1ed8d611-1ce5-4101-ad73-54aa166c4e9a(ES-ES,Expression.30).png

Para obtener más información, vea Modificar el tiempo de transición entre cambios de estado y Definir estados visuales y tiempos de transición diferentes en un control de usuario.

Si desea crear una transición suave entre estados que modifican propiedades de diseño que son valores discretos (como números de columna o fila) o que se establecen automáticamente (como alto y ancho), puede usar el diseño fluido.

Para obtener más información, vea Pasar fácilmente por los cambios de diseño.