This is part one of a three part series in which I am going to revisit a topic that we covered earlier on regarding creating cool controls with Expression Blend. I discussed the concept of control templates in the “Cool Buttons” topic. Control templates in Silverlight and WPF support customizing both the “look” of a control, as well as the “feel” of a control. By “feel” I mean changing its interactive responsiveness. For example: how the control reacts when pushed, when it gets focus, loses focus, in a pressed state, or is in a disabled state, or has something inside it selected, etc. There are instances that require some sort of animations to execute when a user interacts with a control like this.
Enters the Visual State Manager (VSM), which lets you connect animations to state changes! VSM model makes it much easier to build interactive control templates, and it introduces two basic concepts that you can take advantage of within control template: Visual States and State Transitions. A control, for example, a button, usually has multiple visual states for itself – “Normal”, “MouseOver”, “Pressed”, “Disabled”, “Focused”, “Unfocused”. Simply put, a visual state is a description of how a control like in a particular state. Visual states can be static or animated. Transitions on the other hand are used to define how visuals dynamically change as the control moves from one state into another. So instead just talking about it, which boring really, let’s jump into action and see this in action:)!
- Using Expression Blend create a new project (Silverlight or WPF)
- Add a button to the designer surface
- Enter template editing mode (right click on the button –>Edit Temple–>Edit Copy):
In the Create Style Resource dialog give your style a name, e.g. ButtonStyle1, and click Ok to enter Blend control template editing mode:
Looking at the States panel while in template editing mode, you can see that you can easily edit what the button looks like in each particular state, as well as setup transition rules to control how long it should take to animate when moving from one state to another without manually writing and piece of code! This means you don’t have to create animation storyboards to make this work, how cool is that! Not only does this work with controls explicitly developed to support skinning using templates but also works for custom UserControls.
As you look as the States panel you also notice that the first thing it says is “Base”. A Base state of a control is the “neutral” or “natural” look of the control before you define how the control reacts to changes in its state. In Expression Blend, states are grouped into state groups like the CommonStates and the FocusStates that you see in the States panel. Let’s get back to Blend and create our own custom states.
4. Delete the button you created above and add a new button.
5. Again enter Blend template control editing mode but this time create an empty template of a button:
6. Name the new control template then add another grid to the root Grid container (under Object and Timeline panel) and name it “Natural”.
7. Add 3 rectangle elements to the grid (“Natural”) you just created above, and name the 3 rectangles: shadow, reflective, and transparent. Apply a solid color (black) Fill and Stroke to the rectangle named shadow. Next, apply a linear gradient brush of your choice to the Fill and Stroke properties of the rectangle named “reflective”. Now, on to the last rectangle (“transparent”), apply a linear gradient brush (Fill), remove the Stroke and make the rectangle transparent by adjusting the Alpha to 0% (use the color Editor). You should have something like this:
8. Arrange the 3 rectangle in the following order: shadow, reflective, transparent, to form a single rectangle.
9. Add a ContentPresenter control to the “Natural” grid and use the Layout pane to center the control on the button above. You should have something like the following:
10. Copy the “Natural” grid and paste it a couple of times to create two more buttons.
11. Name the two buttons: myMouseOver and myMouseDown (hey, name them whatever makes sense!) The idea is that each of these buttons will represent a state. “Natural” being the default look and the other two are self-explanatory:). Change the colors of the two buttons to something “cool”, mine looks like this:
12. Next arrange the three buttons to look like one, with the default(“Natural”) look in the front:
Next time…
In part two we will walk through how to create States in Expression Blend using the States pane:
We will discuss the State group container, States transitions and how to customize the default transition, talk about Behaviors. Easing Functions will also be visited and how Blend makes it very easy to work with these functions. That’s it for now folks!