Animating the Databoundlistbox

[Dele]

I have been thinking about creating the turnstile effect on the list box when I select an item, or when I load a listbox.  Can I do this using the RadAnimations?

[Deyan]

Hi Dele,

Thanks for contacting us and for your question.

Yes, you can do this with the RadDataBoundListBox by using the RadTileAnimation. Here is a code snippet that demonstrates the approach:

public MainPage()
{
      InitializeComponent();
      RadTileTransition transition = new RadTileTransition();
      this.SetValue(RadTransitionControl.TransitionProperty, transition);
      this.SetValue(RadTileAnimation.ContainerToAnimateProperty, ListBox1);
}

If you also wish to apply a delay to the item that triggers the animation (usually the selected item), you should catch the ItemTap event of the RadDataBoundListBox and hint the RadTileAnimation to the item that causes it:

private void RadDataBoundListBox_ItemTap(object sender, Telerik.Windows.Controls.ListBoxItemTapEventArgs e)
{
      this.SetValue(RadTileAnimation.ElementToDelayProperty, e.Item);
}

I hope this helps.

Do not hesitate to get back to us in case of further questions.

Best wishes,
Deyan
the Telerik team

[Dele]

Thank you for the quick reply.

I tried this on the Databoundlistbox, but it doesn't seem to animate (when it loads nor when I click on an item).  Here are all the components below.  I'm not sure if it's due to my template or maybe I'm missing something else?

<telerikPrimitives:RadDataBoundListBox CacheMode="BitmapCache" x:Name="lbRecentAlerts"
                                       ItemsSource="{Binding RecentAlerts}"
                                       SelectedItem="{Binding SelectedAlert, Mode=TwoWay}"
                                       ItemTemplate="{StaticResource AmberAlertListTemplate}"
                                       ItemTap="lbRecentAlerts_ItemTap">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="ItemTap">
            <mvvmLightCommand:EventToCommand Command="{Binding GoToAlertCommand, Mode=OneWay}"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
</telerikPrimitives:RadDataBoundListBox>

public MainPage()
{
    InitializeComponent();
    Loaded += new RoutedEventHandler(MainPage_Loaded);
    RadTileTransition transition = new RadTileTransition();
    this.SetValue(RadTransitionControl.TransitionProperty, transition);
    this.SetValue(RadTileAnimation.ContainerToAnimateProperty, lbRecentAlerts);
    this.SetValue(RadTileAnimation.ContainerToAnimateProperty, lbWatchlist);
}

private void lbRecentAlerts_ItemTap(object sender, ListBoxItemTapEventArgs e)
        {
            this.SetValue(RadTileAnimation.ElementToDelayProperty, e.Item);
        }

[Deyan]

Hi Dele,

Thanks for getting back to me.

Please check the version of the controls that you are using. This functionality is available as of RadControls for Windows Phone 7 Q1, i.e. the official release.

Also, I see in the code snippet that you are using that you are setting the ContainerToAnimateProperty twice. This is not correct since in this way you are disabling the animation for lbRecentAlerts (because you initialize the attached property with another value). Since the lbRecentAlerts is the control you would like to animate, you should remove that line:

this.SetValue(RadTileAnimation.ContainerToAnimateProperty, lbWatchlist);

This works on my side as expected.

I hope this helps.

Do not hesitate to get back to me if you need further assistance or have any questions.

Best wishes,
Deyan
the Telerik team

[Dele]

I do see that it works when I comment out that line.  However, since i have two listboxes on that page I want to animate, how do I do so?

Do I just repeat everything twice?

[Deyan]

Hello Dele,

Thanks for writing back.

The RadTileAnimation accepts one container to animate at a time. In your scenario, you will have to dynamically set the ContainerToAnimate attached property to the corresponding listbox when the user taps on an item from the list box you would like to animate. Take a look how I have modified the source code in your application:

public MainPage()
{
    //mtiks analytics
    mtiks.Instance.postEventAttributes("Load Main Page");
    Messenger.Default.Register<Uri>(this, "GoToAlertDetailRequest", (uri) => NavigationService.Navigate(uri));
    InitializeComponent();
    Loaded += new RoutedEventHandler(MainPage_Loaded);
    RadTileTransition transition = new RadTileTransition();
    this.SetValue(RadTransitionControl.TransitionProperty, transition);

    this.lbWatchlist.SelectionChanged += new SelectionChangedEventHandler(lbWatchlist_SelectionChanged);
    this.lbRecentAlerts.ItemTap += new EventHandler<ListBoxItemTapEventArgs>(lbRecentAlerts_ItemTap);

    this.lbRecentAlerts.SetValue(InteractionEffectManager.IsInteractionEnabledProperty, true);
    InteractionEffectManager.AllowedTypes.Add(typeof(RadDataBoundListBoxItem));
}

void lbWatchlist_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    this.SetValue(RadTileAnimation.ElementToDelayProperty, this.lbWatchlist.ItemContainerGenerator.ContainerFromIndex(this.lbWatchlist.SelectedIndex));
    this.SetValue(RadTileAnimation.ContainerToAnimateProperty, lbWatchlist);
}

private void lbRecentAlerts_ItemTap(object sender, ListBoxItemTapEventArgs e)
{
    this.SetValue(RadTileAnimation.ElementToDelayProperty, e.Item);
    this.SetValue(RadTileAnimation.ContainerToAnimateProperty, lbRecentAlerts);
}

As you can see, I am handling the ItemTap and SelectionChanged events of the corresponding listboxes. Each time one of them occurs, I re-initialize the ContainerToAnimate property of the RadTileAnimation to the corresponding listbox so that its items are correctly animated.

I hope this helps.

Do not hesitate to get back to us in case of further questions.

Greetings,
Deyan
the Telerik team

[Dele]

This worked perfectly.  Thanks a lot for your help.

[Deyan]

Hello Dele,

Thanks for your time. For now, I will consider this ticket closed.

Do not hesitate to get back to us in case of further questions.

Greetings,
Deyan
the Telerik team

[Lukasz]

Hi,
I also have problem with make DataboundListBox animate items.

I'm using Q2 RadControls.

What I'm missing?

EDIT
I resolve one problem but have another :)
When data for DataboundListBox is loaded in BackgroundWork animate in pageIn don't work.

Problem is also that when Page have:

<telerikPrimitives:RadTransitionControl.Transition>
    <telerikPrimitives:RadTileTransition/>
</telerikPrimitives:RadTransitionControl.Transition>

Then only ListBox will be animated and the rest of the controls not.

I made simple project, I fallow all steps and still don't work:
EDIT
I added second project with problem from edited post.
Link to the projects: Project

[Deyan]

Hello Lukasz,

Thanks for writing and for the provided project.

I am not quite sure that I correctly understand the issues that you experience. RadTileAnimation expects a container which it will animate. When you set this container to be a list box control, RadTileAnimation will take its visual items and animate them.

If you are binding the listbox on the Loaded event of the page, this might lead to undesired behavior since RadTileAnimation itself starts when the page is loaded. This might occur a moment before you bind the control to a data source which will lead to an invalid scenario where RadTileAnimation tries to animate a ListBox which is empty.

Best wishes,
Deyan
the Telerik team