WeiFen Luo’s DockPanelSuite is an open source window docking library for .NET Windows Forms. There are a lot of docking window solutions out there, but most are proprietary (and expensive), and DockPanelSuite is the only open source implementation I found that was decent. It suffers from one major problem though – lack of documentation. A […]

This article was posted by Independent Software, a website and database application development company based in Maputo, Mozambique. Our website offers regular write-ups on technical and design issues, ranging from details at code level to 3D Studio Max rendering. Read more about Independent Software's philosophy, or get in touch with Independent Software.

WeiFen Luo’s DockPanelSuite is an open source window docking library for .NET Windows Forms. There are a lot of docking window solutions out there, but most are proprietary (and expensive), and DockPanelSuite is the only open source implementation I found that was decent. It suffers from one major problem though – lack of documentation.

A bit of history

In 2002, Microsoft added the docking panel layout to Visual Studio .NET. Many commercial components were built on top of it, but only in 2006 WeiFen Luo released the first version of his free DockPanelSuite on SourceForge. Several releases followed over the years, but the documentation always consisted of a description of the library’s features, and no concrete examples.

Danilo Corallo wrote an article on CodeProject in 2006, but the samples in it are no longer compatible with the current version of DockPanelSuite. Still, some people did manage to figure out how the library works, since SharpDevelop uses DockPanelSuite as its docking library.

WeiFen Luo has since moved on to other projects (one of them being a docking library for Windows Presentation Foundation), but others have taken over and the DockPanelSuite is still alive and available from GitHub. The latest stable release, DockPanel Suite v2.7, was released on 04 Sep 2012.

Setting up

Getting started with DockPanelSuite doesn’t require much. Download the latest version from GitHub here. Inside the ZIP archive, you’ll find a DLL named WeifenLuo.WinFormsUI.Docking.dll. Copy this to a fresh .NET Windows Forms Application project and create a reference to it:

Creating a reference to the DockPanelSuite DLL

Creating a reference to the DockPanelSuite DLL

The DockPanelSuite provides you with a bunch of classes as well as a UserControl, DockPanel. You’ll need to add this control to your Toolbox. In order to so, right-click on your Toolbox and select “Choose Items…”. This gives you a long list of .NET Framework Components already installed, or available through loaded assemblies. The DockPanel won’t be there yet, so use the “Browse…” button to find the WeifenLuo.WinFormsUI.Docking.dll. Finally select the DockPanel component and make sure that the checkbox next to it is checked. The new UserControl will now be added to your Toolbox.

Adding WeiFen Luo's DockPanel UserControl to your Toolbox

Adding WeiFen Luo’s DockPanel UserControl to your Toolbox

You’re now good to go to create your first DockPanelSuite-enabled application.

Recipe #0: First Steps

In your new Windows Forms Application, open your main form (Form1). Drag a new instance of the DockPanel UserControl onto it, and set its Docking to Fill. Make sure that the main form’s IsMdiContainer property is set to true, as this form will act as the container for all our other dockable windows:

Your main form must be an MDI container

Your main form must be an MDI container

Now create a new form (Form2). In the form code, change the base class from Form to DockContent:

The DockContent class adds DockPanelSuite functionality to your forms. Create some additional forms so we’ll have some windows to dock.

Now to dock some windows! Add the following code to your main form’s constructor:

Build and run your project, and you’ll get this:

Three docked windows in DockPanelSuite

Three docked windows in DockPanelSuite

You should now be able to drag the three windows around. Click and hold a window’s title bar, drag it, and DockPanelSuite will show you where it can be docked. In our current implementation, all windows can be docked anywhere – on the top, left, right or bottom, and grouped with any other window.

Docking a window

Docking a window

Recipe #1: Creating and docking a window

You’ve seen it in action above, but let’s recap. To create a docking window, do:

  • Set your main form’s IsMDIContainer to true;
  • Change the base class of your form to DockContent;
  • In your main form, create an instance of your DockContent form;
  • Call the DockContent’s Show method, indicating where it must dock.

The DockContent’s Show method takes an argument of type DockState which indicates where it must dock. The possible values are:

  • DockLeft, DockRight, DockTop, DockBottom – Dock the window in the appropriate location
  • DockLeftAutoHide, DockRightAutoHide, DockTopAutoHide, DockBottomAutoHide – Dock the window in the appropriate location, and hide it (slide it up, showing only a tab)
  • Document – Place the window in the middle of the DockPanel, as a “Document”. You can create multiple documents this way, which will be shown with little tabs at the top. If you’re writing software that allows a user to edit multiple files at the same time, this will be what you need.
  • Float – Float the window above the MDI form. It can be docked anywhere by the user later.
  • Hidden – When you want to remove a dockable window from the MDI container, but not close it, you can hide it. This value cannot be used with the Show method.

Code:

Recipe #2: Hiding a Dockable Window

Suppose your application has a toolbox with frequently used items docked on the left. When the user clicks the “X” on the window, it will be closed. Still, you’d rather hide it, since there’s only once instance of this toolbox available during the lifetime of the application, and there’s no need to destroy and create it all the time.

By default, DockContent items are destroyed when they are closed. You can change this though:

Hiding on close

Hiding on close

Select your DockContent instance (your dockable form), and find the “Docking” category in its properties. The DockContent parent class has added a number of properties to your form. Set the HideOnClose property to True, and your form will no longer be destroyed on closing. In fact, its Dockstate will be set to Hidden (see recipe #1).

End?

That’s it for now. I’ll be adding more recipes soon. Meanwhile, do post your needs in the comments and I’ll add the recipes you need.

Comments

60 60 Responses to “WeiFen Luo DockPanelSuite Tutorial & Cookbook”
  1. gwittlock says:

    Is there a way to hide the pin and X from the header

    • mesterak says:

      You had hide the X on a window like this:

      MyForm form = new MyForm();
      form.CloseButtonVisible = false;
      form.Show(dockPanel1, DockState.DockLeft);

    • Kevin says:

      Sir GoodMorning. i love this tuitorial. but i have a problem in setting the size or width of the form that i use when i dock the form. how can i manage the size of form sir? Thanks in advance

  2. Gwittlock says:

    is there a way to not have the Pin in the header?

  3. farhad says:

    yah great tutorial…. what i was searching i found here….. thanks adn regards

  4. Muhammad Sohail says:

    I need this Dll and Extender2005.Dll

  5. Muhammad Sohail says:

    And How It Docking Design Rectangle round or ellips?

  6. Mr Panecake says:

    Hi i’m trying to use the control but i cant use dockstate:
    http://gyazo.com/386368b11c5826ec525e1dafd4e7d8cf.png

    Does anyone know what to do?

  7. Farhad says:

    Any one can help me??? as i have used the docking panel But accidentally it stopped showing the tabs for the inherited windows forms

  8. cuongdx says:

    How to docking panels like parts of form?Example i have a few panel in a form link each other and i want to show like dock panel (like visual studio) but in this tutorial i see only show form not panel.How can i do this?Thank you.

    • alex says:

      I don’t think you can dock panels with DockPanelSuite.

    • Mopthe says:

      Use forms if possible. Otherwise try this:

      //Declare some variables
      protected WeifenLuo.WinFormsUI.Docking.DockPanel DockingPanel;
      protected WeifenLuo.WinFormsUI.Docking.DockContent DockingMessage = new WeifenLuo.WinFormsUI.Docking.DockContent();
      protected WeifenLuo.WinFormsUI.Docking.DockContent DockingMessage2= new WeifenLuo.WinFormsUI.Docking.DockContent();

      //If you first add a Panel you shoud be able to add a DockingPanel

      this.Panel1.Dock = DockStyle.Fill;
      this.DockingPanel = new WeifenLuo.WinFormsUI.Docking.DockPanel();
      this.DockingPanel.Parent = this.Panel1;
      this.DockingPanel.Dock = DockStyle.Fill;

      //And then WeifenLuo.WinFormsUI.Docking.DockContent() that you add your control to.
      dgMessage.Parent = this.DockingMessage;
      dgMessage.Dock = DockStyle.Fill;

      this.DockingMessage.DockAreas = DockAreas.DockRight +
      DockAreas.DockLeft +
      DockAreas.DockBottom +
      DockAreas.DockTop +
      DockAreas.Float;

  9. raje says:

    when I am docking only two forms to left and right..I am able to see some gap in between those forms .Though i tried setting the dockpanel left and right property to o.5 each still its showing some gap..Please someone help regarding this problem.

  10. Rohit Taralekar says:

    How can I get the DialogeResult of the form ??

    • dreamaster says:

      hmm… use if(f1.ShowDialog()==DialogResult.OK).. it is still inherited from Form class… still u can also make your button to set DialogResult and close it without much more coding… still u can manipulate object without using DialogResult because object are passed by reference.. so learning class object is important to your system.. :)…

  11. Ming says:

    Yeah! I found this again.

    I use this library when my first programmer job in 2007!
    It very good library and great impression to me !

    Today i reopen the project and search on google to see how is the DockPanelSuite, it’s glad still alive!!!

    • dreamaster says:

      me too.. the same feeling with you sir.. when i was in third year i made a special project of payroll and this has a great impact..

  12. Jason says:

    Thank you for the tutorial 🙂

  13. Abdul says:

    Nice Tutorial

  14. Phil Rogers says:

    Can you please show me how to programmatically dock one form to the Left, and then the next form to the bottom of that docked form? If I set them both to Dock Left, then they are shown with tabs. I’d like to set them one below the other, but docked to the left of the main form and I can’t see how to do it. It can be done manually but how in code?

    • Phil Rogers says:

      I think I might have answered my own question. There is another class, DockPane (not to be confused with DockPanel) which acts as a container. It looks as if I have to create one of these and dock it left, and then dock my forms inside it – the first to the Top, and then dock the second to fill the remaining space.

  15. Vishal says:

    how to add vertical scroll bar in dock panel

  16. Ashokraj says:

    LoadFromXML is not working

  17. SB says:

    Thanks for this. It was frustrating to find such a potentially useful library with no source for the sample program and weak documentation. I’m sure this how-to has been helpful to many people.

  18. Thanks this great tutorial

  19. rizwan says:

    I set the hide on close property to true but it doesn’t work
    I write the code under the button as for opening the form as
    my form frm=new my form();
    frm.show(dockpanel, …….document);
    is there anything wromg wth my code?

  20. Ishara says:

    Say i have docked several forms => Form1 , Form2 , Form3 , Form4
    Form1 is the Active (Current open tab) From
    I’m not providing user to Dock the same form user Docked before, If the user try to dock/open Form3 that already Docked form need to be active, How can i do that ??
    Please help …
    Thanks

    • Ishara says:

      ================== Found the solution ================================

      Form form = new myForm();

      foreach (IDockContent item in mainDockPanel.Contents.ToList())
      {
      if (item.DockHandler.Form.Name.Equals(form.Name))
      {
      item.DockHandler.Activate(); // this will re active if the form already Docked
      }
      }

  21. Giuliano says:

    Lack of documentation!
    How can I add any control (a button, a check box, etc) to my instance of my DockContent?
    I have created a Windows Forms Application.
    I have opened main form (Form1) and dragged a new instance of the DockPanel UserControl onto it and set its Docking to Fill.
    I have defined a new form (Form2) with base class DockContent.
    In the constructor of main form (Form1) constructor I have instantiated Form2 and showed it.
    I would like to add some control to Form2 but I don’t get it.
    Thank you for any help.

  22. Giuliano says:

    Hello.
    How can I receive any help using DockPanelSuite?
    Regards
    Giuliano

  23. Sunil says:

    Very nice dockpanel control! I was wondering if there is a way to use this in a normal form (IsMdiContainer = false).

  24. Kamil says:

    Hello.
    I have a problem. I made a main form with DockPanel. I docked some forms like in upper example. Then I sarted to programm resize funcion of main form. My problem is how to block resizing of some forms and resize others? Anybody has an idea?
    Best regards,
    Kamil.

  25. Rohan says:

    bringtofront() is not working, can someone help please? I don’t want to open a new instance of a form on every call instead I want the form to come in front if it is already open.

  26. Charles says:

    I don’t understand why this is not working for me. The dockpanel is there but when I dock any other forms in it, they just disappear and don’t show. $#&!%!

  27. Tapfuma Gahadzikwa says:

    Does anybody know how to change the backgroung skin color or theme

    • dreamaster says:

      the same as Form sir.. if u know the basics you can handle it.. if you haven’t know yet.. search google for manuals 🙂

  28. Larry Smith says:

    Can anyone show me how to implement the simple tutorial above in Visual Basic? I am using Visual Basic Express 2010.

  29. Raza says:

    Thanks. Really Great tutorial.

  30. cybersheep says:

    Thanks – great tutorial, just what I needed to get me started with DockPanelSuite! 🙂

  31. Dada gholap says:

    nice,great

  32. Subbu says:

    Minimize button event is not working on Windows 10. Can anyone solve my problem?

  33. Vasudha says:

    I have a form in which i need to show the dock panels one next to another. If i give all as dock left, it comes in tabbed format, whereas I need it one next to the other, like form1, form2, form3, form4 one next to another. Please help. I tried adding panes, but with form.show(takes only dockpanel, dockstyle).

    Please help.

    Regards,
    Vasudha

  34. rahul says:

    is there any event for handling the control after dock change ?

  35. Ivan says:

    Hey,
    Thank you very much for this tutorial, it saved me a lot of time!
    Cheers!

  36. Ibrahim Zoaib says:

    Hello Every one,
    I am using Weifun luo for my application and docking is working fine. But I find an issue that “x” button (Close button) not showing all the time, I have to change the size to show the button.

    Is there any bug with in the dll or Am I making any mistake?

  37. aby issac says:

    HI,
    i used weifenluo and the docking is working fine ,
    But how can i modify it so that it will re-size automatically when the screen size is changed or for that the screen is re-sized.And also how i can remove the tabs and arrange panel one next to another
    TIA
    Aby

  38. Amnaj Sriwilai says:

    Hello
    This is very good tutorial.

  39. fantar says:

    Hello , i need the .DLL i can’t find it. thanks

  40. Liz says:

    Hello

    One question, do you know how to change the color of the tabs?, I’d like to have different colors in every tab of every “Document”.

    Thank you

  41. koenaryi says:

    please help me
    i want to change document form tab font
    how can i do

  42. Prakash says:

    hi
    Thanks for the tutorial.
    Can you also make a detailed & easy to follow tutorial like this one FOR loading the layout?
    saving the layout is relatively simple DockPanel1->SaveAsXml();
    but loading is not straight forward, we need to create the components while loading right?
    No one has explained in depth about it .
    Thanks

  43. Steven Bell says:

    It’s an interesting concept, but there are at least a couple of issues make it impractical for real-world use:

    1. There is no apparent way to add scrollbars to the panels.
    2. Fonts used on the forms are ignored.

    • dreamaster says:

      Real programmers doesn’t say that.. you are in a real world.. it seems your life lives in a fantasy when i read that comment of yours.. actually you can add scrollbars programmatically.. just look at the All tools of .net, just sync it.. :)..

  44. Magaro Mahombe says:

    Hello World,

    I really need to use this in my program, however, I am struggling. forms 1, 2 and 3 both dont show when I fire up my program. I am also getting this error

    “Invalid parent form. When using DockingMdi or SystemMdi document style, the DockPanel control must be the child control of the main MDI container form.”

    Please help me. Why my form2, form3, form4 does not show. And why I am getting this error Invalid parent form.

    Even If i remove these lines. I am not getting this work.

    Form4 f4 = new Form4();
    f4.Show(dockPanel, DockState.Document);

    Also, how to I initialise the dockPanel that I am passing to form Show method?

    Thank you
    M Mahombe

  45. Ankush says:

    If i try to Dock a panel to [Document]. i.e. DockState = DockState.Document then the caption/Header is not visible. Now i am not able to drag that panel from that location. Please help

  46. Daniel Rodriguez says:

    Hi guys.

    What method could you implement for a “Closing of all documents”?

    Thanks for your help

Leave a Reply

Your email address will not be published. Required fields are marked *