Windows Phone 8.1 (WinRT): Custom Looping Selector

13
votes

I want a custom Looping Selector for my Windows Phone 8.1 (WinRT) and I couldn't find any solution for the moment. I want something like this:

enter image description here

The Windows Phone Toolkit is for WP8.0 and WP8.1 Silverlight and it doesn't work for WP8.1 (WinRT) apps (And this question is for WP8.1 Silverlight).

There are DatePicker & TimePicker controls for WP8.1. Is there any way to custom their data or something to trick the control to my problem?

There is a LoopingSelector class but it seems that it is not implemented yet.

Any solution or idea would be appreciated.

2
c#xamlwindows-runtimewindows-phone-8.1loopingselector
are the picker classes sealed? If not, inherit a new class from them and override the methods so that they do what you want. – magicandre1981
How can I find if they are sealed? This is the class: msdn.microsoft.com/library/windows/apps/dn299280. It is "public class TimePicker : Control". So can I inherit it? – Vahid
@magicandre1981, If you have time to create a working example from what you said (and answer the question), it could be great for everyone to use. Thank you in advance. – Vahid
I only started watching some videos about phone development. So I'm not the person you should ask about such an example. – magicandre1981

2 Answers

1
votes

Not sure if you still need this... but there is a WinRT LoopItemsPanel project available here: http://blogs.msdn.com/b/mim/archive/2013/04/16/winrt-create-a-custom-itemspanel-for-an-itemscontrol.aspx

0
votes

I did something like this for an "infinite snapping date selector" if that makes sense :)

Basics:

  • create a data model to display which can provide you with the next/previous elements
  • have a Canvas as your control root (it's fast)
  • call render Loaded and rerender on SizeChanged
  • create a (dependency)property for selected value
  • subscribe for relevant manipulation events (ManipulationDelta, and *Completed) and choose what ManipulationModes you want to allow (translate, maybe translateintertia if you want intertia)

Render:

  • render screensize/elementsize + 2 elements (maybe more)
  • move them on the manipulationdelta and completed events
  • if an element leaves the control boundary on one side, move the last element on that side to the other end, while changing the displayed data as well (basically if it was the last, than firstelement.getprevious)
  • on manipulationcompleted find the closest element to the center, and animate everything to a 'snap' position
  • and finally set your selectedvalue property to the data of the centered element

This solution with animating Canvas.Left performed well even on a first-gen Surface RT. Good luck!