Layout Management with the WinForms Dock Control

In this post we will show you how to build a sample application with customizable layout based on the WinForms Dock control, which is part of MindFusion WinForms pack. You can find further details about the control at its web page.

For the purpose of the demonstration we’ve chosen an entertaining topic – a cooking recipes electronic book. Our book so far has only three recipes, all for sweets. Lets start by looking at the

I. Architecture of the sample.

The sample has two custom classes – Ingredient and Recipe. Each Ingredient has quantity, name and an image, which illustrates it. The Recipe class holds a strongly typed list with Ingredient objects, the title for each recipe, an image for the recipe, an icon for the recipe and preparation instructions.

The application consists of the dock control, which contains four DockItem-s : for the recipes, for their images, for their ingredients and with the preparation instructions. Any dock item can be dragged, dropped, aligned, minimized, hidden etc.

The API of the cook book application

The API of the cook book application

II. The Dock Control.

We create an empty WinForms project and add the Dock control from the toolbox. The dock control fills the entire client area:

this.dockControl1.Dock = System.Windows.Forms.DockStyle.Fill;         
this.dockControl1.Location = new System.Drawing.Point(0, 0);           
this.dockControl1.Size = new System.Drawing.Size(784, 562);

These properties are set in the Property grid.

Each dock item is created with a title and id, which helps us identify it.

titleItem = new DockItem() { Header = "Recipe Name", Id = "Name" };
titleItem.DockStyle = DockStyle.Left;      
titleItem.Content = GetContent("Name");

The DockStyle property is responsible for the initial layout of the dock item. You can choose among various dock styles – fill, bottom, top and more.

The GetContent method is very important. It prepares the controls that will be placed into each dock item and returns the appropriate one according to the parameter.

Once the dock item is created, let’s not forget to add it:

dockControl1.Items.Add(titleItem);

III. Creating the Content.

Let’s see how the content for a dock item is created. Let’s take the grid with the ingredients. It is identified with the “Ingredients” id:

private Control GetContent(string contentType)
{
  Control control = null;
  ....
  else if (contentType == "Ingredients")
         {                
             grid = new DataGridView();
             grid.DefaultCellStyle.BackColor = Color.FromArgb(247, 226, 189);
             grid.Dock = DockStyle.Fill;
             grid.MultiSelect = false;
             grid.DataSource = selectedRecipe.Ingredients;
             grid.RowTemplate.MinimumHeight = 35;
            
             grid.RowHeadersWidthSizeMode =
            DataGridViewRowHeadersWidthSizeMode.DisableResizing;
             grid.ColumnHeadersHeightSizeMode = DataGridViewColumnHeadersHeightSizeMode.DisableResizing;
             grid.AutoSizeColumnsMode = DataGridViewAutoSizeColumnsMode.Fill;
             grid.SelectionMode = DataGridViewSelectionMode.FullRowSelect;
             grid.BackgroundColor = Color.FromArgb(253, 244, 247);

             control = grid; 
         }
...
return control;

The idea is clear: you create the control, which will be rendered in the dock item and assign it to DockItem.Content. Here we make different customization for the grid – we change the color of table rows, adjust the height, turn off multiple row select and more.

IV. Changing the Content.

We change the content by handling the SelectedIndexChanged event for the ListView, which lists our recipes. When the user selects a new list item, we extract its Recipe and change the content of the other DockItem-s:

selectedRecipe = recipes[recipesListView.SelectedIndices[0]];
tb.Text = selectedRecipe.Preparation;
grid.DataSource = selectedRecipe.Ingredients;
pictureBox.Image = Image.FromFile(selectedRecipe.ImageUrl);

Here is the final output of the sample application:

MindFusion WinForms Dock COntrol

A Sample electronic cook book based on MindFusion WinForms Dock Control

You can download the sample directly from this link:

MindFusion WinForms Layout Control Sample: Electronic Cook Book in C#

MindFusion WinForms Layout Control Sample: Electronic Cook Book in VB.NET

Enjoy the fast, easy and straight-forwarded manner in which you can create a WinForms application with a flexible layout and multiple panels.

MindFusion.WinForms Pack 2014.R3

MindFusion is pleased to announce the release 2014.R3 of the Pack for WinForms component suite. Here is an overview of the new features:

diagram16x16MindFusion.Diagramming

Export to Visio 2013 files
The new Visio2013Exporter class lets you export the contents of Diagram and DiagramDocument objects to Visio 2013 VSDX files. You must add a reference to the MindFusion.Diagramming.Export.Visio.dll assembly beforehand. Further details on how to use the Visio2013Exporter can be found in the forum or the online help.

Headers and Footers in PDF
You can now add a header and a footer to all exported to PDF pages. Their content and font are customizable – use HeaderFormat, HeaderFont, FooterFormat and FooterFont to do it.

The PdfExporter

The PdfExporter

Calendar-16x16MindFusion.Scheduling

New Holiday Providers
You can use one of the new holiday providers, added to the MindFusion.HolidayProviders.dll assembly – FranceHolidayProvider, GermanyHolidayProvider, RussiaHolidayProvider, and UKHolidayProvider.

Miscellaneous

  • A new Drawing event enables custom drawing of calendar elements before their default rendering.
  • Improved support for partial databinding.

Spreadsheet-16x16MindFusion.Spreadsheet

Export to XLSX (Office Open XML) format
Use the new ExcelExporter class to export MindFusion.Spreadsheet Workbook objects to Excel. To export a workbook to XLSX, create an instance of the ExcelExporter class and call its Export method, passing the Workbook object as parameter.

Export to ODS (OpenDocument Spreadsheet) format
The new CalcExporter class lets you export MindFusion.Spreadsheet Workbook objects to the OpenDocument format. To export a workbook, create an instance of the CalcExporter class and call its Export method, passing the Workbook object as parameter.

Export to XHTML and MHTML format
Two new classes – HtmlExporter and MhtmlExporter – let you export MindFusion.Spreadsheet Workbook objects to (X)HTML and MHTML files. To export a workbook, create an instance of the respective exporter class and call its Export method, passing the Workbook object as parameter.

Export to XHTML.

Export to XHTML.

Moving cell ranges
You can move cells and cell ranges programmatically as well interactively. In order to move a column/row programmatically you should call one of the Move overloads of the of the ColumnCollection or RowCollection classes respectively, and specify the column/row to move and the desired location. To move columns or rows interactively, select the columns or rows entirely, click on any of the selected column or row headers and drag.

Find and replace
You can now use a variety of methods to search and replace texts. For searching, use the Find and FindAll methods. For replacing text use Replace and ReplaceAll. The new FindReplaceForm class (contained in the MindFusion.Spreadsheet.WinForms.StandardForms.dll assembly) can be used to facilitate search and replace operations inside a workbook.

Improved in-place editing
In-place formula editing has been extended with automatic literal, string, cell and cell range coloring
and context-sensitive tooltip information for functions.

In-place editing.

In-place editing.

Miscellaneous

  • The parameters of the Export methods of some exporters have been reordered to improve consistency. Now the Worksheet/Workbook being exported is always the first argument.
  • The HyperlinkForm constructors now require an addition argument of type Workbook.
  • New PageOrientation property added to the PdfExporter class.

uiMindFusion.UI

DockControl
Layout serialization has been added to the DockControl.

The trial version is available for direct download from this link:

Download MindFusion.WinForms Pack 2014.R3

If you run into problems with any of the components, please let us know. We shall be glad to assist you. MindFusion is proud with its excellent technical support – the majority of the questions are answered within hours of receiving them.

About MindFusion.WinForms Pack: A set of five WinForms programming components that provide your application with a rich choice of diagramming, charting, scheduling, mapping, reporting and gauge features. The tools are very easy to implement and use. They boast intuitive API and various step-by-step tutorials to get you started. Both online and offline documentation is available.

A sample browser presents you with all the samples for each control to let you easily navigate to what you need. You can check some of the features of each component right now if you look at the online demos:

Visit the features – page of the components for more information about their capabilities:

You can check the prices and licensing scheme here. All components are royalty-free.