Proposal: Add Glyphic Index Display to FlipView

[SavoySchuler]

Proposal: Add Glyphic Index Display to FlipView

Summary

Add a customizable glyphic index display to FlipView that includes APIs for wrapping, timed navigation, option back/next arrows, and optionally clickable glyphs for manual indexing.

Rationale

• 1 general MVP request.
• Responds to this UserVoice item.

Functional Requirements

#	Feature	Priority
1	Integrated with FlipView.	Must
2	Can customize glyphs and timed navigation. Can toggle wrap, manual navigation, and Back/Next arrows.	Must

Important Notes

Open Questions

[michael-hawker]

Thanks @SavoySchuler, to clarify: Is the main distinction here that for the PagerControl it's splitting up and separating a collection into a number of sets/pages vs. FlipView where it's just navigating from one item to the next?

I would have thought that point would be controlled by use of the DataPager proposal #268 and then the UI could be more agnostic and used for both of these types of scenarios or other general UI. I could see a scenario where you have a general Frame and each dot in the pager navigates the frame to a different page.

[aodpi]

One question, will this support circular scroll of items? Kind of an infinite scroll in the flipview. When the user is at the last item, when he/she presses the next button it will smoothly flip to the first item and the glyphic index display will be at the first position. This behavior is commonly encountered in web carousels. For example bootstrap's carousel control:

Bootstrap carousel with indicators

As you can see, when you are located at the third slide, pressing next will smoothly slide you to the first, this gives an infinite flip behavior. I do understand that we talk about UWP here, not web, but still, it would be very nice to have such behavior. I was having this behavior in mind when addressing #2748

[SavoySchuler]

@michael-hawker , compared to the core scenarios for PagerControl (shown in the summary), the wrapped and timed glyphic index display was decidedly distinct enough to warrant being its own proposal as an improvement to FlipView as scenarios surrounding the other view controls would not broadly benefit from this functionality. The underlying logic of this improvement may be similar to PagerControl’s (and we could use that to our benefit in implementation), but the idea here would be to have something baked into FlipView (making it more logically connected) as opposed to appropriating PagerControl which feels like a stretch of the control’s intent and could cause some discoverability issues. Additionally, should data paging support be pursued for PagerControl later, that would also be another vestigial function when it comes to glyphic index display shown here, unless you can think of common scenarios where FlipView would be used with paged data?

@aodpi, yes, the idea would be to add an API for wrapping that could be enabled/disabled and another for a timer that could automatically advance the index. I would not halt your WCT request as this proposal is still waiting for a customer/community interest to justify pitching it. Is this something you have need for in a current or future development? If so, would you mind sharing your scenario and requirements for this control?

[SavoySchuler]

I am re-assigning this ticket to FlipView area owner @predavid. @michael-hawker and @aodpi, please @ me if you have any more questions for me. Thanks!

[mdtauk]

Templates for the selected and unselected glyphs/elements, perhaps a start and end panel also for adding things before or after the "Step" indicators?

[predavid-zz]

Thank you @michael-hawker , @aodpi and @mdtauk for the great discussion here!
The suggested set of features for a glyphic index display API on FlipView sounds very useful indeed. As @SavoySchuler mentioned earlier, we awaiting more community interest before pitching this proposal. Would you have scenarios and /or mock-ups of current apps that you are working on that would benefit from this addition to FlipView in the immediate future? If yes, please do share them. Also, please take a look at our WinUI Roadmap which captures our current focus as well as a list of new features we're looking to introduce in the near term: https://github.com/microsoft/microsoft-ui-xaml/blob/master/docs/roadmap.md

Your feedback on that discussion document would be highly beneficial.