Creating a Dockable Panel ControlManager Using C#, Part 3

In Part 1, you learned how to create the DockableForm. In Part 2, you learned to move and size the DockableForm and you designed a docking manager that controls and coordinates all docking cycles. You also learned about the general design pattern needed to achieve your goal once you have finished this article series. If you haven’t read the first two parts of this series, you can find them at the following links: Dockable Panel ControlManager Using C#, Part 1 and Dockable Panel ControlManager Using C#, Part 2.

In this part of the series, you will do the first preparations you need to complete the docking process, but this still doesn’t cover the docking process itself. Just a word of caution : There are a lot of mathematical calculations in this part, and because some of the calculations might be difficult to understand, I will try to make it easier for you by explaining them via the use of drawings and pictures. Now, it’s time to start.

Actions Needed Before Docking

When moving a DockableForm over an MDI Form, buttons appear that show where and how to dock. The position of these buttons depends on where you can place the dockable form. Figure 1 shows this process. Here, you are docking your first dockable form, and because of that, your “indicator” buttons show you where you can drag & place your dockable form (left, right, top, or bottom).

Figure 1: DockingButtons for placing the first DockableForm.

If you have already docked some DockableForms in your MDI, this might look differently, as in Figure 2, where you can see that your docking buttons appear at a totally different place.

Figure 2: DockingButtons after some DockableForms are placed on the screen.

The positions of these buttons must also change whenever the MDI Form is resized, so what you obviously need to do is to do some calculations where the buttons should be placed. The problem of a possible change of the MDI and the DockableForms size isn’t really serious because you simply need to calculate the actual size(s) and actual position(s) of each Form. These buttons are the buttons needed for the very basic docking methods, which are the normal standard methods such as left, right, top, and bottom. But, you also have more advanced docking possibilities. You want to be able to dock two or more DockableForms to the left, right, top, or bottom as well; or to have them in a tabbed view and all the tabbed Forms docked in one of your basic methods. Figure 3 shows one of these versions of docking.

Figure 3: The DockingButtons when we are using one of the advanced docking methods.

The first thing you may notice in Figure 3 is that you obviously have different DockingButtons pictures and they also differ in their size. You have four pictures for the basic docking methods and five for the advanced docking methods. Three of them you can see in Figure 3, but there are two more if you are using advanced docking on the left or right.

More by Author

Must Read