How to build a layout similar to Visual Studio

Let’s see how to build a layout similar to Visual Studio using the DXDocking Suite. Below is the screenshot of the Dock Windows -> VS2010 Docking demo.

The window layout contains the following elements:

The Solution Explorer panel.

To display such a panel, use a single Layout Panel item.

[XAML]
<dxdo:LayoutPanelCaption="Solution Explorer"/>

Several panels are displayed as tabs at the bottom.

There are several ways to display tabs in DXDocking. Please refer to How to display items in tabs to be aware of all available options. In this scenario, use a Tabbed Group, as it supports reordering panels, removing and adding new panels.

[XAML]
<dxdo:TabbedGroup><dxdo:LayoutPanelCaption="Error List"/><dxdo:LayoutPanelCaption="Output"/><dxdo:LayoutPanelCaption="Breakpoints"/></dxdo:TabbedGroup>

The document area.

While the Tabbed Group is intended to display static panels like toolbars, background information, etc., Document Groups can be used to display dynamic content (like opened documents) and provides the functionality similar to Visual Studio’s document area.

[XAML]
<dxdo:DocumentGroup><dxdo:DocumentPanelCaption="MainWindow.xaml"/><dxdo:DocumentPanelCaption="MainWindow.xaml.cs"/></dxdo:DocumentGroup>

To arrange these elements, use a combination of vertical and horizontal Layout Groups.

[XAML]
<dxdo:LayoutGroupOrientation="Horizontal"><dxdo:LayoutGroupOrientation="Vertical"><dxdo:DocumentGroup><dxdo:DocumentPanelCaption="MainWindow.xaml"/><dxdo:DocumentPanelCaption="MainWindow.xaml.cs"/></dxdo:DocumentGroup><dxdo:TabbedGroup><dxdo:LayoutPanelCaption="Error List"/><dxdo:LayoutPanelCaption="Output"/><dxdo:LayoutPanelCaption="Breakpoints"/></dxdo:TabbedGroup></dxdo:LayoutGroup><dxdo:LayoutPanelCaption="Solution Explorer"/></dxdo:LayoutGroup>

Auto-hide panels.

To create such panels, define an Auto-Hide Group with several panels.

[XAML]
<dxdo:DockLayoutManager.AutoHideGroups><dxdo:AutoHideGroupDockType="Left"><dxdo:LayoutPanelCaption="Toolbox"/><dxdo:LayoutPanelCaption="Server Explorer"/></dxdo:AutoHideGroup></dxdo:DockLayoutManager.AutoHideGroups>