I bet that everyone using a Windows Phone have noticed the slick animations that are applied to a single item when it is removed or added to the viewport in the native mail client. That happens when you sync and the recent mail is added on top of the other items.
Inspired by this, we decided to extend our RadDataBoundListBox and provide out-of-the-box support for per-item animations. Moreover, we made sure to allow customizations like defining your own animations, performing batch animations when resetting the source collection and defining a time interval between each separate animation when performing a batch operation.

So let’s put the mumbo-jumbo aside and take a look at the fresh example we added to our Telerik RadControls app (available on the WP7 marketplace) that demonstrates this functionality:

As you can see, in this example we have RadDataBoundListBox loaded with a few items, a list picker that can be used to select between different animation types, and two buttons that can be used to add/remove items from the source collection and observe the applied animation.

Setting up all this niceness related to animations requires only XAML code like this below:

 

<telerikPrimitives:RadDataBoundListBox.ItemAddedAnimation>
    <telerikCore:RadMoveAnimation StartPoint="500, 0" EndPoint="0, 0" Duration="0:0:1">
        <telerikCore:RadMoveAnimation.Easing>
            <CubicEase EasingMode="EaseOut"/>
        </telerikCore:RadMoveAnimation.Easing>
    </telerikCore:RadMoveAnimation>
</telerikPrimitives:RadDataBoundListBox.ItemAddedAnimation>
<telerikPrimitives:RadDataBoundListBox.ItemRemovedAnimation>
    <telerikCore:RadMoveAnimation StartPoint="0, 0" EndPoint="500, 0" Duration="0:0:10">
        <telerikCore:RadMoveAnimation.Easing>
            <CubicEase EasingMode="EaseIn"/>
        </telerikCore:RadMoveAnimation.Easing>
    </telerikCore:RadMoveAnimation>
</telerikPrimitives:RadDataBoundListBox.ItemRemovedAnimation>

 

You can download the Q3 2011 Beta from your account to directly take a look at all the new features coming with this release.


Deyan Ginev
About the Author

Deyan Ginev

Deyan has been with Telerik for more than ​six years working on several different products with main focus on mobile technologies. Deyan is currently working on NativeScript– a platform for developing native mobile apps with JavaScript. Find him on Twitter via
@deyan_ginev.

Related Posts

Comments

Comments are disabled in preview mode.