We continue our exploration of Accordion. This time we’ll take a look at some of the template parts, namely ExpandableContentControl. See part 1 and part 2 if you didn’t yet.

ExpandableContentControl

This control is part of AccordionItem and is used to display the content of an accordionItem. It sits in the Primitives namespace, which means it will be used primarily as a part of a template. It solves an important problem: being able to resize (expand/contract) a piece of content, without triggering resize actions on the content itself. With that I mean: if your AccordionItem would use a Grid or a DockPanel as it’s content and I would just be animating the width or the height, you would see the panel changing as it tries to keep up with the new sizes. Ofcourse, that would not be the case if you had set an explicit width or height to the panel, but AccordionItem does not force you to do so.So, during the resize of our AccordionItem, I don’t want the content to have to resize.

Furthermore, it would be nice to make it really easy for you to determine how the animation should look like. Do you want a gradual easein/out, a bump or something different altogether? I want to be able to design my animation in Blend, using the nifty keyspline features!

I accomplish the above goals by throwing in a ScrollViewer and defining a DependencyProperty: Percentage.

ScrollViewer allows Accordion to just determine the size the item will eventually be (after expand action) and set it only once. At that moment the content of the scrollviewer is going to resize itself accordingly. Then, as we animate the width or height of the scrollviewer, its content is none-the-wiser. Hence, no ugly resize actions going on.

Making the actual animation be easily defined inside of Blend, is done by the above-mentioned Percentage DP.
Accordion only determines the size the AccordionItem will eventually be, I call it the TargetSize. ExpandableContentControl will calculate and set its actual size using to the following simple function: actualsize = percentage * TargetSize.

Accordion also triggers a visualstate called either Expanded or Contracted on AccordionItem. Those animate the percentage property on ExpandableContentControl. See this Xaml in the template of AccordionItem:

This makes it possible to design your animation at the correct level (AccordionItem) and makes it a very design friendly experience, because Blend allows you to edit keysplines as follows:

(SL3 is adding a nice collection of other spline types that makes elastic AccordionItems even easier!)

I’ll discuss the remaining points of interest.

RevealMode

Since I expose one property (Percentage) for you to animate, the control needs to know whether that responds to the vertical or horizontal direction. Thus, AccordionItem will set the correct RevealMode, corresponding to its own ExpandDirection.

TargetSize

Already mentioned, setting the TargetSize will set the size of the ScrollViewer. It will also recalculate the percentage. Let’s say I have an item that has a height of 100. Now another item is collapsed, so the Accordion decides the remaining items should have a height of 160. The percentage that was once at 1 is recalculated to be 0.625.
This way we don’t have to restart the full animation, but we can just resize nicely.

I hope that helps understanding this vital piece of the template. In the future, I will either remove it (if the outlined problems can be solved more gracefully in another way) or expose the style of ExpandableContentControl in AccordionItem, so it can be more easily styled.