Creating a DockablePanel-Controlmanager Using C#, Part 6

More about Advanced Docking

Welcome to Part 6 of a series of articles on how to create dockable forms. The design is similar to the C# IDE, where you are able to dock the toolbox and various other panes, where you can see a preview rectangle and some icons while dragging the DockableForm around. These icons and the preview rectangle show you the different ways to drop your panel. To get the whole picture of what I’m doing to create a fully dockable panel, I have included a lot of pictures to demonstrate the whole logic behind the particular topic I’m covering. If this is your first visit to this series, I would really recommend to go through all the previous parts first. Why? Because each of the different parts include the full source code (up to that point), as well as some retrospective short explanations about the different topics covered already.

As mentioned earlier in former lessons, these articles are aimed at programmers who are relatively new to C# (currently reading a C# book, or did some small examples in C#), but also have an existing basic knowledge of programming, (for example, former Visual Basic programmers), and at those who want to learn about how to build your own usercontrols.

If you want to follow this article and you haven’t read all the other parts yet, you need to do this first, or you will not be able to follow these explanations. Here are the links to the previous articles:

Note: Because you have to add some parts here and there, the code becomes more and more complex now and, to be sure where you are, I have added the regions where the code is to find or where it should be created, so that it is easier for you to follow. If you still haven’t created all the regions by now, you really should do this organizational work first; it will save you hours of work.

In the articles before, you already built the DockableForm with all the basic docking actions. Then, you created the code to show the preview rectangle and the DockingButtons for all the advanced docking actions too, so the next step is to extend the existing docking actions so the advanced docking may occur.

So, look how this will work. Do you remember how you docked the first DockablePanel? Remember what I explained in Part 4.

Figure 1: The DockingController gets the first DockablePanel docked.

Now, have a look what happens when you add a second DockablePanel to the DockingControler.

Figure 2: The simple way: Inserting the DockablePanel to the lower position in the SplitContainer.

This is simple because you only need to add the DockablePanel to the free slot (Panel2) of the SplitContainer. And then, no longer collapse it, so both panels could be seen. The more complex way is to dock the DockablePanel in the same position where the first panel was docked, the Upper position (Panel 1) of the SplitContainer. This looks like the following:

Figure 3: Docking the second DockablePanel to the Upper Position.

In this case, you first need to remove the existing DockablePanel form the Split Containers Panel1 and add it to Panel 2. Then, you insert the second DockablePanel on Panel1 of the SplitContainer to no longer collapse the Containers Panel2.

I have explained now how this works for a vertical orientated DockingControler that could be docked to the left or to the right. For the horizontal orientated DockingControler used on the Top or Bottom positions, RightSide docking corresponds to Figure 2 and LeftSide docking uses the same methods you see in Figure 3. A totally different method is to implement docking by adding the DockablePanels to a TabControl.

Figure 4: Docking to Center by inserting into a TabControl instead of adding to a SplitContainer.

As you remember, when docking the first DockablePanel, you always dock to the SplitControler. So, to dock the second one on a TabControl, you will need to perform the following steps:

  1. Remove the already docked DockablePanel from the SplitControler.
  2. Remove the SplitControler itself.
  3. Add a TabControl on the DockingControler.
  4. Add the original primordial DockablePanel to the TabControl.
  5. Add the new DockablePanel to the TabControl.

But, if you already have docked two DockablePanels to the DockingControler and will add an additional one, the same Docking method has to do the following.

  • Add the new DockablePanel to the TabControl.
  • Nothing else.

More by Author

Must Read