How to Create Custom WinForms UI Layout Workspaces for Desktop

ComponentOne offers a vast collection of controls for different platforms allowing users to develop advanced applications. One feature of advanced applications these days is providing the user with the ability to customize the workspace as per their needs, which includes showing several windows while hiding the others, placing the windows by docking them at appropriate locations, or resizing the windows.

Considering the viewers of this blog, Visual Studio IDE can be an excellent example for describing and explaining this type of workspace. It lets users customize the workspace completely based on user requirements.

The screenshot below depicts a view of the Windows Form application created in Visual Studio, with several windows open or docked at the same edge of the application using multiple tabs. The user here is free to move either of these tabs to a new edge based on their convenience, or they can close and reopen these views as and when required.

This blog will showcase how to implement the dock and float capabilities in a workspace when creating a Windows Forms application using ComponentOne DockingTab control. This control lets you organize a layout using tabs that can become floating windows or dock to different edges of an application.

We will try replicating the above state of Visual Studio, as depicted in the screenshot below. However, please note that this is just a demo view focused on dock and float operations. Hence, for simplicity's sake, all the tabs are empty for now.

Now, quickly move on to the actual implementation of the demo workspace.

Ready to Get Started? Download ComponentOne Today!

Create WinForms Application

1. Create a new .NET WinForms application by choosing the Windows Forms App template:

2. Define an appropriate name for the application, let’s say DockingTabDemo.

And we will be working with the latest .NET framework, i.e., .NET 6.0.

3. Once the application has been successfully created, we will install the C1.Win.C1Command and C1.Win.Themes NuGet packages from NuGet package manager as depicted in the screenshot below:

After successfully installing both packages, expand the Dependencies → Packages node to find both the installed packages.

The C1.Win.Command package will install the C1DockingTab and other controls, which will be used to create a customizable WinForms workspace as described above. While the C1.Win.Themes provide the C1ThemeController used to apply a theme to the application, which defines the look and feel of the application. The image below depicts all the ComponentOne WinForms controls added to the Toolbox under the C1 Winforms Controls tab:

Configure Windows Form

Since we have configured the application to work with ComponentOne DockingTab control, let’s focus on creating the workspace layout using the appropriate controls.

To begin with, define the settings for the default Windows Form found in the project, i.e., Form1.cs, as mentioned below:

Now, drag-drop the C1ThemeController to the form. You can observe that it gets added to the component tray found below the form.

We will then apply a Theme to the Windows form by handling the Form Load event and adding the following code to it:

private void Form1_Load(object sender, EventArgs e)
{
    //Get built-in theme
    var theme = C1ThemeController.GetThemeByName("Office2016Black", false);
    // Apply theme to all controls on the form
    C1ThemeController.ApplyThemeToControlTree(this, theme);
}

Create Workspace Layout

Now, let’s move on to creating the Visual Studio demo workspace using the C1DockingTab and other controls from the C1.Win.Command package.

Configure the Menu Bar

Let’s begin by configuring a menu bar for the workspace. The menu bar will define some basic functionalities, including File, Edit, and View options. The File option will provide a submenu with options to load and save the workspace layout. While the View option will have the option to hide or show various windows of the workspace.

1. Drag-drop the C1MainMenu control from the toolbox on the form. Observe that it automatically docks at the top of the form and has one Command link added to it by default. It also adds C1CommandHolder to the form, holding any commands defined for the main menu.

2. To define the File option for the menu bar, we will edit the command link available by default. Right-click on the command link and choose the Edit option from the context menu, which will open the Link to Command dialog.

3. Using this dialog, set the menu option name to File by editing the Text field and define a submenu for the option by creating a new command of type C1CommandMenu as depicted in the screenshot below:

Click on OK to link this newly created command to the command link.

4. The submenu linked to the File option has a command link added to it by default. We will remove this command link and add two new links to the submenu defining the Load Layout and Save Layout options. This can be accomplished by right-clicking the File Menu option and choosing the Edit command links option from the context menu, which opens the C1CommandLink Collection Editor dialog.

5. It can be observed from the screenshot below that the submenu already has a command link. Remove it by clicking the remove button.

6. Click on the Add button to add a submenu option to open the Link to Command dialog. Using this dialog, create a new command of type C1Command having Text property set to Load Layout and Name property set to c1Command1_LoadLayout, as depicted in the screenshot below:

Click on OK to add the command link with the linked command as the first submenu option to the File menu option.

7. Similarly, add the Save Layout submenu option as well. Here is a quick look at the C1CommandCollection editor containing the submenu items:

This completes the configuration of the first menu item having a submenu.

8. Now, let’s add the Edit option to the main menu by right-clicking on the C1MainMenu and choosing the Append Item option from the context menu, which opens the Link to Command dialog:

9. Using this dialog, create a new command of type C1Command and add it to the Main menu forming the Edit option of the main menu:

10. Lastly, we add the View option, which again contains a submenu with three options: Solution Explorer, Server Explorer, and Properties. Add the View option to the main menu by right-clicking on the C1MainMenu and choosing the Append Item option from the context menu, which opens the Link to Command dialog. Repeat steps 3 to 6 defined above to create the submenu with the specified options.

This is how the main menu looks after the complete configuration:

On executing the application, you can find all the submenus in place, as depicted in the GIF below:

Configure Workspace Windows/Tabs

In this section, we will create a few common windows from Visual Studio IDE, such as Toolbox, Solution Explorer, Output, etc., using C1DockingTab, which makes the layout completely customizable. Just like Visual Studio IDE, you can move, open and close various windows.

Also, you can move an individual tab from a window and dock them into a separate window. To provide all the floating and docking capabilities to the C1DockingTab, it must be placed inside the C1CommandDock control.

So, follow the steps to achieve the following layout at runtime:

1. Drag-drop the C1CommandDock control from the toolbox on the form. By default, it docks at the top. Set the Dock property to Bottom to dock the control to the bottom of the form.

2. Drag-drop the C1DockingTab control on the C1CommandDock control; it automatically docks to fill the C1CommandDock control.

3. You can observe that, by default, it contains one tab. To add another tab to this window, select the C1DockingTab control and click on the control’s smart tag, which provides an option to Add Page.

4. After adding the new Tab Page, you can rename both tabs using the Properties window by setting the Text property of each tab. The first tab in the window should be named Error List, and the second should be Output. The GIF below depicts the described steps in action:

5. Drag-drop the second C1CommandDock control on the form and dock to the left by setting the Dock property to the Left. Repeat steps 2 to 4 to add a DockingTab control with two new tabs/pages, i.e., Server Explorer and Toolbox.

6. Drag-drop the third C1CommandDock control on the form and dock to the right by setting the Dock property to the Right. Repeat steps 2 to 4 to add a DockingTab control with two new tabs/pages, i.e., Solution Explorer and Properties.

7. Drag-drop the last C1CommandDock control on the form and set the Dock property to Fill. Add a C1DockingTab control to it and set the ShowTabs property to false. Rename the default DockingTab Page available in this C1DockingTab control to Program.cs.

This completes the designing of a workspace layout, and this is how it looks in design mode:

You can now execute the project and experience the docking and floating capabilities of C1DockingTab control by moving the tabs and windows on the form. The GIF below depicts the same:

Implement Load/Save Layout Functionality

The Load Layout and Save Layout submenu options added to the File Menu option are expected to load any saved workspace layout and save the workspace layout with or without any changes, respectively. This section will show how we can implement the said functionality for the menu options.

To implement bind the CommandClick event of C1CommandHolder, which is raised as soon as any command links are clicked. In the event handler, we will define the code to recognize which command has been triggered and invoke the RestoreLayout and SaveLayout methods of C1DockingTab class to load and save the workspace layout, respectively.

The code snippet below implements the same:

//Handle command click events
private void c1CommandHolder1_CommandClick(object sender, C1.Win.Command.CommandClickEventArgs e)
{
   //Load Form Layoyt containing all the docking tabs
   if(e.Command == c1Command1_LoadLayout)
   {
      if (layout)
      {
         C1DockingTab.RestoreLayout(this, "layout.xml");
         MessageBox.Show("Layout loaded");
      }
      else
         MessageBox.Show("No saved layout");
    }
    //Save Form Layout containing all the docking tabs
    else if (e.Command == c1Command2_SaveLayout)
    {
       C1DockingTab.SaveLayout(this, "layout.xml");
       layout= true;
       MessageBox.Show("Layout saved");                
    }
}

The GIF below showcases the implementation in action:

Implement Hide/Show Tabs Functionality

This functionality can also be achieved by handling the CommandClick event of C1CommandHolder. After recognizing the command being triggered, the code verifies whether or not the tab being referred to is visible. If visible, it brings the tab into focus; otherwise, it is added again to the respective window and comes into focus. The code snippet below implements the same:

private void c1CommandHolder1_CommandClick(object sender, C1.Win.Command.CommandClickEventArgs e)
{
   //Load Form Layoyt containing all the docking tabs
   if(e.Command == c1Command1_LoadLayout)
   {
      if (layout)
      {
         C1DockingTab.RestoreLayout(this, "layout.xml");
         MessageBox.Show("Layout loaded");
      }
      else
         MessageBox.Show("No saved layout");
    }
    //Save Form Layoyt containing all the docking tabs
    else if (e.Command == c1Command2_SaveLayout)
    {
       C1DockingTab.SaveLayout(this, "layout.xml");
       layout= true;
       MessageBox.Show("Layout saved");                
     }
     //Show various tab pages when choosing options from View menu item
     else if(e.Command == c1Command3_SolutionExplorer)
     {    
        //Show Solution Explorer tab/window
        c1DockingTab3.TabPages.Insert(0,c1DockingTabPage5_SolutionExplorer);
        c1DockingTab3.SelectedTab = c1DockingTabPage5_SolutionExplorer;
     }
     else if (e.Command == c1Command4_ServerExplorer)
     {
        //Show Server Explorer tab/window
        c1DockingTab2.TabPages.Insert(0, c1DockingTabPage3_ServerExplorer);
        c1DockingTab2.SelectedTab = c1DockingTabPage3_ServerExplorer;
     }
     else if (e.Command == c1Command5_Properties)
     {
        //Show Properties tab/window
        c1DockingTab3.TabPages.Insert(1, c1DockingTabPage6_Properties);
        c1DockingTab3.SelectedTab = c1DockingTabPage6_Properties;
     }
}

The GIF below showcases the implementation in action:

Download the demo sample implementing the described scenario for detailed implementation details.

For more information on C1DockingTab control, refer to documentation and demos.

Ready to Get Started? Download ComponentOne Today!