Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Control templates give you the ability to completely revamp the appearance of a control. With the templating system, it is common to have designers creating new control skins for application UI. Most controls have multiple states. For instance, a button has an enabled and disabled state. The disabled state has a different appearance than the default state, to give the user a clue that they can't interact with the control. Real controls might have dozens of states. The button control might also have a focused and unfocused state. A control skin or a template needs a way to configure the control states.
I am going to show you an example of a control state. I am inside Visual Studio, and I am going to go to the Tools > Option menu and look at the Projects and Solutions node. Look at the buttons on the right side of the screen. I am going to press the Tab key to move the focus into the buttons. That is an example of a focused state. You can see that there is blue border and a dotted outline. When I leave the controller, pressing Tab, it goes to the unfocused state, and then the next button gets the focused look. Silverlight has templates.
These provide the replacement UI for controls. To enable you to manage what a control looks like in each state, Silverlight provides the Visual State Manager. The Visual State Manager is an element that manages the control state and the transitions between states. There are a number of parts in the Visual State Manager which we will see in the next demonstration. My favorite tool for working with the Visual State Manager is Expression Blend. I am inside Expression Blend, inside a project called ExploringVSM. I will start by looking at the states for the button control. To do that, I am going to edit the control template and choose this button and then select Edit a Copy of the control template.
Next I am going to click on the States tab. This shows the states that Microsoft created for the button control. Here you can see there is a Normal state, MouseOver, Pressed, and Disabled, and down here are Focused and Unfocused states. Now, I am going to change the Focused state. To do that, I am going to click on the Focused state, and then I am going to zoom in on the button with my mouse wheel. Next, I am going to select this FocusedVisualElement item. I am going to make it a little bit smaller and change the StrokeThickness, like that.
So, when the user moves their focus into this button, this is the UI that they are going to see. Press F5 to run the application. Select the button, tab out of the button, and you see that this is the default look. There is a blue border, but it matches the edge border of the button, whereas my custom focused state has a smaller rectangle. For the next demonstration, I am going to work with this control, ChangeTrafficLight. This is supposed to simulate a traffic light with a red, yellow, and green light. I am going to add my own state manager to this.
I do that by going to States, clicking on the Add state group, and then within the State group, I am going to create the three light states by clicking here, Add a state. This is going to be called GreenLight, RedLight, and YellowLight. So when I am in the GreenLight state, the green light should be enabled, and the yellow and the red should be black. I'll tell you how I am going to fix that.
Choose GreenLight, I click on this ellipse, and then I am going to set these two center gradient stops to black. I will do the same thing for the YellowEllipse. Now, I will go to the red state. Here, I should have the red light enabled and the yellow and the green disabled. And the finally, we will go to the YellowLight state and do the same thing. Now, I can switch back and forth between the states by clicking here on the State item.
Next, I'd like to show you how to do a transition between states. I can animate between the different states. Here is the default transition time, currently set to 0 seconds. I will set that to 2 seconds. Now, you will not see the preview unless you click on this button up here and say Turn on transition preview. Now, when I go from the GreenLight to the RedLight, you will see that it takes two seconds to get to that state. Now I'll click on the yellow light and so on. In my example, I really want to have one transition state go from green to yellow, another transition state go from yellow to red, and then from red back to green again.
So you can control the different transitions by going to this Add transition section. So I want to go from green to yellow, so I will click here, and say green to yellow has this transition. Then from the YellowLight to the RedLight, I will add a transition, YellowLight to RedLight, and then finally from RedLight back to GreenLight. Let's go look at the green to YellowLight transition. Currently, it's set to 2 seconds. I can change that to my own timeframe, let's say 1 second. And the other things I can do on this particular transaction is change the Easing value or add an effect.
The Easing value of course is the same as in the Innovation chapter. I go in here and I pick my new transition speed. Now, when it goes from green to yellow, it will use this curve to manage that. I can also choose any of the built- in effects that are part of Blend, for instance the Pixelate effect. Now, let's watch what happens when I go from the states. Here we are in YellowLight, here in GreenLight, and I go from GreenLight to YellowLight. There is the pixel transition. It took one second, and it also had a speed curve.
What you've seen is that you can have fine control over the states and their transitions, plus Expression Blend gives you a nice designer for creating the state.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 97212 Viewers
61 Video lessons · 84503 Viewers
71 Video lessons · 68706 Viewers
56 Video lessons · 101188 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.