Programatically Controlling or Moving the Carousel items

[Vuyiswa]

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 

[Moriz]

Hi Vuyiswa Maseko,
Perhaps this you are looking for: http://www.telerik.com/account/registration-login/url.aspx?id=hgtkdmkbmh.

[Vuyiswa]

Good Day Muhammad

you just sent me a wrong link :) 

[Moriz]

Oh, really sorry, here is the correct link: http://www.telerik.com/help/wpf/carousel-radcarouselpanel-item-movement.html

[Vuyiswa]

Ahh Thanks its a Perfect example 

[Moriz]

Good luck :)

[Ilya]

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

[Maya]

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

[Nadav]

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?

[Maya]

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

[Nadav]

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.

[Nadav]

Sorry, I forgot to attach the screen shot, so here it is.

[Maya]

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

[Nadav]

Thanks Maya, this works perfectly!

Got exactly the result I was struggling to get.

[Max Valente]

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

[Yoan]

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