Proposal: CarouselView control

[micahl]

Proposal: CarouselView control

Summary

A CarouselView control would provide a smooth carousel experience for browsing items in a collection, focusing on one at a time. It would support wrap around behavior and expose a basic set of options to configure the scaling and offset of non-selected items.

Rationale

• A carousel UX is an existing gap in the control set.
• The existing FlipView control is close, but it is designed to display only a single item at a time without the ability to have additional items on screen or peeking in from the sides.

Scope

Capability	Priority
Ability to resize the secondary items (i.e. all except for the center) separately from the selected item (i.e. the center item)	Must
Support for enabling/disabling wrap around	Must
Basic configuration options including item scale and offset	Must
Support a glyphic indicator (see #602)	Should
Support for shadows on the items	Should
Advanced configuration options (TBD)	Could

Important Notes

Existing carousel controls often provide many variations. It's unclear how many of those are used in practice. Some common variations that seem useful that the control ought to enable are:

Open Questions

• Are there variations other than the ones above that you’d expect to see supported?
• If the control were initially restricted to the following set of options for configuring the appearance, what else would be most critical to include? Are there examples you can reference to illustrate how it would be used in context of a larger experience?
  • Horizontal/Vertical orientation
  • Scaling the non-selected (off-center) item
  • Spacing between items
  • Enabling/disabling wrap-around
• Does it matter to you if this were a new control versus an attempt to update the existing FlipView control?

[micahl]

764 is related

[Palatis]

use the one in Windows Community Toolkit instead?

https://docs.microsoft.com/zh-tw/windows/communitytoolkit/controls/carousel

[micahl]

That might be ok for an app written in C#, but undesirable for apps written in native code. A managed code implementation, such as the one in the community toolkit, introduces additional overhead. Having a high-quality implementation in WinUI should be useable by either.

[harvinders]

@micahl

1. It would be great to have support for the keyboard and controller based navigation built in, especially if there are more than one CarouselViews that are stacked vertically (e.g video streaming apps).

2. Also, The fourth variation could be page flipping.

3. Support for shadows in variation 2, 3 and 4

[micahl]

@harvinders, yes, it would need to support keyboard and gamepad navigation. IIUC what you mean by page flipping then it would be something like my PowerPoint mockup below, right?

That also seems like a common UI pattern used in apps (especially media-focused apps that you might find on an Xbox). I'm torn on whether that should be covered by this control or something else.

They're very similar in visual appearance. There might also be some subtle behavioral differences that arise and impact the API. For example, carousel controls often show the selected item in a visually distinct way from the rest (e.g. zoomed in / centered) whereas that isn't true in a paging UX. The navigation model might also be subtly different. Should a PageUp/Down always move one item at a time when in the "carousel" mode or should it jump by multiple items at a time in a "page" mode. Accessibility might also be different.

[harvinders]

@micahl What I meant was something like below.

You may come to the conclusion that it is more like a FlipView (maybe it should be possible to apply different sliding animations to FlipView).

I understand that the difference between FlipView and the proposed CarouselView is that multiple items are displayed and one is always selected. Is this correct? If that is correct we won't be able to use it for developing apps like Netflix where you have multiple rows (say CarouselView) vertically stacked, as per this proposal each CarouselView would have a selected item. Where as in video stream apps only one would be selected.

[micahl]

@harvinders thanks, that helps clarify. I see the CarouselView as providing a superset of functionality relative to the FlipView.

I'm not discounting the possibility of a CarouselView being used in a situation like Netflix's UI. I don't have a good feel yet for whether there are subtle differences that would result in an unwieldy API or if it will be straightforward to flip a few bits and get the desired one.

On a related note, I can see someone using a CarouselView in a vertical orientation to present each row in a Netflix-like UI. That assumes each row has the same height. I don't think the control would handle a situation where items vary in size.

[JustinXinLiu]

Actually, it’s fairly simple to have this Carousel control to support a Netflix-like UI.

All you need to do is to have multiple Carousels stacked vertically with SelectionMode set to None. And then you just monitor the ItemClick event to display your selected item.