search

CommunityToolkit / WindowsCommunityToolkit

The Windows Community Toolkit is a collection of helpers, extensions, and custom controls. It simplifies and demonstrates common developer tasks building .NET apps with UWP and the Windows App SDK / WinUI 3 for Windows 10 and Windows 11. The toolkit is part of the .NET Foundation.
https://docs.microsoft.com/windows/communitytoolkit/
Other
5.89k stars 1.38k forks source link

Circular carousel with flipview behavior #2748

Closed aodpi closed 5 years ago

aodpi commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

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