I recently examined the Expander control and in that entry I promised to return and show how templating can add value to the user experience of this Silverlight Toolkit control.
You will remember that when we left the expander, it was able to display its contents with a bit of color, but opening it was a bit abrupt:
— Start of streaming example —
— End of streaming example —
We will modify the example by templating the control so that the contents fade in and out gently,
— Start of streaming example —
— End of streaming example —
Templating the Toolkit control
All controls, whether created by Microsoft as core controls, or as Toolkit controls, or by third party vendors, or by developers, are “lookless.” that is, the developer of the control provides a default appearance, but you are always free to modify that appearance, as shown in this video
Blend makes templating a control straightforward, but you need to make a decision. Do you want to create a templated version from scratch, or from a copy of the existing control?
In may of our demos on templating we choose to create the template from scratch to demonstrate creating a whole new appearance. In this case, however, we don’t want to change the appearance of the control, nor its logic; we just want to modify, slightly, what it does as it transitions between its collapsed and expanded visual states.
Editing The Template
Thus, the process is to open Blend, right click on the Expander control in the Objects and Timeline window and create a template, starting with a copy of the existing control
Within the template editor, you’ll modify only the Expand and Collapse states. For Expand, you’ll add animation that sets the visibility to visible at time zero, and changes the opacity from 0 to 100 over 1 second.
For the collapse visual state you’ll animate the opacity from 100 to 0 over one second and then set the visibility to collapsed.
Almost, but not quite
This almost works, but if you do only this, when you start the application you’ll see the content (which should be hidden) is visible and rapidly fading. Unfortunately, as the page is loaded, the control moves to the collapsed state, and you don’t (and can’t!) set the control to invisible (collapsed) until after it fades out.
One solution to this is to entirely remove the visibility settings at time 0 and 1 second and leave only the collapsed visibility at time 1.5 seconds. You can do this in Blend by turning down the expand site and deleting the white ovals at the appropriate time line entries…
Alternatively, you can open the Xaml file (preferably in Visual Studio) and pluck out the lines that set the visibility in the collapsed state.
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="00:00:01">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
That done, you can set the initial visibility to collapsed, and the application will work as intended
Previous Expander Control Part I