Move Up/Down TreeViewItem in TreeView in WPF

Creating A WPF Project

new.gif

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

In my previous article we have seen how to achieve Move Up and Move Down in a ListBox for a ListBoxItem. Now we would do the same for TreeView and TreeViewItem.

It's almost same, but due to the differnce in Control type I am writing this sample.

Let's add a TreeView Control and Add Move Up and Move Down Buttons.

image2.gif

As you see from above image, I have added two static TreeViewItems such as Request 1 and Request 2.

The following is the XAML reference:

image3.gif

In the above XAML display, you can see the TreeViewItem's itemTemplate is customized.

Now we will load some sample data to the first node and see the result.

image4.gif

Workflow class represents the structure of a Workflow.

image5.gif

As you see in above code display we have added the items into the Request 1 node.

The following class is for using the SortableObservableCollection for sorting an ObservableCollection.

image6.gif

Now we will run the application to see the data loaded in TreeView.

image7.gif

Now we will achieve the Move Up and Move Down functionalities.

This is almost same as we discussed in previous article for ListBoxItem Move Up and Move Down, but some changes.

Move Up

image8.gif

The above code display is the Move Up Button click event handler, where we first check whether we have some item selected in the TreeView. Then we check if the SelectedItem is of type Workflow and if yes then we clear the items of the node and reload it.

image9.gif

The above code is to iterate through the TreeViewItem's Items and change the Rank.

Move Down

Move Down functionality is the same but with Rank value is incremented.

image10.gif

Now we will run the application to check the functionalities of Move Up and Move Down.

image11.gif

image12.gif

Hope this article helps.