Windowscommunitytoolkit: Carousel control

[Mimetis]

Following the contributing guideline, I want to propose a new control : The Carousel.

I made this control 2 years ago, and I think it could be a good new control for the UWP toolkit ?

Actually It works for Windows 8 / 8.1 / Windows Phone, and the migration to UWP seems to be really easy.
I have already a working sample on my dev machine.

Does it make sens for you ?

[ScottIsAFool]

Nice, might be worth bringing this up in #468 as I believe it's the same desired control, right?

[Mimetis]

Yes kind of same control :)
Actually not EXACTLY the same, but very close to

[ScottIsAFool]

Is it worth posting in that thread as the control you've got already could then be extended to allow for what's needed from there?

[Mimetis]

Hum, I don't understand what you mean, but the control, in my opinion, could be a good addition to the toolkit, and will benefit of the existings UWP Toolkit community.
Actually, if the issue is validated, I will close the existing Github repo to redirect here.

And by the way, i follow the contributing guideline :)
make sense ?

[deltakosh]

Hello Sébastien and thank you for this great idea.
Ping @nmetulev as he already did the control mentioned in #468

[lukasf]

The good thing about your control is that it looks different than the apple patented control. #468 was more or less stopped because it looked very very close to the patent.

[Mimetis]

Indeed lukasf, It's a different behavior, especially it's not a circular ItemList, so as you mentioned, I think we won't have any problem with it.
Well to be honest, when I made it, i didn't think at all about any patent :)

[deltakosh]

Moving this one to 1.4. Please let me know if you can finish it before next monday (1/30) and I'll revert it to 1.3 then.

[nmetulev]

Just created a PR for my version of the control, and we already have a PR for @Mimetis version, so it's now up to the community to decide which one to use take in :)

Version 1 (#712): beautiful transition animations and a way to control a lot of the way the control works and looks. It also has nice virtualization and way for user to control it. However, because it is based on storyboards, it can be laggy. It also does not support an easy way to create custom animations or way to change the orientation from horizontal to vertical. It also does not support keyboard or controller input and only works with touch/mouse.

Version 2 (#932): based on composition and is more performant. However, it lacks virtualization. It does offer some simple default animations, but has a way for the user to add their own animations fairly easily. It also support both horizontal and vertical orientation, as well as support for keyboard, controller, mouse, and touch, making it a bit more flexible in that regard

Both controls do require a bit more work depending on what version is chosen

[Odonno]

@nmetulev I would opt for Composition one if it offers fluid and beautiful animations. I think that's the design goal of the control.

Otherwise, if the two controls are too differents, why not keeping both by providing the right names? If that add values to developers and not confusion of course.

[deltakosh]

The controls are really comparable. I would love to merge both actually.

[deltakosh]

can you provide a small video of both to help people decide which one they prefer?

[nmetulev]

Agree, these controls are too similar to have both of them.

Great idea on video. Here is version 1 and version 2.

[deltakosh]

Music is great :D

[Odonno]

@nmetulev Wow. Really great videos. From what I see, version 2 looks better. Animation of the version 1 seems really slow, can we reduce the delay between transition? Does it still look fluid when the delay is low (like 200ms)?

[skendrot]

I like the options of number one. I thought both looked good animation wise, but #2 was too fast.

[nmetulev]

@Odonno , thanks :). The videos are a bit deceiving in terms of animations. Version 1 follows the finger/mouse as it is moving, so that is why it looks like it is going too slow. I'd recommend trying them out to get the best feel for each one.

[lukasf]

I think it is hard to decide. Both controls have their ups and weaknesses.

Version 1:
(+) Nice animations
(+) Lots or properties to customize behavior
(-) No Keyboard or directional navigation (this is a no-go I think? but should be easy to add)
(-) No vertical layout
(-) No real virtualization. Items are collapsed, this can help a bit, but still all templates are completely realized on loading, which will be a problem with large collections.

Version 2:
(+) Based on Composition
(+) Keyboard and directional navigation
(-) No virtualization
(-) Bad use of INotifyCollectionChanged ;-)
(-) Animation code scattered throughout different classes makes it hard to customize all animations. Only some of the animations can be easily changed right now. Also, animations cannot make use of intermediate positions. So I think smooth/slow scrolling with touch like in version 1, where the center item slowly comes into its final position, is just not possible with this approach.

Normally I would prefer Composition based controls. But with the current concept of version 2, it will be hard to get a great touch experience. A very different approach for using Composition would be needed to get intermediate positions with touch. So right now I would vote for Version 1 instead, maybe with added support for keyboard and directional navigation. Perhaps later it could be changed to use Composition, if a good way is found for that.

[skendrot]

Before I do a code review on either of them, please note that the control will need to be an ItemsControl.
@Mimetis @nmetulev

[Mimetis]

Hi skendrot.
I'm currently working on the first version, adding keyboard controls and vertical orientation as well.
Migrating to an ItemsControl is a lot of work, why is it mandatory for you ?
I mean, one of the advantage to migrating to ItemsControl (imo) is to be able to seperate the logic of the renderer (ItemsPanel) the list beahvior (ItemsControl) and the item template (ItemTemplate).

ItemTemplate is already implemented, so migrating to ItemsControl won't change anything on this point.
About the ItemsPanel, the ItemsPanel is really dependant on the Carousel control. Changing the ItemsPanel is not allowed.

I will continue to investigate your requirement, but not sure why it's so important for you :)

[skendrot]

Why should it be an ItemsControl? That's a good question.

1. It is a control that displays a collection of items
2. User should be able to define an ItemsSource
3. User should be able to add items directly as content
4. User should be able to define the template for items (ItemTemplate)
5. User should be able to define an ItemTemplateSelector

Once again, I would prefer it to be a Selector, but the dang control has an internal constructor
Paging @timheuer

It would be nice if the control would loop around, or have the option to loop. Here's a good article about making a custom ItemsControl https://blogs.msdn.microsoft.com/mim/2013/04/16/winrt-create-a-custom-itemspanel-for-an-itemscontrol/

How you implement the rendering is up to you. If it's a Canvas under the hood that's fine, but the control itself should be an ItemsControl

[Mimetis]

Thx to point on my own article :D

[skendrot]

HA! That's awesome!

[skendrot]

One thought, can this be accomplished with a FlipView? I once restyled a flipview to show the previous and next items but never looked into changing the transform of the previous/next items

[Mimetis]

Hi All;
I've updated my Carousel version.
Well, to be honest, I rewrite it from scratch :)
Today, the Carousel control:

• Inherits from ItemsControl (even if it wasn't necessary, you asked for it, so :)
• Keyboard access : Works correctly with keyboard (left right, up down)
• Mouse control : Wheel mouse works like a charm
• Gesture control : Gestures are functionnals and works as expected
• Orientation property : Vertical and Horizontal mode
• Rotation X, Y, Z : on each item
• Mirror mode : Invert the right items vs the lef items

You can watch a short video here : https://1drv.ms/v/s!AnCw7g8n73rGpY9teW4tIUHlsJsVJA

All the animations are made with a unique Storyboard. If someone wants to migrate to Composition, feel free :)
I intentionaly disabled the items virtualizations, to much bug. Maybe in a next version.

[nmetulev]

This is amazing, I vote for Version 1 now. We can move to Composition and add virtualization in future version if there is a need.

One thing that should be added to the controls (both are missing now) is the focus visual and proper focus management. Currently, there is no indication for when the focus is captured by the control, and this is very important on Xbox. Also, it looks like focus is being captured by each item now vs captured by the control itself.

[deltakosh]

I also vote for 1 and yeah we need to ensure that focus can be visualized: https://github.com/Microsoft/UWPCommunityToolkit/blob/dev/contributing.md#quality-insurance-for-pull-requests-for-xaml-controls

[deltakosh]

Ping @Mimetis for the comments :)

[Mimetis]

Thx all.
Will take a look on all issues as soon as possible :)