Reader Level:

Move Up/Down ListBoxItem in ListBox in WPF

By Diptimaya Patra on Apr 03, 2010
In this article we will see how we can move up/down a ListBoxItem in ListBox.
  • 0
  • 0
  • 25522
Download Files:


In this article we will see how we can move up/down a ListBoxItem in ListBox.

Creating A WPF Project

Fire up Visual Studio 2008, create a WPF Application, and name it as ListBoxMoveUpDown.


In some project, the requirement is like we have move up and down the position of the item in ListBox. So let's achieve it.

Here's the idea let's have a User Request Workflow.

First of all we need a ListBox and two buttons saying Move Up and Move Down.


Now let's have sample data that we would bind to the ListBox.


The above class is the structure of a Workflow. Instead of Rank you can use the term Priority.

Now we need a SortableObservableCollection that can Sort Ranks based on the changes, we will make.


Above code display is for displaying the SortableObservableCollection.

Now how to use SortableObservableCollection for Sorting an ObservableCollection, follow below code:


Now we will customize the DataTemplate of the ItemTemplate of the ListBox for better display.

The following XAML for your reference:


Now we will run our application and see the sample data being loaded to the ListBox.


Now we will do Move Up functionality.

Move Up


Here is the explanation what we have done in above code display. First we are checking whether any item is selected in the ListBox and if yes then we are casting the SelectedItem of the ListBox to Workflow(our class type). Then we are again checking if the Rank of the selected Workflow is not equal to 1. If it is not then we would swap the rank with the previous item. And after that we do the sorting of the SortableObservableCollection.

Move Down


Moving down the ListBoxItem is similar to Move Up implementation. The only changes are:

To check the ListBoxItem as the Last Item we need to take the ListBox.Items.Count property. And we exchange to the next item present in the ListBox.

That's it, we would run the application to see the functionalities achieved.


As you see in above image, we have Format System is the 4th Workflow step, which is not correct! It should be the 2nd and then System Engineer can Install Software 1 and 2.

So we would move Format System to 2 rank up.


And it's done.

Similarly Move down button would work.

Hope this article helps.

Article Extensions
Contents added by aos nec on Jul 09, 2012
This movement of items by sorting the data in the ListBox.
This is
not a real move in the data.

That's sort code:

lbData.ItemsSource = null;
sortedData.Sort(x => x.Rank, ListSortDirection.Ascending);
lbData.ItemsSource = sortedData;

I have a failed to XML.
Can you give an example of working with XML that has the attributes?

Example XML data nodes:

 <FilePath Name="brick" Path="D:\brick.txt" Loader="fileOK.png">
 <FilePath Name="test" Path="D:\test.txt" Loader="text.png">
 <FilePath Name="white" Path="D:\white.txt" Loader="white.png">
 <FilePath Name="black" Path="D:\black.txt" Loader="black.png">

And more ...
Is it possible to implement drag and drop the XML in a native component of the ListBox, so changed the index XML elements in the file?


Diptimaya Patra

Visit in for latest articles.Facebook Page: