Wednesday, February 04, 2009

The Expander – Part 2

by jesseliberty via Jesse Liberty - Silverlight Geek on 2/4/2009 5:29:00 AM

More: Expander Control Part I

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 ---

--- 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