Easy Tear Off Tool Strip

About the same time I saw this how-to from Microsoft, I was starting a project that had a need for a “tear-off tool strip.” When I got to the part of my project to implement this, I went back to the article, and decided it was way too complicated for what I needed. I just needed to be able to move a given toolbox outside of the parent form. So, I did it myself and made it much, much easier.

For this example, we will pretend we are making a text editor with the editor tools as a tool box that can be torn out of the parent form. So, I made a simple windows form and added a tool-strip with a button on it, and a text box.

Next, I created a second windows form to use as our tool box.

Be sure that you set the FormBorderStyle to FixedToolWindow.
Now for the code. In the parent form, we need to set a variable for the loaded width of the form:

public int FormWidth { get; set; }

Be sure to set the variable to public so the tool box can access it. We set the variable in the forms load event:

public void Form1_Load(object sender, EventArgs e)
{
    this.FormWidth = this.Width;
}

Next, add the click event for the ToolBox button:

public void toolBoxToolStripMenuItem_Click(object sender, EventArgs e)
{
    ToolBox box = new ToolBox();
    //Toplevel controls cannot be added to a form, so set TopLevel to false
    box.TopLevel = false;
    this.Controls.Add(box); 

    //Make Form1 wider to house the ToolBox.
    this.Width += box.Width + 50;

    //Set the location of the box
    box.Location = new Point(this.FormWidth + 25, 25);

    //Set the ToolBar flag to true
    box.ToolBar = true;

    //Show the box.
    box.Visible = true;
}

That’s all the code we need for our parent form. In our tool box we need a public accessible flag and a move event handler:

public bool ToolBar { get; set; } 

public void ToolBox_Move(object sender, EventArgs e)
{
    if (this.ToolBar)
    {
        this.ToolBar = false;
        Form1 parent = (Form1).ParentForm;
        parent.Width = parent.FormWidth;
        this.DesktopLocation = MousePosition;
        parent.Controls.Remove(this);
        this.TopLevel = true;
    }
}

And that’s all there is to it.

When we click the ToolBar button the window will expand and the tool box is loaded inside the parent. If we try to move the ToolBox it will “tear off” the parent form.