Using the BPC OrderableList Control

The OrderableList control will allow the user to order items. To use it, add a reference to the BPC library to your project.

You will need to bind the ItemsSource property of the control to a list (any list type implementing the IList interface). You can change the ItemTemplate for the list items if you want.

<Phone:OrderableList ItemsSource="{Binding}">
<Phone:OrderableList.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Name}"></TextBlock>
<TextBlock Text="{Binding Description}"></TextBlock>
</StackPanel>
</DataTemplate>
</Phone:OrderableList.ItemTemplate>
</Phone:OrderableList>
 

This will show a list with an icon on the right that will allow the user to drag and drop any item at any place :

image

 

As the list is bound, any ordering change will update the original list. In this screenshot for example, the same list is directly bound to an OrderableList and to a classic ItemsControl.

Last edited May 20, 2011 at 10:41 AM by guillaumelac, version 4

Comments

owickedfox May 18, 2012 at 5:23 AM 
Hello, I really love this control, and I have used it in some of my project. But as a MVVM developer, I had to say the control won't raise the property changed after add or remove.

this.FooViewModelCollection.Remove(this.RemovedFooModelViewModel);
base.RaisePropertyChanged("FooViewModelCollection");

the FooViewModelCollection was bound as twoway
<bewise:OrderableList ItemsSource="{Binding FooViewModelCollection, Mode=TwoWay}"...>

after removing, the UI still keeps the remove item (and we have to manual refresh to update). But the original ListBox works fine with this situation.

guillaumelac Feb 22, 2012 at 9:57 AM 
Hi,
We will update the control today, with a few improvements :
- we included a scroll in the list
- we added a DragImageUrl property, that allows you to change the default picture.

pefi Jan 5, 2012 at 7:36 PM 
I have 3 question on this wonderful control:
1. How can I use this with a long & scrolling list? If I take an element and move it to the screen boarder it should scroll up/down several elements. I tried to include the control into a scroll viewer but it didnt result in the desired behaviour.
2. How can I change the picture element?
3. How can I reduce the tilt effect? I think reducing it makes the control easier to use.