Ning Zhang's Blog

Introduction

This is the second post of the Customize Silverlight Toolkit Controls series. This post demonstrates how to customize Expander, and provides the most asked customizations from Silverlight Toolkit forum.

Expander Customization

To customize Expander, it is very important to understand its API and default template, and know how to use Blend to re-template a control. I’d highly recommend you read my previous post Expander Control in Silverlight Toolkit if you haven’t yet. The key to customize Expander:

• understand Expander interface, especially its control contract:
  • Expander expects one template part, a toggle button named "ExpanderButton", in its template. Its expand/collapse function depends on the existence of this template part, because Silverlight doesn’t support two way binding.
  • Expander exposes ExpansionStates visual state group (including Expanded and Collapsed two visual states) for users to customize its expand and collapse behavior.
  • Expander exposes ExpandDirectionStates visual state group (including ExpandDown, ExpandUp, ExpandLeft, ExpandRight) for users to customize the layout for each of the four expand direction.
  • Expander also exposes HeaderTemplate and ContentTemplate properties for users to customize its header and content part. You can find this kind of customization from Silverlight Control Toolkit Sample.

• understand Expander’s default template. The screen shot below shows how the default template handles the layout of the four expand directions and the behavior of expand/collapse by providing StoryBoard for the ExpansionStates and ExpandDirectionStates visual state groups:
  • The whole Header is a templated ToggleButton, so clicking anyway on the Header may expand/collapse the Content area.
  • It uses a 2×2 Grid to layout Header and Content area.
  • It lays out the Expander according to ExpandDirection by having state animation for ExpandDirectionStates:
    • It lays out Header and Content areas by animating their Grid.Row and Grid.Column properties.
    • It draws the header toggle button correctly by changing its template.
  • It expands/collapses content areas by animating its Visibility attribute in ExpanionStates state transitions.

Below screen shot shows the most asked customizations. If you have Silverlight 2.0 installed and your reader supports live Silverlight application, you can play with it here too:

• PDC08 shows the Expander in current release on codeplex. There is a bug in ExpanderRightHeaderTemplate (used if you set ExpandDirection to Right) that causes high CPU and memory usage. This is fixed and the fix will be in our next release in a few weeks. I apologize for the inconvenience. Expander is my very first Silverlight control. I didn’t know anything about Silverlight or WPF before I joined Shawn’s team a few months back, and I still can’t believe how fragile xaml and animation are. It took me a long time to track down the one character fix: one (out of dozens) ObjectAnimationKeyFrames has Duration attribute accidentally set to "1" instead of "0". That drove Silverlight runtime nuts and hog cpu/memory.
• New (ExpanderStyle) shows the new template to be released soon.
• Fade In/Out (ExpanderFadeStyle) customizes the expand/collapse behavior by animating Opacity to fade the content in and out.
• Scale In/Out (ExpanderScaleStyle) customizes the expand/collapse behavior by animating ScaleTransform.ScaleX and ScaleTransform.ScaleY between 1 and 0 to expand and shrink the content.
• No Button (ExpanderNoButtonStyle) customizes the layout by removing the circle with arrow toggle button. You can still expand/collapse content with mouse or keyboard.
• Bottom/Right Button (ExpanderBottomRightButtonStyle) customizes the layout by putting the the circle with arrow toggle button to the bottom/right part of the header.

Source Code

You can find the zipped project file:

Conclusion

Expander has been the top keyword to my blog. It is a very useful control and relatively hard to customize. Hopefully this post will help you in using and customizing Expander. Thanks!