Dock Control for WinForms C# Tutorial
The following is a tutorial that shows how to create a shell for a report viewer or explorer and demonstrates the layout of ToolWindow and DocumentWindows. In this tutorial, we will find that a ToolWindow will be placed on the left to represent a list of reports and three DocumentWindows, each of which represents a report, will be placed on the right side of the form in Dock. This tutorial will also illustrate how to add a Tree View control to the created windows and synchronize the active Dock Window by using the Tree View instance.
Configure the Dock Control in Windows Forms
- Create a Windows Forms application and drag and drop a Dock control on the Form
- Switch to the Properties Windows and set the property of Dock as Fill.
- Open the Dock Advanced Layout Designer dialog by choosing the Dock Smart Tag and click the Show Advanced Layout Designer.
- Dock a Tool Window at the left by clicking the left green arrow on the top of the Ribbon Bar.
- Add 3 instances of DocumentWindows by clicking on the Add DocumentWindow button on the Ribbon Bar.
- Save the Changes of the layout to the Dock and Close Dock Advanced Layout Designer dialog by clicking the Save and Close button. The Dock Control advanced layout designer offers entire drag and drop, user interaction support for more complex scenarios.
- Users can choose the ToolWindow on the left of the designer to verify if the currently chosen tool is ToolWindow in the Properties Window in VS. Set the property of the ToolWindow Text to Reports
- Choose a DocumentWindows in the designer by clicking the tab, then clicking inside the client area.
- Change the Name property of the DocumentWindow as caProductList and set the Text property to Product List.
- Choose next in DocumentWindow and change the Name property as caProductByClass and set the Name of Text property as Product By Class.
- Choose the final DocumentWindow and change the Name property as caTop8Customers and change the Name of Text property as Top 8 Customers.
- Drag and Drop a TreeView control to the Reports ToolWindow and change the Dock property of the Control as Fill.
- Check if the WinFormsControls.UI and WinFormsControls.UI.Dock has been used in the C# using section of the code.
- Create a Form Load event handler and copy the C# code below and paste to the event handler.
- Create a SelectedNodeChanged event handler and add the following C# code to it.
- Debug the project to run the application and you will find the completed application with Dock