Using Silverlight's easing functions when expanding/collapsing items in TreeView and PanelBar

With the upcoming Q1 2011 Beta release, we’ve decided to sugarcoat RadTreeView and RadPanelBar even more. With the release of Silverlight 3, Microsoft introduced easing functions which are basically “custom mathematical formulas to your animations. For example, you may want an object to realistically bounce or behave as though it were on a spring.” Incorporating easing functions within RadTreeView or RadPanelBar can be done using Telerik’s AnimationManager:

In RadTreeView and RadPanelBar, the easing functions work on the height of the ItemsPresenter of each TreeViewItem or PanelBarItem. That is why you need to be careful when choosing the most appropriate easing, because some easings tend to return negative values and as you know, the Height property of an element cannot be a negative number. In the scenario above, one such inappropriate easing is the BackEase when it is in EaseOut mode. If you substitute <BackEase EasingMode="EaseIn" /> with <BackEase EasingMode="EaseOut" /> you’ll receive an error when you try to collapse an item. This is due to the fact that at a certain point the easing returns a negative number.

However, if you’re being careful, easings can greatly increase the look and feel of your application, making it even more appealing.

Using RadPanelBar/RadTreeView with easing animations will be available with our 2011 Q1 Beta release. Meanwhile,play around with the demo application and let us know what you think.