courses I tutorials

Explore different tutorials to get hands on with Silverlight and Expression Blend across a wide array of topics in a short time.

school.tutorials

Fluid UI Series

This series of tutorials introduces the concept of Fluid UI and its many forms available to you.

More tutorials...

A Simple use of the FluidMoveBehavior

A Simple use of the FluidMoveBehavior

In this tutorial we introduce the FluidMoveBehavior. Living up to its namesake, this Behavior encapsulates the logic of Fluid UI into a reusable component you and use simply by setting a few properties. Let’s begin by looking at a very simple use case for the Behavior – animating the arrangement of items within a container control.

Setup the WrapPanel and Rectangles

Sticking with the exciting Rectangle theme for this series, we’ll add a few Rectangles to a WrapPanel to get started.

  1. Create a new “Silverlight Application + Website” project and name it “SimpleFluidMove”.
  2. In the Assets panel, enter “Wrap” in the Search filter box.
  3. Select the WrapPanel control and add one to the LayoutRoot Grid with a size of 600x400.
  4. Select the UserControl and set the Width and Height property to “Auto” using the Set to Auto button (Set to Auto button).
  5. Notice that the adorners for the UserControl have changed to display the design-time sizing handles(design-time sizing handle). Adjust the design-time size to 680x480.
  6. Select the WrapPanel and set the Width property to "Auto".
  7. Double-click the Rectangle tool to add a Rectangle to the selected WrapPanel.
  8. Set the Rectangle’s Margin to 10,10,10,10.
  9. Hit Ctrl+C to copy the Rectangle. Select the WrapPanel and hit Ctrl+V nine times to end with a total of ten rectangles. Feel free to change the Fill property of a few of them to your favorite color(s).
  10. Run the project and resize the browser window to see the Rectangles snap into place when the WrapPanel changes size.

The first step was to create a UserControl using Auto sizing that would stretch with the Application window, which by default is set to 100% width and height in the HTML. The design-time height and width properties are useful inside Blend, so that even when you are working on a dynamically sized application you still have a design surface to work with.

The next step was to set the WrapPanel to stretch horizontally with the UserControl, again making use of the Auto value.

Fluidly Wrapping Rectangles

Now it’s time for the Behavior magic.

  1. In the Assets panel, enter “FluidMove” (or even just “flu”) in the Search filter box.
  2. Drag the FluidMoveBehavior on to the WrapPanel.
  3. Set the AppliesTo property to “Children”.
  4. Change the Duration property to half a second (00:00:00.5).
  5. Set EaseX to “Circle In” and EaseY to “Bounce In”. (Leave the Tag properties for now; we’ll cover those in the next tutorial.
  6. Run the project again and now when you resize the application you will see the Rectangles animate to their new position instead of snapping there.

The FluidMoveBehavior watches the children of the container control and once a new layout has been determined, the behavior intervenes. Understanding where the child control was and where it should now be, the behavior creates an animation to interpolate between the two positions.