The Expander – Part 2

 

 

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

TemplateVideoImage

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

EditACopy

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.

ExpandAnimation

 

 

For the collapse visual state you’ll animate the opacity from 100 to 0 over one second and then set the visibility to collapsed.

AnimatingCollapsedState

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…

ModifyVisibility

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


This work is licensed under a Creative Commons Attribution By license.
Share

About Jesse Liberty

Jesse Liberty is an independent consultant and programmer with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP, Microsoft MVP and Telerik MVP.
This entry was posted in z Silverlight Archives. Bookmark the permalink.

Leave a Reply

Your email address will not be published.