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...

Introduction to Fluid UI

Introduction to Fluid UI

The concept of “Fluid UI” represents the idea that visual elements in an interface should move and appear in a smooth manner, allowing the user to track and observe changes rather than be confused and startled. In practice, this can be difficult to implement when dealing with very discrete properties, such as Row and Column coordinates in a Grid. In an effort to help you make more “fluid” interfaces, the Expression Blend and Silverlight teams have made available a few features to make the work needed much simpler.

In this tutorial, we’ll take a look at the simplest implementation - FluidLayout.

An Invisible Intangible Rectangle

Our first stop is to examine how FluidLayout works with the VisualStateManager and the Visibility property.

  1. Create a new “Silverlight Application + Website” project named “FluidLayout”.
  2. Draw a Rectangle and change the Fill property to a bright blue color.
  3. In the States panel, click the Add state group button (Add state group button) to add a new state group.
  4. Click the Add state button (Add state button) to add a new state.
  5. Change the state’s name to “NowYouSeeMe”.
  6. Add another state and change the name to “NowYouDont”.
  7. Select the Rectangle and change the Visibility property to “Collapsed”.
  8. Toggle between the two states to see the rectangle disappear and reappear.

At this point we’ve created two visual states for the MainPage usercontrol, one where the Rectangle is visible and one where the Rectangle is invisible.

You may be asking how does the Visibility property compare to the Opacity property and when would you use one over the other. Both properties can make a control disappear, but when the Visibility property is set to “Collapsed”, the control no longer participates with input events, tab sequencing, hit testing or layout.

Additionally the Opacity property covers a range of values where Visibility is either Visible or Collapsed. Which brings us back to our blue Rectangle, we want the Rectangle to disappear so it no longer captures hit testing but we don’t want it to just vanish. This is where FluidLayout comes in.

  1. In the States panel, change the Default transition from 0 seconds (“0 s”) to 1 second.
  2. In the upper right of the States panel, click the Turn on transition preview button (Turn on transition preview button).
  3. Click the Turn on FluidLayout button (Turn on FluidLayout button).
  4. Now toggle between the states and watch the Rectangle shrink and disappear.

FluidLayout is a custom VisualStateManager aware of the Visibility property and will interpolate the Scale and Opacity for the transition duration and then set the element to “Collapsed” once the animation is over.

Shrinking Stack of Boxes

Let’s take see how FluidLayout and the Visibility affect layout in action.

  1. Select the Base state. When making changes to the default layout and adding new controls, always make sure to be in the Base state.
  2. Right-click the rectangle and select the Group Into -> StackPanel option.
  3. Enlarge the StackPanel to twice the height of the rectangle.
  4. Add a new Rectangle to the StackPanel and change the Fill to orange.
  5. Now toggle between the states and you will see the orange Rectangle move as the first rectangle disappears.

Animating across the Grid

Grid.Row and Grid.Column properties are whole numbers or integers, and it’s not easy to animate between 1 and 2 without using decimals. Thankfully this is another situation where FluidLayout can help.

  1. Select the Base state.
  2. Right-click the StackPanel and select the Change Layout Type -> Grid option.
  3. Stretch the Grid out across the LayoutRoot Grid.
  4. Add a Column and a Row to the Grid.
  5. Select the NowYouDont state.
  6. Select the orange Rectangle and change its Row and Column property to “1”.
  7. Toggle between the two states and you will see the orange Rectangle animate to its new coordinates.

Now that you’ve seen how FluidLayout can be useful when animating discrete properties using the VisualStateManager, let’s take a look at this type of functionality encapsulated in the FluidMoveBehavior.