This is a migrated thread and some comments may be shown as answers.

Programatically Controlling or Moving the Carousel items

15 Answers 172 Views
Carousel
This is a migrated thread and some comments may be shown as answers.
Vuyiswa
Top achievements
Rank 2
Vuyiswa asked on 24 Jan 2013, 05:06 PM
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 

15 Answers, 1 is accepted

Sort by
0
Moriz
Top achievements
Rank 2
answered on 13 Mar 2013, 04:13 PM
Hi Vuyiswa Maseko,
Perhaps this you are looking for: http://www.telerik.com/account/registration-login/url.aspx?id=hgtkdmkbmh.
0
Vuyiswa
Top achievements
Rank 2
answered on 13 Mar 2013, 04:15 PM
Good Day Muhammad

you just sent me a wrong link :) 

0
Accepted
Moriz
Top achievements
Rank 2
answered on 13 Mar 2013, 04:48 PM
Oh, really sorry, here is the correct link: http://www.telerik.com/help/wpf/carousel-radcarouselpanel-item-movement.html
0
Vuyiswa
Top achievements
Rank 2
answered on 13 Mar 2013, 04:50 PM
Ahh Thanks its a Perfect example 
0
Moriz
Top achievements
Rank 2
answered on 13 Mar 2013, 05:00 PM
Good luck :)
0
Ilya
Top achievements
Rank 1
answered on 15 Aug 2013, 01:20 PM
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
0
Maya
Telerik team
answered on 20 Aug 2013, 07:38 AM
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 >>
0
Nadav
Top achievements
Rank 1
answered on 11 Jan 2016, 05:53 PM

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?

0
Maya
Telerik team
answered on 14 Jan 2016, 12:25 PM
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
0
Nadav
Top achievements
Rank 1
answered on 17 Jan 2016, 10:12 AM
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.
0
Nadav
Top achievements
Rank 1
answered on 17 Jan 2016, 10:14 AM
Sorry, I forgot to attach the screen shot, so here it is.
0
Maya
Telerik team
answered on 18 Jan 2016, 04:13 PM
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
0
Nadav
Top achievements
Rank 1
answered on 19 Jan 2016, 05:26 PM

Thanks Maya, this works perfectly!

Got exactly the result I was struggling to get.

0
Max Valente
Top achievements
Rank 1
answered on 27 Apr 2016, 02:43 AM

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

0
Yoan
Telerik team
answered on 27 Apr 2016, 08:09 AM
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.
Tags
Carousel
Asked by
Vuyiswa
Top achievements
Rank 2
Answers by
Moriz
Top achievements
Rank 2
Vuyiswa
Top achievements
Rank 2
Ilya
Top achievements
Rank 1
Maya
Telerik team
Nadav
Top achievements
Rank 1
Max Valente
Top achievements
Rank 1
Yoan
Telerik team
Share this question
or