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.

Technorati 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
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 </div>