Scroll item when Mouse over

[Hema]

Hi Team,

 

I have requirement to scroll item when user place the mouse over left or right item from RadCarousel control. Please let me know how to do ?

 

Regards

Hema

[Dilyan Traykov]

Hello Hema,

One way to approach this would be to predefine the CarouselItem's ControlTemplate and handle ContentPresenter's MouseEnter and MouseLeave events. I've attached a sample project to demonstrate this.

Please let me know if this would work for you.

Regards,
Dilyan Traykov
Telerik

[Hema]

Hi Dilyan,

 

Thanks for your reponse. also sorry for late reply.

I have found some issue in Carousel control, if the list has 2 item then its showing blank screen/ data appearing after scroll mouse.

Attached the code for your reference. 

 

Regards

Hema

[Dilyan Traykov]

Hello Hema,

The behavior you're observing is due to the fact that the ItemsPerPage property of the RadCarouselPanel is set to 3. RadCarousel will not automatically fill its path with items if the number of items is less than the value of the ItemsPerPage property.

You can have a look at the following forum thread where a similar scenario has been discussed. Another possible solution has been suggested here by one of my colleagues.

I hope you find this information helpful.

Regards,
Dilyan Traykov
Telerik

[Hema]

Hi Dilyan,

Thanks for your reply.

I want get the Preview item when the user mouse over. for example if the user mouse cursor top of the preview item then it should be selected item and do some business.

I just checked rad carousel has mouse double clicked event and it does not have mouse over or mouse leave events. can you help on my requirement?

Regars

Hema

 

 

 

 

[Dilyan Traykov]

Hello Hema,

Please refer to the project I've attached to one of my previous replies. As demonstrated there, you can access the carousel item and then you can get the underlying business object like so:

private void CarouselItem_MouseEnter(object sender, MouseEventArgs e)
{
    var target = e.Source as FrameworkElement;
    var carouselItem = target.ParentOfType<CarouselItem>();

    if (!carouselItem.IsSelected)
    {
        carouselItem.IsSelected = true;
        var club = carouselItem.DataContext as Club;
        MessageBox.Show(club.Name);
    }
}

Please let me know if this suits your requirements.

Regards,
Dilyan Traykov
Telerik

[Hema]

Above your example shows navigating the item when mouse over to left and right items. but my requirement is very simple. i want to get the item index when user mouse over the center item from carousel(like preview item). when carouselitem.isselected=true is navigate item and not able to get either user mouse over on left or right or center of my items(club)

 

Regards

Hema

 

[Dilyan Traykov]

Hello Hema,

In such case, you can handle this like so:

if (carouselItem.IsSelected)
{
    var club = carouselItem.DataContext as Club;
    MessageBox.Show(club.Name);
}

Bear in mind that you will need to leave and reenter the carousel item with your mouse for this to work and thus, remove the logic for the CarouselItem_MouseLeave event as right now it sets the item's IsSelectedproperty to false.

Or, depending on your requirements you can simplify the whole handler to:

private void CarouselItem_MouseEnter(object sender, MouseEventArgs e)
{
    var target = e.Source as FrameworkElement;
    var carouselItem = target.ParentOfType<CarouselItem>();

    carouselItem.IsSelected = true;

    var club = carouselItem.DataContext as Club;
    MessageBox.Show(club.Name);
}

I hope you find this helpful.

Regards,
Dilyan Traykov
Telerik