Animating the Databoundlistbox

10 posts, 1 answers
  1. Dele
    Dele avatar
    23 posts
    Member since:
    Jun 2012

    Posted 17 Mar 2011 Link to this post

    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?
  2. Deyan
    Admin
    Deyan avatar
    2037 posts

    Posted 18 Mar 2011 Link to this post

    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
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  3. DevCraft banner
  4. Dele
    Dele avatar
    23 posts
    Member since:
    Jun 2012

    Posted 18 Mar 2011 Link to this post

    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);
            }
  5. Deyan
    Admin
    Deyan avatar
    2037 posts

    Posted 19 Mar 2011 Link to this post

    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
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  6. Dele
    Dele avatar
    23 posts
    Member since:
    Jun 2012

    Posted 19 Mar 2011 Link to this post

    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?
  7. Deyan
    Admin
    Deyan avatar
    2037 posts

    Posted 22 Mar 2011 Link to this post

    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
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  8. Dele
    Dele avatar
    23 posts
    Member since:
    Jun 2012

    Posted 22 Mar 2011 Link to this post

    This worked perfectly.  Thanks a lot for your help.
  9. Deyan
    Admin
    Deyan avatar
    2037 posts

    Posted 23 Mar 2011 Link to this post

    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
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  10. Lukasz
    Lukasz avatar
    9 posts
    Member since:
    Jun 2011

    Posted 08 Jul 2011 Link to this post

    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


  11. Answer
    Deyan
    Admin
    Deyan avatar
    2037 posts

    Posted 12 Jul 2011 Link to this post

    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

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

Back to Top
DevCraft banner