Click here to Skip to main content
Click here to Skip to main content

Tip: Minor Improvements on the DockPanel Suite, Part 1

, 6 Jul 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
This tip shows how to add support for New Horizontal Tab Group and New Vertical Tab Group commands to the Window menu of an application using the DockPanel Suite by Weifen Luo, and some other minor improvements to help decided if at least one of your windows is docked to the side of the main form an

Introduction

The DockPanel suite of UI tools, created by Weifen Luo, is a great open-source solution to making user interfaces that mimic the Visual Studio tabbed/docking windows environment.
 
I wanted to make a Window menu for the menu bar of my form that mimics that found in the Visual Studio environment. So I decided to derive off the main DockPanel class and call it StudioDockPanel and then put my minor improvements in this code.
 
One of the improvements is to implement the New Horizontal Tab Group and the New Vertical Tab Group commands that appear on the menu bar of the Visual Studio environment. These commands allow you to have one set of tabs "stacked" on top of another.

Code

To start off, first I derived a class, StudioDockPanel off of the DockPanel class provided by Weifen Luo:
namespace MyProject
{
    public class StudioDockPanel : DockPanel
    {
 
    }
}
Next, I add an internal function, NewHorizontalTabGroup, to it:
internal void NewHorizontalTabGroup()
{
    if (this.DocumentDockWindow == null
        || this.ActiveDocument == null)
        return; // just no-op on error

    IDockContent CurrentDocument = this.ActiveDocument;
    DockPane CurrentPane = this.ActiveContent.DockHandler.Pane;
 
    // create a new dock pane to the right of the current pane
    // and then transfer the document to the new pane
    DockPane NewPane = DockPaneFactory.CreateDockPane(CurrentDocument,
        CurrentPane, DockAlignment.Bottom, 0.5, true);
    NewPane.Show();
}
The DocumentDockWindow is a property I added in order to quickly find which of the DockPanel.DockWinodws is the one holding the tabbed document views:
public DockWindow DocumentDockWindow
{
    get
    {
        foreach (DockWindow Window in DockWindows)
            if (Window.DockState == DockState.Document)
                return Window;
        return null;
    }
}
It's very straightforward; it just searches through the DockWindows list and returns the one whose DockState is set to DockState.Document. This is a public property, so you can drop this in your current code.
 
Moving along, now let's see how adding a new vertical tab group goes:
internal void NewVerticalTabGroup()
{
    if (this.DocumentDockWindow == null
        || this.ActiveDocument == null)
        return; // just no-op on error

    IDockContent CurrentDocument = this.ActiveDocument;
    DockPane CurrentPane = this.ActiveContent.DockHandler.Pane;
 
    // create a new dock pane to the right of the current pane
    // and then transfer the document to the new pane
    DockPane NewPane = DockPaneFactory.CreateDockPane(CurrentDocument,
        CurrentPane, DockAlignment.Right, 0.5, true);
    NewPane.Show();
}
Now, when you have a Window menu, you want to update the UI of the menu commands themselves so they cannot be chosen unless there are more than 1 tabbed documents open. Otherwise, there is no content available to add to a new pane! For this purpose, i implemented a TwoOrMoreOpenDocumentWindows property:
public bool TwoOrMoreOpenDocumentWindows
{
    get
    {
        if (this.DocumentDockWindow == null)
            return false;
        return this.DocumentDockWindow.VisibleNestedPanes[0].Contents.Count > 1;
    }
}
The IsDocumentVisible property tells you if there is an active document at all or not:
public bool IsDocumentVisible
{
    get
    {
        return this.ActiveDocument != null;
    }
}
Finally, there is a requirement to know if there is at least one pane docked to the side of the window. This is to update the user interface and enable/disable the appropriate menu commands (Float, Dock, Dock as Tabbed Document, AutoHide, Hide etc.). So this helps us to put in a IsAtLeastOnePaneDocked property:
public bool IsAtLeastOnePaneDocked
{
    get {
        foreach (DockWindow Window in DockWindows)
            if (Window.DockState != DockState.Document
                && Window.VisibleNestedPanes.Count > 0)
                return true;
        return false;
    }
}
And there we are. There are more updates and tips or tricks to come, as I make further enhancements to this library in order to bring it closer to UI standards for this type of environment.

Usage

To implement Window menu commands Float, Dock, Dock As Tabbed Document, AutoHide, and Hide, we do the following (the veriable names for the menu commands should be pretty self-explanatory):
private void FloatWindow_Click(object sender, EventArgs e)
{
    if (this.MainDockPanel.ActiveContent == null)
        return;
    this.MainDockPanel.ActiveContent.DockHandler.DockState = DockState.Float;
}
 
private void DockWindow_Click(object sender, EventArgs e)
{
    if (this.MainDockPanel.ActiveContent == null)
        return;
    this.MainDockPanel.ActiveContent.DockHandler.DockTo(
        this.MainDockPanel, DockStyle.Left);
}
 
private void DockWindowAsTabbedDocument_Click(object sender, EventArgs e)
{
    if (this.MainDockPanel.ActiveContent == null)
        return;
    this.MainDockPanel.ActiveContent.DockHandler.DockState = DockState.Document;
}
 
private void AutoHideWindow_Click(object sender, EventArgs e)
{
    if (this.MainDockPanel.ActiveContent == null)
        return;
    switch (this.MainDockPanel.ActiveContent.DockHandler.DockState)
    {
        case DockState.DockLeft:
            this.MainDockPanel.ActiveContent.DockHandler.DockState = DockState.DockLeftAutoHide;
            break;
        case DockState.DockBottom:
            this.MainDockPanel.ActiveContent.DockHandler.DockState = DockState.DockBottomAutoHide;
            break;
        case DockState.DockRight:
            this.MainDockPanel.ActiveContent.DockHandler.DockState = DockState.DockRightAutoHide;
            break;
        case DockState.DockTop:
            this.MainDockPanel.ActiveContent.DockHandler.DockState = DockState.DockTopAutoHide;
            break;
        default:
            break;
    }
}
 
private void HideWindow_Click(object sender, EventArgs e)
{
    if (this.MainDockPanel.ActiveContent == null)
        return;
    this.MainDockPanel.ActiveContent.DockHandler.Hide();
}
 
private void AutoHideAll_Click(object sender, EventArgs e)
{
    foreach (DockContent content in this.MainDockPanel.Contents)
    {
        switch (content.DockState)
        {
            case DockState.DockLeft:
            case DockState.DockLeftAutoHide:
                content.DockState = DockState.DockLeftAutoHide;
                break;
            case DockState.DockBottom:
            case DockState.DockBottomAutoHide:
                content.DockState = DockState.DockBottomAutoHide;
                break;
            case DockState.DockRight:
            case DockState.DockRightAutoHide:
                content.DockState = DockState.DockRightAutoHide;
                break;
            case DockState.DockTop:
            case DockState.DockTopAutoHide:
                content.DockState = DockState.DockTopAutoHide;
                break;
            default:
                break;
        }
    }
}
 
private void NewHorizontalTabGroup_Click(object sender, EventArgs e)
{
    this.MainDockPanel.NewHorizontalTabGroup();
}
 
private void NewVerticalTabGroup_Click(object sender, EventArgs e)
{
    this.MainDockPanel.NewVerticalTabGroup();
}
 
private void ResetWindowLayout_Click(object sender, EventArgs e)
{
    // TODO: Add code here to reset the window layout to the default
    // Make sure to prompt the user to confirm
}
Finally, you'll want to update the Window menu commands appropriately:
// This is a handler for the DropDownOpening event of the Window menu
private void UpdateWindowMenu(object sender, EventArgs e)
{
    int itemCount = windowMenu.DropDownItems.Count;
    if (windowMenu.DropDownItems[itemCount - 1] is ToolStripSeparator)
        windowMenu.DropDownItems.RemoveAt(itemCount - 1);
    this.CloseAllDocuments.Enabled =
        this.MdiChildren.Length > 0;
    this.AutoHideAll.Visible = this.MainDockPanel.IsAtLeastOnePaneDocked;
    this.NewHorizontalTabGroup.Visible = this.NewHorizontalTabGroup.Enabled = this.MainDockPanel.IsDocumentVisible
        && this.MainDockPanel.TwoOrMoreOpenDocumentWindows;
    this.NewVerticalTabGroup.Visible = this.NewVerticalTabGroup.Enabled = this.MainDockPanel.IsDocumentVisible
        && this.MainDockPanel.TwoOrMoreOpenDocumentWindows;
    if (this.MainDockPanel.ActiveContent == null)
    {
        this.FloatWindow.Enabled =
            this.DockWindow.Enabled =
            this.AutoHide.Enabled =
            this.DockWindowTabbedDocument.Enabled =
            this.HideWindow.Enabled = false;
        return;
    }
    switch (this.MainDockPanel.ActiveContent.DockHandler.DockState)
    {
        case DockState.Document:
        case DockState.Unknown:
            this.FloatWindow.Enabled = true;
            this.DockWindow.Enabled = true;
            this.DockWindowTabbedDocument.Enabled = false;
            this.AutoHide.Enabled = false;
            this.HideWindow.Enabled = false;
            break;
        case DockState.DockBottom:
        case DockState.DockBottomAutoHide:
        case DockState.DockLeft:
        case DockState.DockLeftAutoHide:
        case DockState.DockRight:
        case DockState.DockRightAutoHide:
        case DockState.DockTop:
        case DockState.DockTopAutoHide:
            this.FloatWindow.Enabled = true;
            this.DockWindow.Enabled = false;
            this.DockWindowTabbedDocument.Enabled = true;
            this.AutoHide.Enabled = true;
            this.HideWindow.Enabled = true;
            break;
        case DockState.Float:
            this.FloatWindow.Enabled = false;
            this.DockWindow.Enabled = true;
            this.DockWindowTabbedDocument.Enabled = true;
            this.AutoHide.Enabled = false;
            this.HideWindow.Enabled = true;
            break;
        default:
            break;
    }
}
And there you have it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Brian C Hart
Software Developer (Senior) Corrugated Technologies, Inc.
United States United States
From Fridley, Minnesota and I like computer programming! When I got started, I was working mostly with Windows GUI programming in C/C++. Then later on I worked with COM/DCOM for a school internship. I used COM/DCOM to write an ad hoc cluster server and job-running environment for a cluster of 24 Windows-based high-end visualization workstations. I moved on to C# and have been working in C# and Windows Forms ever since. I have yet to embrace Silverlight Smile | :)
Follow on   Twitter

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141223.1 | Last Updated 6 Jul 2011
Article Copyright 2011 by Brian C Hart
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid