WP7 LoopingSelector

I’m currently building a Windows Phone application where I need to give the user the possibility to select a number between 1 and 99. Since I really like the TimePicker and DatePicker I really would like to do something simillar for my own application. Fortunately these controls are built upon the LoopingSelector control so all we really have to do is to add a LoopingSelector control to our page and provide it with a data source and item template.

First of all you need the Silverlight for Windows Phone Toolkit so that you can add a namespace reference to the control primitives in the toolkit.

The LoopingSelector control expects a DataSource that implements ILoopingSelectorDataSource interface.

    // Summary:
    //     Defines how the LoopingSelector communicates with data source.
    public interface ILoopingSelectorDataSource
    {
        // Summary:
        //     The selected item. Should never be null.
        object SelectedItem { get; set; }

        // Summary:
        //     Raised when the selection changes.
        event EventHandler<SelectionChangedEventArgs> SelectionChanged;

        // Summary:
        //     Get the next datum, relative to an existing datum.
        //
        // Parameters:
        //   relativeTo:
        //     The datum the return value will be relative to.
        //
        // Returns:
        //     The next datum.
        object GetNext(object relativeTo);
        //
        // Summary:
        //     Get the previous datum, relative to an existing datum.
        //
        // Parameters:
        //   relativeTo:
        //     The datum the return value will be relative to.
        //
        // Returns:
        //     The previous datum.
        object GetPrevious(object relativeTo);
    }

I created a simple class that I called NumberSelectorDataSource that implements the ILoopingSelectorDataSource interface.

The Xaml for adding a LoopingSelector control to our page using the NumberSelectorDataSource will be as follow

xmlns:controls="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone.Controls.Toolkit"

<controls:LoopingSelector 
                x:Name="NumberOfRoundsSelector"
                Grid.Column="1" Margin="12" Width="128" ItemSize="128,128" 
                ItemTemplate="{StaticResource NumberTemplate}">
                <controls:LoopingSelector.DataSource>
                    <local:LoopingNumbersDataSource Minimum="1" Maximum="99" />
                </controls:LoopingSelector.DataSource>
            </controls:LoopingSelector>

For this I used the following ItemTemplate

<DataTemplate x:Key="NumberTemplate">
                <Grid>
                    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" 
                          Text="{Binding}" 
                          FontSize="54" FontFamily="{StaticResource PhoneFontFamilySemiBold}" />
                </Grid>
            </DataTemplate>

Running the application I get the following nice “number selector”! Sweet.

Advertisements
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: