Circular carousel with flipview behavior

[aodpi]

I'm submitting a...

Feature request (UserVoice request: https://wpdev.uservoice.com/forums/110705-universal-windows-platform/suggestions/36536572-circular-flipview-control-with-position-indicators )

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

Environment

Nuget Package(s): 

Package Version(s): 

Windows 10 Build Number:
- [ ] Fall Creators Update (16299)
- [ ] April 2018 Update (17134)
- [ ] October 2018 Update (17763)
- [ ] Insider Build (build number: )

App min and target version:
- [ ] Fall Creators Update (16299)
- [ ] April 2018 Update (17134)
- [ ] October 2018 Update (17763)
- [ ] Insider Build (xxxxx)

Device form factor:
- [ ] Desktop
- [ ] Mobile
- [ ] Xbox
- [ ] Surface Hub
- [ ] IoT

Visual Studio 
- [ ] 2017 (version: )
- [ ] 2017 Preview (version: )

[michael-hawker]

Thanks @aodpi for submitting a request and filing a UserVoice issue. Can you provide a few more details and maybe some links to images/examples of exactly what you're thinking?

[skendrot]

Based on the description in the user voice entry we already support this through the Carousel control. Aside from the position indicator, how does this not meet your request?

[aodpi]

@skendrot I'm not sure if you can scroll through items just like in FlipView using carousel, that is, displaying one item at a time.

[skendrot]

Okay, I see this as a simple add-on to the existing FlipView. Add a small ListView at the bottom that has circles and has two way binding of the SelectedIndex to the FlipView.

<ListView SelectedIndex="{Binding SelectedIndex, ElementName=FlipView, Mode=TwoWay}"
          ItemTemplate="{StaticResource CircleTemplate}"/>

Then have a timer that changes the SelectedIndex. The only thing you wouldn't get is swipe from end to start, but the timer could change from last to first easily.

var newIndex = FlipView.SelectedIndex == FlipView.Items.Count - 1
              ? 0
              :  FlipView.SelectedIndex + 1;
FlipView.SelectedIndex = newIndex;

[michael-hawker]

@skendrot did you mock that up, want to share the CircleTemplate for the filled in selected item?

@aodpi also check out the WinUI's PagerControl proposal.

I'm going to close this issue for now.

[SavoySchuler]

@michael-hawker and @aodpi, this feature has been split from the PagerControl development into its own proposal by merit of being distinct enough from the other suite of pager solutions. Please be sure to give it a thumbs up here and provide any feedback necessary to make sure it works for you. Thanks!

[micahl]

I've started a specific proposal for a CarouselView control on the WinUI repo.