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:

 

Get Microsoft Silverlight

xmlns:navigationAnimation="clr-namespace:Telerik.Windows.Controls.Animation;assembly=Telerik.Windows.Controls.Navigation"
 
<!-- TreeView -->
<telerik:RadTreeView>
    <telerik:AnimationManager.AnimationSelector>
        <telerik:AnimationSelector>
            <navigationAnimation:TreeViewExpandCollapseAnimation
                    AnimationName="Expand" Duration="0:0:1">
                <navigationAnimation:TreeViewExpandCollapseAnimation.EasingFunction>
                    <BounceEase Bounces="2" />
                </navigationAnimation:TreeViewExpandCollapseAnimation.EasingFunction>
            </navigationAnimation:TreeViewExpandCollapseAnimation>
            <navigationAnimation:TreeViewExpandCollapseAnimation
                    AnimationName="Collapse" Direction="Out" Duration="0:0:1">
                <navigationAnimation:TreeViewExpandCollapseAnimation.EasingFunction>
                    <BackEase EasingMode="EaseIn" />
                </navigationAnimation:TreeViewExpandCollapseAnimation.EasingFunction>
            </navigationAnimation:TreeViewExpandCollapseAnimation>
        </telerik:AnimationSelector>
    </telerik:AnimationManager.AnimationSelector>
    <!-- TreeViewItems here -->
</telerik:RadTreeView>
 
<!-- PanelBar -->
<telerik:RadPanelBar>
    <telerik:AnimationManager.AnimationSelector>
        <telerik:AnimationSelector>
            <navigationAnimation:PanelBarExpandCollapseAnimation
                    AnimationName="Expand" Duration="0:0:1">
                <navigationAnimation:PanelBarExpandCollapseAnimation.EasingFunction>
                    <BounceEase Bounces="2" />
                </navigationAnimation:PanelBarExpandCollapseAnimation.EasingFunction>
            </navigationAnimation:PanelBarExpandCollapseAnimation>
            <navigationAnimation:PanelBarExpandCollapseAnimation
                    AnimationName="Collapse" Direction="Out" Duration="0:0:1">
                <navigationAnimation:PanelBarExpandCollapseAnimation.EasingFunction>
                    <BackEase EasingMode="EaseIn" />
                </navigationAnimation:PanelBarExpandCollapseAnimation.EasingFunction>
            </navigationAnimation:PanelBarExpandCollapseAnimation>
        </telerik:AnimationSelector>
    </telerik:AnimationManager.AnimationSelector>
    <!-- PanelBarItems here -->
</telerik:RadPanelBar>

 

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.


About the Author

Kiril Stanoev

Hi, I'm Kiril and I'm the Product Manager of Telerik UI for Android, Windows Universal and Windows Phone. Feel free to ping me on +KirilStanoev or @KirilStanoev

Related Posts

Comments

Comments are disabled in preview mode.