Pasar fácilmente por los cambios de diseño

Las propiedades de diseño normalmente se establecen en valores discretos (como los números de filas o columnas) o en valores automáticos (como el ancho y el alto). Para crear una transición sencilla entre cambios para estos tipos de propiedades, use el diseño fluido. Por ejemplo, si un objeto aparece en la celda inferior izquierda de un panel de diseño Grid en un estado, y aparece en la celda inferior derecha de dicho panel en otro estado, la transición entre esos dos estados dará lugar a un cambio instantáneo a menos que active el diseño fluido para el grupo de estados e incremente la duración de la transición.

[!NOTA]

El diseño fluido solo afecta a las propiedades de diseño.

Para pasar fácilmente por los cambios de diseño

  1. Diseñe sus objetos en un documento abierto. Por ejemplo, es posible que tenga un objeto Grid con tres columnas y tres filas, con diferentes objetos en cuatro de las celdas.

    Ee341455.067dbe1c-2246-4c0e-b9f2-2eb9ad082e5e(es-es,Expression.40).png

  2. En el panel Estados, defina diferentes estados visuales y cambie las propiedades de diseño de sus objetos en los estados. Por ejemplo, para cada uno de los objetos, defina un estado que mostrará el objeto en la esquina inferior derecha, extendiendo dos filas y columnas.

    Ee341455.198ca721-de5e-4d7d-85ab-97fbb02dcbc8(es-es,Expression.40).png

    Para obtener información acerca de la creación de estados, vea Definir estados visuales y tiempos de transición diferentes en un control de usuario.

  3. En el panel Estados, establezca el tiempo de transición predeterminada para el grupo de estados en 1 segundo.

  4. Opcionalmente, haga clic en EasingFunction  Ee341455.9718b395-a71d-40b2-9d08-8e29a225151f(es-es,Expression.40).png para seleccionar la función de aceleración que se aplicará a la transición. Las funciones de aceleración crean una animación más realista. Por ejemplo, la función de aceleración Bounce crea un efecto de rebote.

  5. Para habilitar el cambio entre estados, abra el panel Activos, seleccione la categoría Controles de comportamiento y arrastre el comportamiento GoToStateAction al objeto de la esquina inferior izquierda.

  6. En el panel Propiedades, cambie la propiedad StateName del comportamiento GoToStateAction al nombre del estado que mueve el objeto de la esquina inferior izquierda. Por ejemplo, cambie la propiedad StateName a Show1 .

    Ee341455.8d71b559-361b-4885-ad87-9d5537215514(es-es,Expression.40).png

    Para obtener más información acerca de los controles de comportamiento, vea Trabajar con comportamientos.

  7. Ahora que tiene una transición de estado que funciona, pruebe la aplicación; para ello, presione F5 y haga clic en el objeto de la esquina inferior izquierda de la cuadrícula. Se moverá instantáneamente a la esquina inferior derecha, aunque el tiempo de transición sea 1 segundo.

  8. En el panel Estados, haga clic en Activar diseño fluidoEe341455.04416d58-b1c8-4338-b8fc-9ed002ec88bc(es-es,Expression.40).png para el grupo de estados.

  9. Vuelva a probar la aplicación. Para ello, presione F5 y haga clic en el objeto de la esquina inferior izquierda de la cuadrícula. Se moverá instantáneamente a la esquina inferior derecha en el transcurso de 1 segundo.

Vea también

Tareas

Definir estados visuales y tiempos de transición diferentes en un control de usuario

Conceptos

Usar el panel de diseño Grid

Copyright © 2011 de Microsoft Corporation. Reservados todos los derechos.