Share via

Transition between layout changes smoothly

  • Article

Layout properties are typically set to discrete values (such as row or column numbers) or set to automatic values (such as width and height). To create a smooth transition between changes to these kinds of properties, use Fluid Layout. For example, if an object appears in the lower-left cell of a Grid layout panel in one state, but appears in the lower-right cell of that layout panel in a different state, the transition between those two states will result in an instant change unless you turn on Fluid Layout for the state group and increase the transition duration.

Note

Fluid layout affects only layout properties.

To transition between layout changes smoothly

  1. In an open document, lay out your objects. For example, you might have a Grid object with three columns and three rows, with different objects in four of the cells.

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

  2. In the States panel, define different visual states and change layout properties of your objects in the states. For example, for each of your objects, define a state that will display the object in the lower-right corner, spanning two rows and columns.

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

    For information about creating states, see Define different visual states and transition times for a user control.

  3. In the States panel, set the Default Transition time for your state group to 1 second.

  4. Optionally, click EasingFunction Ee341455.9718b395-a71d-40b2-9d08-8e29a225151f(en-us,Expression.40).png to select an easing function to apply to the transition. Easing functions create a more realistic animation. For example, the Bounce easing function creates a bouncing effect.

  5. To enable the change between states, open the Assets panel, select the Behaviors category, and drag the GoToStateAction behavior onto the object in the lower-left corner.

  6. In the Properties panel, change the StateName property of the GoToStateAction to the name of the state that moves the lower-left object. For example, change the StateName property to Show1.

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

    For more information about behaviors, see Working with behaviors.

  7. Now that you have a working state transition, test your application by pressing F5 and clicking the object in the lower-left corner of the grid. It moves instantly to the lower-right corner, even though your transition time is 1 second.

  8. In the States panel, click Turn on FluidLayout Ee341455.04416d58-b1c8-4338-b8fc-9ed002ec88bc(en-us,Expression.40).png for your state group.

  9. Test your application again by pressing F5 and clicking the object in the lower-left corner of the grid. It moves smoothly to the lower-right corner over the course of 1 second.

See also

Tasks

Define different visual states and transition times for a user control

Concepts

Using the Grid layout panel

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.