Instance Dragging

The previous post showed that you can drag pages around the KryptonWorkspace control in order to change the layout of the workspace area. We now need to extend this another level because in the real world you may want to drag pages between different control instances. As the KryptonNavigator also deals with KryptonPage instances it makes sense to allow pages to be dragged to and from Navigator as well as Workspace controls.

Drag Navigator to Workspace

The following images show a Form that has two KryptonNavigator instances at the top and a single KryptonWorkspace control at the bottom. We start by selecting page P1 from the top left Navigator…

And then drag it over to right side of the Workspace…

Dropping creates a new cell inside the Workspace with the page transferred.

Drag Workspace to Navigator

Moving in the opposite direction is just as easy. Just start dragging P1 from the Workspace and move it over the client area of the Navigator instance…

Notice that the Navigator gives feedback by showing the light blue area over the entire Navigator instance. There is only one thing the Navigator can do with a page drop and that is adding it to the end of its existing set of pages. So the only feedback, no matter where you move the mouse, is to show the entire control as the feedback area. Once you drop the page you get the following result…

Drag Navigator to Navigator
Drag Workspace to Workspace

You can ignore the Workspace entirely and just transfer pages from one Navigator instance to the other. Just drag P1 and move the mouse over to the other Navigator like so…

So you have the flexibility of dragging pages from/to Navigator /Workspace instances. This is not happening by using the traditional drag and drop mechanism provided in Windows. Starting the drag operation is not using the DoDragDrop call that you might be familiar with. Instead I have created my own class that manages the process.

Targets/Notify/Manager

You need three things to perform drag and drop. First you need a set of potential targerts that can accept the drop and for that we have the IDragTargetProvider interface. Second we need to allow drag operations to be started and we have the IDragPageNotify interface for that. Finally we need an instance that manages the orchestration and so there is a class called DragManager.

IDragTargetProvider

In practice this means that the Navigator and Workspace both implement the IDragTargetProvider interface
because both are capable of being drop targets for page dragging. This public interface could be implemented by any control so you could certainly make your own controls drop targets. The samples for the next release will give a couple of examples showing how to make a simple Button control or TreeView a drop target.

IDragPageNotify

The Navigator and Workspace also expose a property called DragPageNotify that stores an instance of the IDragPageNotify interface. Whenever you start a drag operation it callw back on this provided interface with the relevant mouse events. DragManager implements this interface and so can be passed into the DragPageNotify property of any control that wants to be able to start a drag. Again, the samples will show how to implement this on a Button and TreeView.

So the real story of this post is not that you can easily drag and drop pages between Navigator and Workspace instances, but you can easily integrate your own controls into this dragging mechanism. The above three controls are linked together using the following simple code…

DragManager dm = new DragManager();  

 

// Add drop targets
dm.DragTargetProviders.Add(kryptonNavigator1);
dm.DragTargetProviders.Add(kryptonNavigator2);
dm.DragTargetProviders.Add(kryptonWorkspace1); 

// Add drag sources
kryptonNavigator1.DragPageNotify = dm;
kryptonNavigator2.DragPageNotify = dm;
kryptonWorkspace1.DragPageNotify = dm;
 

4 Responses to “Instance dragging”

  1. DavidS Says:

    Using this you’ll be able to reorder the pages, this is good since we cant do this with the current tab navigator. It would be nice if we could see some animations of the dragging.

  2. Vesuvius Says:

    Yes DavidS and the anchor points, i.e. if you are to dock it to the bottom or left or right you have the tracking.

  3. Dave W Says:

    Will this mechanism allow us to drag other items onto a tab? For example, if I drag a Person object over the navigator, will I be able to detect this and create a new KryptonPage in response containing the person’s details?

    Or, can I make it so that while you’re dragging an item (e.g. a file) over various tabs within the navigator, that the tabs will be selected so I can choose which tab to drop the file into by hovering the mouse cursor over each tab during the drag?

    Also, is there a workaround for achieving this with the existing version?

  4. Phil Wright Says:

    There is no explicit support for traditional dragging at the moment. This is certainly something that needs to be added in the future though.

Leave a Reply