Horizontal Looping Selector for Windows Phone

Posted by supay | Comments

The Silverlight Toolkit for Windows Phone 7 contains a lot of really useful controls. One of them is the LoopingSelector which is used by the DatePicker control.

However the limitation of the current Looping Selector is that expands only vertically.But, I needed to do it horizontally.

So, I added a few changes to the original LoopingSelector class and created the HorizontalLoopingSelector.

You can compare both looping selectors in the image below.

HorizontalLoopingSelector LoopingSelector
|

What I did is add two new files to the Microsoft.Phone.Controls.Primitives namespace:

  • HorizontalLoopingSelector.cs
  • HorizontalLoopingSelectorItem.cs

Also, added two new styles for these items to the Microsoft.Phone.Controls.Toolkit/Themes/Generic.xaml file. However, these styles do repeat the LoopingSelector and LoopingSelectorItem styles.

I also use a fix for styling the HorizontalLoopigSelector control as described in Codeplex.com. This allows me use a custom item style for the control as follows:

<toolkit:HorizontalLoopingSelector Margin="12"
                                   Height="128"
                                   ItemSize="128,128"
                                   ItemTemplate="{StaticResource Temp}"
                                   ItemStyle="MyItemStyle">

You can grab the sample project from GitHub or download a package containing only the three modified files.

Hope it will be useful to someone.