In my previous post we took a quick look at some of the support blend offers for skinning controls in Silverlight 2. Within only a few minutes we were able to take an existing textbox control and extend its visual tree using a custom template. In this post I plan to take our previous skinned control example further by implementing some simple animations. This is a good chance to check out the new VisualStateManager which greatly simplifies the development of animations in Silverlight.
For the basis of this tutorial we are going to extend our textbox template so that when a users places their mouse over the textbox the control will grow to make the text more readable. When the mouse leaves the textbox control the text will shrink again back to its normal “State”. It’s the word “State” here that really matters.
If you are observant and you haven’t moved all your panels around in blend, you may have noticed a new panel called states on the left hand side of your IDE. The states panel is a visual interface for managing the different states your control can be in. To help make this clearer, we can take a look at the control template for a button control (See previous post for how to do this in blend).
As you can see the standard Silverlight button control has a number of visual states that it can placed into. If we click on one of these states in the designer, our design surface will reflect what the look control will be in that state. As an example below, if we click on the disabled state we can see that the button looks greyed out.
What is important about the VisualStateManager is that it allows us to focus in a design centric way what each state looks like when the state is changed. In order to manage states more effectively you can see that Blend provides State Groups in which we can hold multiple visual states. We are not concerned with how we get to a particular state, we are just focused on the final look once we reach it. Some of the magic behind the VisualStateManager will be covered later.
So if we move back to our previous textbox example, we specified that we want the control to increase its size when a mouse rolls over the control and when the mouse leaves, the control should return to its original size. Given this, we know that our control can be in 1 of 2 states. Using blend, we are going to create a new state group and add two states to our control. Shown below.
As you can see, on the state group you have the oppurtinity to specify a default duration. This duration is a default that will be applied when a control transitions from one state to another. If you like you can ignore this but for the purpose of this example we have set or default.
If we click on our GROW state we can see our control displayed in the designer. We are going to make a simple change to our textbox properties by setting the fontsize on the textbox to 72. This is reflected in the designer as shown below.
If we click on our NORMAL state you will see the control looks how it did before the fontsize was changed. In terms of working in the designer we are now done, we have our begin state which is our BASE state and we have our transition state which is our GROW state and our final END state will be the NORMAL state. All we need to do now is invoke the state transitions when the appropriate events are fired. Before we do this we should take a quick look at the XAML Blend has created for us.
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="StateGroup">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition Duration="00:00:00.5000000"/>
vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="Grow">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="textBox" Storyboard.TargetProperty="(Control.FontSize)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="72"/>
DoubleAnimationUsingKeyFrames>
Storyboard>
vsm:VisualState>
<vsm:VisualState x:Name="Normal">
<Storyboard/>
vsm:VisualState>
vsm:VisualStateGroup>
vsm:VisualStateManager.VisualStateGroups>
You can see that the XAML pretty much represents what’s in the blend designer. We have a storyboard that has been placed within our Grow State that will apply our transition. The final part of the puzzle is to hook up event handlers to our textbox’s MouseOver and MouseLeave events. We do this in the standard way, by hooking up an event handler. I usually jump to visual studio for this work as we want to auto-create the event handler. See below.
MouseEnter="textBox_MouseEnter"
MouseLeave="textBox_MouseLeave"
private void textBox_MouseEnter(object sender, MouseEventArgs e)
{
VisualStateManager.GoToState(this, "Grow", true);
}
private void textBox_MouseLeave(object sender, MouseEventArgs e)
{
VisualStateManager.GoToState(this, "Normal", true);
}
In order to transition from one state to another the VisualStateManager class implements a static method that takes 3 arguments. The first argument is the control that we want to move form one state to another. In our case we use this as we are within our control If you want to call a state transition for a control your using it is just a matter of passing that control in instead. The second argument is the name of the state we want to move to and the final argument is a flag indicating if we want a transition effect.
After we have implemented our state transitions in code we are ready to go. I hope you can see how easy and powerful the VisualStateManger is and what it brings to Silverlight Apps.
You can see an example of this code running here and the full source can be downloaded here.