An Invisible Intangible Rectangle
Our first stop is to examine how FluidLayout works with the VisualStateManager and the Visibility property.
- Create a new “Silverlight Application + Website” project named “FluidLayout”.
- Draw a Rectangle and change the Fill property to a bright blue color.
- In the States panel, click the Add state group button () to add a new state group.
- Click the Add state button () to add a new state.
- Change the state’s name to “NowYouSeeMe”.
- Add another state and change the name to “NowYouDont”.
- Select the Rectangle and change the Visibility property to “Collapsed”.
- 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.
- In the States panel, change the Default transition from 0 seconds (“0 s”) to 1 second.
- In the upper right of the States panel, click the Turn on transition preview button ().
- Click the Turn on FluidLayout button ().
- 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.
- Select the Base state. When making changes to the default layout and adding new controls, always make sure to be in the Base state.
- Right-click the rectangle and select the Group Into -> StackPanel option.
- Enlarge the StackPanel to twice the height of the rectangle.
- Add a new Rectangle to the StackPanel and change the Fill to orange.
- 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.
- Select the Base state.
- Right-click the StackPanel and select the Change Layout Type -> Grid option.
- Stretch the Grid out across the LayoutRoot Grid.
- Add a Column and a Row to the Grid.
- Select the NowYouDont state.
- Select the orange Rectangle and change its Row and Column property to “1”.
- Toggle between the two states and you will see the orange Rectangle animate to its new coordinates.