Programatically Controlling or Moving the Carousel items

16 posts, 1 answers
  1. Vuyiswa Maseko
    Vuyiswa Maseko avatar
    187 posts
    Member since:
    Jan 2010

    Posted 24 Jan 2013 Link to this post

    Good day all 

    This is my first post for 2013. i am working on a Kinect for Microsoft Project , i want to use Telerik Carousel , so as you know in Kinect there is no mouse and keyboards, i want to programmatically move the Carousel items left or right. so i need to know is there a way to move or scroll it Programmatically ? 

    Thanks 

  2. Muhamad Rizwan
    Muhamad Rizwan avatar
    3 posts
    Member since:
    May 2011

    Posted 13 Mar 2013 Link to this post

    Hi Vuyiswa Maseko,
    Perhaps this you are looking for: http://www.telerik.com/account/registration-login/url.aspx?id=hgtkdmkbmh.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Vuyiswa Maseko
    Vuyiswa Maseko avatar
    187 posts
    Member since:
    Jan 2010

    Posted 13 Mar 2013 Link to this post

    Good Day Muhammad

    you just sent me a wrong link :) 

  5. Answer
    Muhamad Rizwan
    Muhamad Rizwan avatar
    3 posts
    Member since:
    May 2011

    Posted 13 Mar 2013 Link to this post

    Oh, really sorry, here is the correct link: http://www.telerik.com/help/wpf/carousel-radcarouselpanel-item-movement.html
  6. Vuyiswa Maseko
    Vuyiswa Maseko avatar
    187 posts
    Member since:
    Jan 2010

    Posted 13 Mar 2013 Link to this post

    Ahh Thanks its a Perfect example 
  7. Muhamad Rizwan
    Muhamad Rizwan avatar
    3 posts
    Member since:
    May 2011

    Posted 13 Mar 2013 Link to this post

    Good luck :)
  8. Ilya
    Ilya  avatar
    1 posts
    Member since:
    May 2011

    Posted 15 Aug 2013 Link to this post

    Hello, I'm trying to do the same thing - programmatically change the top most item.

    My problem is I want it to animate and not just jump. How do I do that?

    Here's what I have:  

    <telerik:RadCarousel x:Name="statementsCarousel"
    	ItemTemplate="{StaticResource statementCarouselTemplate}"
    	Background="Transparent"
    	ItemsSource="{Binding CarouselStatements}"                             
    	HorizontalAlignment="Stretch"
    	VerticalAlignment="Stretch" />

    I've tried simply binding to the ViewModel like this: 
    SelectedItem="{Binding CarouselStatementsSelectedItem, Mode=OneWay}"
    

    I've also tried in the code-behind all of the following
    void Items_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
    
    {
    this.statementsCarousel.FindCarouselPanel().LineRight();
    	this.statementsCarousel.FindCarouselPanel().MoveBy(1);
    	this.statementsCarousel.BringDataItemIntoView(
    	this.statementsCarousel.Items[this.statementsCarousel.Items.Count - 2]);
    	this.statementsCarousel.SelectedItem =
    	this.statementsCarousel.Items[this.statementsCarousel.Items.Count - 2];
    }
    
    I don't understand if I'm calling it in the wrong place or this is the wrong way to call it or I have to 
    include some call to trigger animations. Either way, I cannot seem to get the next navigation to actually 
    animate.

    Also, although what I really want to do is bind to an ObservableCollection and in the background keep adding to it, while having the count-5 item displayed and navigated to in an animated way, I could not get this to work even with a static collection either.


    Thanks!
    Ilya
  9. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 20 Aug 2013 Link to this post

    Hello Ilya,

    If you want to bring the selected item into view, you can do as follows:

    this.carousel.SelectedItem = this.carousel.Items[3];
    this.carousel.BringDataItemIntoView(this.carousel.SelectedItem);

    Considering your second requirement, you can add items directly to the source collection and you will be able to scroll to them afterwards. What are the troubles that you have accomplishing this scenario ?Regards,
    Maya
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  10. Nadav
    Nadav avatar
    5 posts
    Member since:
    Nov 2012

    Posted 11 Jan in reply to Maya Link to this post

    Hi Maya,

    Your solution still doesn't address the animation problem.

    Non of the navigation functions of the RadCarousel or the RadCarouselPanel controls activate the navigation animation, this inclueds BringDataItemIntoView, MoveBy, LineDown/Up/Right/Left etc.

    Is there a way to programmatically scroll the carousel and still see the scrolling animation?

  11. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 14 Jan Link to this post

    Hello Nadav,

    I tested with MoveBy and LineUp methods and it seems to me that the animation is triggered. This is a small video illustrating my attempt. Is there anything else that I need to do in order to get the same behavior as the one on your side ? 

    Regards,
    Maya
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  12. Nadav
    Nadav avatar
    5 posts
    Member since:
    Nov 2012

    Posted 17 Jan in reply to Maya Link to this post

    Hi Maya,

    Thanks for the reply.

    I'll try to describe what I'm trying to accomplish, and I hope you can advise me on how to get there.

    So I'm trying to use the RadCarousel to only present data, without user interaction. I have real-time events, which are represented as cards in the carousel control. As a new event pops, I want it to slide in and take the topmost place in the carousel, and for all the other cards to move aside (with animation of course). The maximum items I present simultaneously (ItemsPerPage) is 7. Please see attached screen shot.

    The first problem I encountered was making the first item(s), when I have less than 7 cards, to even be presented and take the topmost place. The second problem was getting the desired animation when a new item is added, and I assume it's because I'm calling the BringDataItemIntoView method (or any of the other paging alternatives) directly after adding the new item to the collection.

    This is a snippet of the method that adds a new card:

    public ObservableCollection<CardOwner> Owners { get; set; }
      
    private void AddOwner()
    {
        var owner = new CardOwner()
            {
                AccessTime = DateTime.Now,
                OwnerId = _runningId++.ToString(),
                OwnerNumber = _runningNumber++.ToString()
            };
      
        if (Owners.Count == 1)
        {
            EventsCarousel.FindCarouselPanel().ItemsPerPage = 2;
        }
      
        Owners.Add(owner);
        EventsCarousel.BringDataItemIntoView(owner);
        EventsCarousel.FindCarouselPanel().ItemsPerPage = 7;
    }
      
    private void RadCarousel_PreviewMouseWheel(object sender, MouseWheelEventArgs e)
    {
        e.Handled = true;
    }

    I would highly appreciate any input you might have on this.
    Regards,
    Nadav.
  13. Nadav
    Nadav avatar
    5 posts
    Member since:
    Nov 2012

    Posted 17 Jan in reply to Nadav Link to this post

    Sorry, I forgot to attach the screen shot, so here it is.
  14. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 18 Jan Link to this post

    Hello Nadav,

    You can try something as follows:
    private void Button1_Click(object sender, RoutedEventArgs e)
            {
                var club = new Club()
                {
                    Name = "Club " + this.count
                };
                this.count++;
     
                this.viewModel.Clubs.Add(club);
     
     
                this.Dispatcher.BeginInvoke(new Action(() =>
                    {
                        this.carousel.BringDataItemIntoView(club);
                    }), DispatcherPriority.Render);
            }

    I also attached a small sample project illustrating the behavior. Please take a look at it and let me know whether it corresponds to your requirements.


    Regards,
    Maya
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  15. Nadav
    Nadav avatar
    5 posts
    Member since:
    Nov 2012

    Posted 19 Jan in reply to Maya Link to this post

    Thanks Maya, this works perfectly!

    Got exactly the result I was struggling to get.

  16. Max Valente
    Max Valente avatar
    2 posts
    Member since:
    Apr 2010

    Posted 26 Apr Link to this post

    Hello,

    what about if I want it auto scroll? radcarousel images with auto move every 2 seconds... is there any property or event for that ?

    or I have to use timer ?

    Thanks

  17. Yoan
    Admin
    Yoan avatar
    1070 posts

    Posted 27 Apr Link to this post

    Hello,

    RadCarousel does not support this out-of-the-box. You will have to scroll the items manually. As you mentioned, you can use a timer for achieving this functionality.

    Regards,
    Yoan
    Telerik
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for WPF is Visual Studio 2017 Ready