In this second article of mine I would like to share with you how I made a custom control undockable. Well, before I start I want to mention that I'm not a professional so the code itself is not the best-practice.
The user should be aware of the Windows Forms and controls.
Let's dive into the code!
This is not a tutorial, so I will not define all the steps thoroughly. Just the main points will be covered here; anyway I have provided plenty of comments in the source code for reference.
Well, I made the control undockable in the following way:
- Create a Windows application project and make it MDI.
- Add a Windows Form (named "
Canvas") for adding a child window to the MDI Parent.
- Create a user control (named "
Toolbar") and add the following code to the buttons:
private void button1_Click(object sender, System.EventArgs e)
Canvas canvasForm = new Canvas();
if (this.ParentForm.IsMdiContainer == true)
canvasForm.MdiParent = this.ParentForm;
canvasForm.MdiParent = this.ParentForm.Owner;
private void button2_Click(object sender, System.EventArgs e)
if (this.ParentForm.Text.Length != 0)
this.Visible = false;
if (undockedWnd == null)
undockedWnd = new UndockedControl ();
undockedWnd.Owner = this.ParentForm;
undockedWnd.Visible = true;
this.ParentForm.Visible = false;
DrawingGUI prntForm = (DrawingGUI) this.ParentForm.Owner;
prntForm.toolBarControl1.Visible = true;
- Add this user control to the main application (MDI application). After adding the control, go and change its accessibility level from
public. I made this change in order to reach at it later on from the undocked control.
- Add a Windows Form (named
UndockedControl). Add the "
Toolbar" to this form. I also added a
ComboBox to the form for the user to change its transparency level.
- In the coding of the "
Canvas", I have included some code for the
Move event of the form in order to rearrange the layout when the scrollbars are displayed. They are not perfect and need much more improvement.
Points of interest
Well for those who are interested in the canvas background that is the gradient color, I'd like to give the following code: (I got it from Using the LinearGradientBrush.)
Add this code in the
Paint event of "
Rectangle rect = new Rectangle (pictureBox1.Location, pictureBox1.Size);
LinearGradientBrush br=new LinearGradientBrush(
StringFormat format =
Font fn = new Font("Tahoma", 9);
SizeF sf = e.Graphics.MeasureString ("Test String",fn,1024,format);
LinearGradientBrush br3 =
new LinearGradientBrush(new RectangleF(pictureBox1.Left,
new Font ("Arial", 9, FontStyle.Bold),
new Rectangle (rect.X, rect.Y, rect.Width/4, rect.Height),
I hope this article helps someone out there...if anything goes wrong or there is a better way of coding (I'm sure there is...) please let me know...
I have added some code for a flicker-free interface. I have used the .NET way to prevent flickering. I tested it on a WinXP SP2 with .NET 1.1 installed.