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
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!
Hi Joe,
Please find the project here http://cid-4f1b7368284539e5.office.live.com/self.aspx/.Public/LoopingSelector/LoopingSelector.zip
Thanks!
Just what I was looking for!
Thanks for this. When I load the sample code, however, I get a number of build errors and can’t seem use the primitives library:
http://img573.imageshack.us/img573/6943/capturevs.png
D’oh, somehow I missed that this is not part of the default SDK
http://silverlight.codeplex.com/releases/view/55034
How do you get the currently selected value in c#?
You can get the selected item from the looping selector something like this: DataItem dataItem = loop.DataSource.SelectedItem as DataItem;
I’ve enabled the application bar on a page with these on and the bottom of the spinner is being cut off. Why is that?
Thanks!
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?