Using the Dock control

The following topic presents you the most important info about implementing and using MindFusion dock control.

Creating a Dock Control instance

The dock control is represented by the DockControl class. It is contained in the MindFusion.UI.WinForms.dll assembly. That is the only dll you need to add to your project in order to use the dock control. The dock control is implemented as a standard .NET WinForms control and you can drag and drop it from the Toolbox if you have added the Mindusion UI controls to the VS toolbox panel.

Customizing the Dock Control Appearance

The DockControl class exposes a variety of properties that let you customize the control: BorderColor and ButtonForeColor define how the border and the buttons of the control will look. The content is drawn with gradient brush and ContentStartColor and ContentEndColor define its colors. The header is also gradient and is defined by HeaderStartColor and HeaderEndColor. There are lots of other useful appearance properties - check the full list here.

Dock Items

The DockControl.Items property is the property that contains all dock items. They are instances of the DockItem class. Once you create a DockItem you just add it to the Items collection:

C#

DockItem titleItem = new DockItem() { Header = "Recipe Name", Id = "Name" };
dockControl1.Items.Add(titleItem);

In the code above we use the Header property, which provides the text for the dock item''s header and the Id property. The Id is important because that's how we can identify dock items.

Another important property is DockStyle. It takes one of the .NET DockStyle enumeration elements and defines how the item will be docked. Possible values are None, Fill, Left, Bottom etc.

Each DockItem contains a .NET Control that is set through the Content property. There is no limit as to the type of controls that can be hosted in a DockItem.

The following example sets the content of a DockItem to an image:

C#

PictureBox pictureBox = new PictureBox();

// Stretches the image to fit the pictureBox.
pictureBox.SizeMode = PictureBoxSizeMode.Zoom;
pictureBox.BackColor = Color.FromArgb(251, 232, 240);
pictureBox.ClientSize = dockItem.Size;
pictureBox.Image = Image.FromFile("../../images/cats.jpg");

dockItem.Content = pictureBox;

Custom dock buttons

It is possible to add custom buttons to title-bars of dock items. Such buttons are represented as instances of the TitleBarButton class, and can be added to the following collections of DockControl: DockedTitleBarButtons, UndockedTitleBarButtons, TabbedTitleBarButtons. Buttons can be drawn by callback method bound to Draw event or by directly seting the ButtonImage property. There are default title bar buttons available like close button, auto hide button and button that shows context menu. They are exposed as static properties of the TitleBarButtons class.

C#

var myTitleButton = new TitleBarButton();
myTitleButton.ButtonPen = new Pen(Color.Red);
myTitleButton.ButtonImage = Image.FromFile(...);
//myTitleButton.Draw += MyTitleButton_Draw;
myTitleButton.OnClick += MyTitleButton_OnClick;
dockControl1.DockedTitleBarButtons.Add(myTitleButton);

private void MyTitleButton_OnClick(object sender, MouseEventArgs e)
{
    MessageBox.Show("Custom button clicked", "Custom", MessageBoxButtons.OK);
}

private void MyTitleButton_Draw(object source, DrawEventArgs e)
{
    var tbb = source as TitleBarButton;
    if (tbb == null)
        return;
    e.Graphics.DrawArc(tbb.ButtonPen, new Rectangle(tbb.X, tbb.Y, tbb.Width, tbb.Height), 0, 360);
}