Telerik blogs

Creating Loading Animation for Telerik WP7 Listbox

by Valio Stoychev
June 15, 2011 Mobile 0 Comments


[Download the application source code]

We've got a lot of requests lately for adding animations in our own implementation of ListBox for WP7 - the RadDataBoundListbox. So we decided that we will add animations for the following scenarios:

 - when the listbox is initially loaded,

 - when the listbox is inside Pivot and the selected pivot item is changed,

 - when items are added/removed from the ItemsSource and the new/old items are in the viewport of the control.

This functionality will be available very soon out of the box. So in this blog post I'll show you how to create your own implementation of initial loading animation in the listbox. We will use the Telerik animation framework for WP7 and will hook the proper events to call the Tile animation at the correct time.

You can see a video of the animation for initial loading here:
Play Video

In this example I'm using the default VS template for creating WP7 databound applications. Then the silverlight listbox is replaced with the Telerik listbox.

Now it is time to add the animations. As I said before, we will use the Tile animation which is part of the Telerik animation framework.

In the Page constructor the following code is added:

public MainPage()
        {
            InitializeComponent();
  
            this.SetValue(RadTileAnimation.ContainerToAnimateProperty, this.MainListBox);
  
            this.MainListBox.ItemStateChanged += new EventHandler<ItemStateChangedEventArgs>(MainListBox_ItemStateChanged);
....

 

This will instruct the TileAnimation that we need to animate the listbox items. Now we need to figure out when is the right moment to run this animation. The right moment to run the animation when the items in the Viewport of the listbox are generated and realized. We can use the ItemStateChanged event to monitor when an item is generated. We can count the number of ViewPort items by using the ViewPortItems collection. Here is the simple code:

private bool AreListBoxViewPortItemsRealized()
        {
            int itemsInViewPort = 6; //adjust it to the height of the item and listbox
            int itemsCount = App.ViewModel.Items.Count;
            int realizedItems = this.MainListBox.ViewportItems.Count<object>();
            if (realizedItems >= itemsInViewPort ||
                (App.ViewModel.IsDataLoaded && realizedItems >= itemsCount))
            {
                return true;
            }
  
            return false;
        }

 

Once we know that it is time to run the animation - here is how to actually run it:

void MainListBox_ItemStateChanged(object sender, ItemStateChangedEventArgs e)
        {
            if (!AreListBoxViewPortItemsRealized()) return;
  
            this.MainListBox.ItemStateChanged -= MainListBox_ItemStateChanged;
  
            // these nice dispatchers here are to make sure the animation will be smooth.
            Dispatcher.BeginInvoke(() =>
            {
                Dispatcher.BeginInvoke(() =>
                {
                    MainListBox.Opacity = 1;
                    RadTileAnimation tileAnimation = new RadTileAnimation();
                    tileAnimation.SequentialMode = Telerik.Windows.Controls.Animation.SequentialMode.FirstToLast;
                    RadAnimationManager.Play(this, tileAnimation);
                });
            });
        }

 

This is all we need in order to setup the loading animation for a listbox. If you need any other animation implemented - please let me know!

[Download the application source code]

About the Author

Valio Stoychev

Valentin Stoychev (@ValioStoychev) for long has been part of Telerik and worked on almost every UI suite that came out of Telerik. Valio now works as a Product Manager and strives to make every customer a successful customer.

 

Comments

Comments are disabled in preview mode.