Windows Phone 7

WP7 looping selector

by Peter Daukintis

After release of the RTM software tools for WP7 I was pleased to see the looping controls manifested as DatePicker and TimePicker since I was considering creating similar…These are built on top of the LoopingSelector control which has the usual support for ItemTemplates and data binding.

So, after adding a reference to Microsoft.Phone.Controls.Toolkit I added this to my xaml:

<Primitives:LoopingSelector ItemSize="100,160" x:Name="loop" DataSource="{Binding Data}">
                <Primitives:LoopingSelector.ItemTemplate>
                    <DataTemplate>
                        <StackPanel>                        
                            <TextBlock Text="{Binding Selected}"></TextBlock>
                            <Image Source="ApplicationIcon.png"></Image>
                            <TextBlock Text="{Binding TextItem}"></TextBlock>
                        </StackPanel>
                    </DataTemplate>
                </Primitives:LoopingSelector.ItemTemplate>
            </Primitives:LoopingSelector> 

This is the class declaration for the data source (implementing ILoopingSelectorDataSource expected by the LoopingSelector):

    public class DataSrc : ILoopingSelectorDataSource, INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        private DataItem _selected;

        public DataItem Selected
        {
            get { return _selected; }
            set
            {
                if (_selected != value)
                {
                    _selected = value;
                    OnPropertyChanged("Selected");
                }
            }
        }

        public object GetNext(object relativeTo) 
        {
            DataItem num = (DataItem)relativeTo;
            return new DataItem { Selected = num.Selected + 1 };
        }

        public object GetPrevious(object relativeTo)
        {
            DataItem num = (DataItem)relativeTo;
            return new DataItem { Selected = num.Selected - 1 };
        }

        public object SelectedItem { get { return Selected; } set { Selected = (DataItem)value; } }

        public event EventHandler<SelectionChangedEventArgs> SelectionChanged;
    }

where the DataItem is defined as follows:

    public class DataItem : INotifyPropertyChanged
    {
        private int _selected;

        public int Selected
        {
            get { return _selected; }
            set
            {
                if (_selected != value)
                {
                    _selected = value;
                    OnPropertyChanged("Selected");
                }
            }
        }

        public string TextItem
        {
            get { return "label for " + Selected; }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        public void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }

and my viewmodel like this…

    public class VM : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        private DataSrc _data;

        public DataSrc Data
        {
            get { return _data; }
            set
            {
                if (_data != value)
                {
                    _data = value;
                    OnPropertyChanged("Data");
                }
            }
        }
    }

resulting in a pretty cool and flexible spin box-like control.

loopingselector

Technorati Tags: ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
Windows Live Tags: Beta,Peter,Daukintis,tools,DatePicker,TimePicker,LoopingSelector,ItemTemplates,data,reference,Microsoft,Controls,Toolkit,ItemSize,Name,loop,DataSource,ItemTemplate,DataTemplate,StackPanel,TextBlock,Text,Image,Source,ApplicationIcon,TextItem,declaration,ILoopingSelectorDataSource,DataSrc,event,PropertyChangedEventHandler,PropertyChangedEventArgs,DataItem,GetNext,GetPrevious,SelectedItem,EventHandler,SelectionChangedEventArgs,_data,propertyName

11 thoughts on “WP7 looping selector

  1. I have been trying to replicate something like this unsuccessfully. Can you post the code or explain in more detail how to set it up??

    Thanks!

  2. Hi, Can you tell me, is it possible to create an event on SelectionChanged (similar to listbox?). I want to store value of setting in LoopSelector, and after user changes it – save to isolated storage. How can I fire that thing?

Leave a Reply

Your email address will not be published. Required fields are marked *