XtraBars - Docking Functionality

In this lesson, you will learn the basics of the docking functionality provided by the XtraBars Library. I’ll show you how to create a layout, which is similar to the layout used in Microsoft Visual Studio.

  1. To provide docking functionality for our form, I drag and drop a DockManager component onto it.
  2. Now I’ll need to create dock panels.
  3. To do this, I’ll use the functionality provided by the DockManager.
  4. I’ll select it and add a new panel by clicking the “Add Panel” link.
  5. Once created, this dock panel is automatically added to the DockManager’s Panels Collection.
  6. I drag the panel by its caption, and dock it to the form’s right edge.
  7. Small markers indicate the sides where the panel can be docked.
  8. In the same way, I’ll add another panel, and locate it above the first.
  9. Now let’s create another panel, a third one, and add it to the form’s bottom edge.
  10. Finally, I’ll create a fourth panel and drop it onto the third panel.
  11. As a result of this, the third and fourth panels are displayed as tabbed pages.
  12. Once the fourth panel has been dropped, a container panel has automatically been created for me.
  13. This panel can be selected by clicking its caption, and its settings will be displayed within the properties window.
  14. Now I’ll proceed with the customization of the dock panels themselves.
  15. First I assign the source of the images to the DockManager’s Images property.
  16. Then, I can select each “dock panel” in turn, specify its caption, and associate the corresponding image with it by using the ImageIndex property.
  17. Note that images are only displayed when the dock panels are auto-hidden or when they represent tabbed pages.
  18. I proceed to the second panel, let it be “Solution Explorer” and I’ll select the corresponding image.
  19. Then, I can do the same with the third panel.
  20. Let this one be called “Command Window”.
  21. Once assigned, the image will be displayed within the tab header.
  22. Finally, I’ll select the fourth panel, edit its caption, and set its ImageIndex value.
  23. After that, I’m done with the dock panel’s customization for this particular demo.
  24. I can now run the application to see the result.
  25. I can change the docking layout by using drag and drop.
  26. I can maximize dock panels and unnecessary panels can be closed.
  27. Or they can be auto-hidden.

For detailed information on the docking functionality within XtraBars, please refer to the XtraBars documentation (