Back to Devexpress

Step 2 - Dock Manager

windowsforms-15776-build-an-application-choose-application-ui-visual-studio-inspired-ui-step-2-dock-manager.md

latest3.6 KB
Original Source

Step 2 - Dock Manager

  • Jan 10, 2025
  • 3 minutes to read

In this step, you will learn how to use the Document Manager component along with the Dock Manager in a single application. The Dock Manager provides centralized control over the behavior and view settings of the dock panels it owns.

  1. Locate the DockManager component in the Visual Studio ToolBox and drop it onto the form.

  2. Invoke the DockManager smart tag and add the required DockPanels via the corresponding links.

  3. Drag the panels to rearrange and dock them to specific places via docking hints.

  4. Now, when both DockManager and DocumentManager are used in a single form, you will gain several unique features from these controls. Their two main features are listed below.

  5. Dock panels display default buttons - Close, Auto-hide and Maximize. You can hide these buttons via the BaseDockOptions.ShowCloseButton, BaseDockOptions.ShowAutoHideButton and BaseDockOptions.ShowMaximizeButton properties and/or add your own Header Buttons. The figure below illustrates a custom ‘Print’ button added to the Errors panel.

As you can see, the custom Print button icon is painted in the skin color on hover. This feature is called Glyph Skinning , and allows you to paint your own custom buttons in the same pattern as default buttons. You can also use it to build monochrome UIs for your applications, where item captions and glyphs are painted in the same color. Many other controls besides DockManager support this feature. See the Glyph Skinning topic for a complete list.

All DevExpress controls and their elements use images and image settings from skins. To modify images of default DockPanel buttons (Close, Auto-Hide), run the WinForms Skin Editor and create a custom skin.

  • In Skin Editor, go to the “Bars” collection and expand the “Dock Panel Button Glyphs” item.
  • Select the required item state (for example, Normal) and load a new glyph. You can also colorize an existing image. To do this, double-click any glyph panel to open the Edit SVG Palette dialog, select the required glyph and set its new color.
  • Save your custom skin, export it as a .dll assembly, and add this library to your Visual Studio project. See this help topic for more information: Export and Apply Custom Skins.

Your Visual Studio-inspired application is almost complete. The final step is to add an application menu based on the Bar Manager component.

See Also

Step 1 - Document Manager

Step 3 - Bar Manager