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.
- Create a new “Silverlight Application + Website” project and name it “SimpleFluidMove”.
- In the Assets panel, enter “Wrap” in the Search filter box.
- Select the WrapPanel control and add one to the LayoutRoot Grid with a size of 600x400.
- Select the UserControl and set the Width and Height property to “Auto” using the Set to Auto button ().
- Notice that the adorners for the UserControl have changed to display the design-time sizing handles(). Adjust the design-time size to 680x480.
- Select the WrapPanel and set the Width property to "Auto".
- Double-click the Rectangle tool to add a Rectangle to the selected WrapPanel.
- Set the Rectangle’s Margin to 10,10,10,10.
- 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).
- 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.
- In the Assets panel, enter “FluidMove” (or even just “flu”) in the Search filter box.
- Drag the FluidMoveBehavior on to the WrapPanel.
- Set the AppliesTo property to “Children”.
- Change the Duration property to half a second (00:00:00.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.
- 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.