Carousel Item Selection

[Paul Parkins]

Hi

I am using the Syncfusion 31.1.23 Carousel in my WPF application. I seem to be having distinct issues selecting a carousel item after updating the carousel items, since removing one.   Before I go to the effort of duplicating any problems in an example project, I'd like to consult as to whether or not I am really approaching things in the  right way.

Re-Population

Our carousel represents items a member has available to them that they can claim. One claimed, that item should no longer be available on the carousel,

Question 1 - Would you recommend removing the item from the exiting items collection (tried this, had some issues about updating the collection in a different thread)., or re-populating a new colleciton of items, and assigning it to Items property?

I am currently applying the 2nd method, but it has adverse effects via native binding on my SelectedItem 

Item Selection

After having removed the item, or repopulate, I would like to automatically select "next" item (sometimes previous if we were at the end).  It is this area I am having problems with. Quite commonly my SelectedItemIndex gets set to -1 (due to native binding), even though it visually looks like an item is selected.

Question 2 - If SelectedItemIndex is -1 when the Items has a collection, what would you expect the carousel to look like?  To me, it looks like an item is topmost, and therefore selected.  Not sure how you would even show no selection.

It seems to me there are possibly multiple ways I should be able to select an item

• Carousel Methods (eg. SelectFirstItem) - I am using MVVM so I cannot call methods on the control directly
  
• Carousel Commands (eg. SelectFrrstItemCommand) - I can't get my head around how they would be used, as normally the view would trigger a command on the viewmodel. How can this be used so the view model triggers it on the Carouel?
• SelectedItem
• SelectedItemIndex
• Setting IsSelected=True for the item in the collection I want selected

Question 3 - Which method of selecting an item from the above would you recommend?

Question 4 - Are you able to point me at an example using the commands?

Thanks for your consideration. I will respond with an example of my problem if necessary, once I have confirmed I am not approaching this totally incorrectly.

Thanks

Paul Parkins

[Karthick Arjunan]

Hi Paul Parkins,

Thank you for explaining your scenario in detail. We recommend keeping a single ObservableCollection bound to the Carousel and using a filtering mechanism rather than recreating the entire collection. In our sample, each item has a custom State property (e.g., Visible/Hidden), and a CollectionViewSource applies a filter so only visible items appear. This approach avoids cross-thread update issues and ensures your bindings, including SelectedItem and SelectedIndex, remain intact.

 

When an item is claimed, we simply update its State to Hidden and refresh the view. The ViewModel then calculates the next valid index and assigns it to SelectedIndex, so the Carousel automatically moves focus to the next item. This method respects MVVM principles and eliminates the need to call control methods directly, while keeping the UI responsive and consistent.

 

We’ve attached a simple sample that demonstrates this pattern, including the filtering logic and index handling. Please review it and let us know if you have any concerns.

Regards,

Karthick Arjunan

Attachment: CarouselDemo_a87d0724.zip

[Paul Parkins]

Hi

Thanks for your reply and your code sample. Due to work priorities I have not yet had the time check out your sample, nor implement your suggestions. But actually I am glad because something has cropped up recently, that I might have been blaming my code changes for.

I want to ask if you have had a reports from customers of the carousel canvas apparently locking up (or at least not refreshing)? I ask this because:

• We have had 2 reports of customers where the carousel did not display (while canvas looked blank). Having checked my logs everything appeared normal, and the carousel was populated as it should have been. This issue persisted until the application was restarted (carousel recreated)
  
• I myself in my dev environment experienced (one once) a visible and populated carousel, that this not refresh it's UI. As I have a "selected item" counter on screen in my app, I could see that as I was attempting to swipe the carousel, the selected item was indeed changing. For all intents and purposes the carousel was operating normally, it just was not updating it's UI.

So I am wondering if both of these issue might be related. Twice (customers) where the canvas locked up before the initial view, and once (me) after the initial view.

Have you had any other reports of this?   Unfortunately I am not able to reproduce this, and so cannot currently provide any code which demonstrates it.

Thanks

Paul

[Paul Parkins]

And now back to your sample.... I found this interesting, thanks. I hadn't actually heard of a CollectionViewSource before.

I am investigating using your method, but actually I do have need to repopulate the carousel, for each different user that logs into my application.  I am making concerted efforts to ensure the CollectionSource is not recreated, but only the underlying observable collection, and then only in the UI thread. I trues this is what you would advise?

One thing I was wondering, is how in my MVVM app's view model can refresh the carousel, when it  has no link to the control itself in the view.  So whilst I could refresh the FilteredItemsView.View, how would I force the Carousel o update it's layout?

            // refresh view
            FilteredItemsView.View.Refresh();
            Carousel?.UpdateLayout();

Thanks

Paul

[Karthick Arjunan]

Hi Paul Parkins, 

Query 1 – Carousel canvas blank / not refreshing

We haven’t received any similar reports for Carousel control, and we couldn’t reproduce this behavior even under stress or background updates using the modified sample. We’ve attached the updated sample for your reference.
If we’ve misunderstood your scenario, or if you can provide a small reproducible sample, that would help us investigate further.

Query 2 – Repopulate per user + MVVM refresh

Yes, keep a single CollectionViewSource and one ObservableCollection for the Carousel. Create these objects once and reuse them instead of creating new ones every time. The ObservableCollection holds your items, and the CollectionViewSource handles filtering and sorting. By keeping them the same, your data bindings (like SelectedItem and SelectedIndex) stay intact, and you avoid issues such as losing selection or breaking UI updates. When you need to show different items for a new user, just clear the existing collection and add the new items to it rather than replacing the collection instance.

You don’t need to call UpdateLayout() from the ViewModel, calling FilteredItemsView.View.Refresh() on the UI thread will update the Carousel automatically. This approach works well with MVVM and keeps everything stable.

Regards,
Karthick Arjunan

Attachment: CarouselDemo_d8a088cb.zip