One of the most powerful ideas in Silverlight UI development is the idea that interfaces and controls within them present altered UI depending on what combination of states are currently active.

A simple example. I might have this UI for navigating my way through a set of photos.

It’s just a simple Grid with an Image and a couple of Buttons in it and a semi-transparent Rectangle placed over the top which is meant to be used to indicate that the control is disabled.

State Groups

Blend puts states into groups. A control can be in one (and only one) state from each of its state groups so a group contains mutually exclusive states.

A good example would be the states Enabled/Disabled as a control can’t really be both. I can set this up in Blend by making use of the States panel which is dauntingly empty when you first approach it;

apart from that one button over to the right which can create a new state group for you as in;

and another little button over to the right lets me create my 2 states within the group and I can just click to name the things;

and then the little red dot is very significant as it highlights that property changes that I now make are not regular property changes but are, instead, the properties that apply only in that particular state.

In my Enabled state for instance, I’d like the disabled rectangle to go away so I change its Visibility;

and as I now move between the 2 states on the artboard I can see the difference between them;

Not only can I set up states, I can also define the transition between the states and I can do that generally across all the states in the group or specifically for a transition from State A to State B.

Above is the default transition and on the right is where I can set up an effect to be applied as we move between states, the easing function to apply to that effect and how long that effect is to last.

On the top right ( with the arrow ) is the button that toggles whether Blend shows these transitions as you move between states in the designer itself. By default it is off.

I chose a Blinds effect and gave it a long time period so that I could try and get a screen capture of it and I can see the transition happening here;

That’s ok if I want one transition to be used from any state to any other state but I might want to use different transitions depending on which states are involved and there’s UI for that;

which lets me define different transitions for the general case of entering or leaving this state and also for a specific transition from Disabled->Enabled.

I’m not sure I’d really want a Blinds effect when the control went from enabled to disabled but it perhaps illustrates the point.

I could see some other states being useful for whether I show my Next/Prev buttons in that I might only want to show them when the mouse is over the picture and I might only show them based on whether there are any Next/Previous images to actually move to. Hence 4 states perhaps;

and my I want the buttons to show up ( or not ) depending on those states so I just set their visibility and I also set up a 0.5 second transition to fade from one state to another.

There are Actions for moving to a particular state so I could use the usual trick of Triggers and those Actions to drive these state changes although I’d need some data to be able to drive all the states but as an example it’s easy enough do drive the 2 that represent “mouse over” and “mouse not over”;

and if I do a similar thing for the MouseLeave event then that all wires up quite nicely and does the right thing in terms of presenting the controls only when the mouse is over the UI.