Silverlight for Windows Phone Toolkit is Loopy

Loopy - Adj. describing a state of goofiness usually occurring after a long night of partying or any other activity that provokes sleep deprivation.

I started playing with the Silverlight for Windows Phone Toolkit and I absolutely love it! One of the cool controls they have is this Date & Time picker! At the heart of this control is a LoopingSelector! I created a simple demo of how to reuse this control…

The scenario is as follows… Let's assume that I have a simple application where my user needs to plan their exercise program. Thy first need is to select the type of exercise but then for each set, they have to select the amount of repetitions they want to do and then the weight they will be using…

To make the LoopingSelector work, I first need a data source… I created a very generic IntRangeDataSource:

class IntRangeDataSource : ILoopingSelectorDataSource
{
    public int Minimum { get; set; }
    public int Maximum { get; set; }
    public int IncrementWith { get; set; }

    public IntRangeDataSource()
    {
        Minimum = 0;
        Maximum = 100;
        IncrementWith = 1;
        SelectedItem = 0;
    }

    public object GetNext(object relativeTo)
    {
        int value = (int)relativeTo;
        if (value >= Maximum)
            return Minimum;

        return value + IncrementWith;
    }

    public object GetPrevious(object relativeTo)
    {
        int value = (int)relativeTo;
        if (value <= Minimum)
            return Maximum;

        return value - IncrementWith;
    }

    private int selectedItem = 0;
    public object SelectedItem
    {
        get
        {
            return selectedItem;
        }
        set
        {
            if (selectedItem != (int)value)
            {
                selectedItem = (int)value;
            }                
        }
    }

    public event EventHandler<SelectionChangedEventArgs> SelectionChanged;
}

To not make the demo too complicated, I just added two LoopingSelectors to my main form… in a REAL application, this should be encapsulated in a user control.

<p:LoopingSelector Width="148" ItemSize="148, 148" ItemMargin="6" x:Name="selector1" />
<p:LoopingSelector Width="148" ItemSize="148, 148" ItemMargin="6" x:Name="selector2" />

And finally, hook up the DataSource:

selector1.DataSource = new IntRangeDataSource() { SelectedItem = 15 };
selector2.DataSource = new IntRangeDataSource() 
	{ SelectedItem = 50, IncrementWith = 5 };

And that's it…

Cool, huh?

If you want to learn more about these controls, check out this video: Inside Windows Phone #05-Windows Phone Silverlight Toolkit.

CodeProject