LayoutPanel Class

A dock panel. You can use a LayoutPanel in dock and layout UIs.

Namespace: DevExpress.Xpf.Docking

Assembly: DevExpress.Xpf.Docking.v21.2.dll

NuGet Package: DevExpress.Wpf.Docking

Declaration

C#

public class LayoutPanel :
    ContentItem,
    IGeneratorHost,
    IClosable,
    ILayoutContent

VB.NET

Public Class LayoutPanel
    Inherits ContentItem
    Implements IGeneratorHost,
               IClosable,
               ILayoutContent

Related API Members

The following members return LayoutPanel objects:

• ClosedPanelCollection.Item[String]
• DockControllerBase.AddPanel(DockType)
• DockControllerBase.AddPanel(Point, Size)
• IDockController.AddPanel(DockType)
• IDockController.AddPanel(Point, Size)

Remarks

Create LayoutPanels

You should add LayoutPanels in a group. You can use the LayoutGroup, FloatGroup, AutoHideGroup and TabbedGroup as a LayoutPanel’s parent group. This section describes how to add LayoutPanels to these DockLayoutManager groups.

Note

The DockLayoutManager should have a root group.

Topic: Layout Groups

Side-By-Side

XAML

<dxdo:DockLayoutManager>
    <dxdo:LayoutGroup Caption="LayoutRoot">
        <dxdo:LayoutPanel Caption="Panel1"/>
        <dxdo:LayoutPanel Caption="Panel2"/>
        <dxdo:LayoutPanel Caption="Panel3"/>
    </dxdo:LayoutGroup>
</dxdo:DockLayoutManager>

Next to a LayoutGroup

Combine panels into a LayoutGroup to create this layout type.

XAML

<dxdo:DockLayoutManager>
    <dxdo:LayoutGroup Caption="LayoutRoot">
        <dxdo:LayoutPanel Caption="Panel1"/>
        <dxdo:LayoutGroup Caption="LayoutGroup">
            <dxdo:LayoutPanel Caption="Panel2"/>
            <dxdo:LayoutPanel Caption="Panel3"/>
        </dxdo:LayoutGroup>
    </dxdo:LayoutGroup>
</dxdo:DockLayoutManager>  

Tab Container

Refer to the TabbedGroup class for more information.

XAML

<dxdo:DockLayoutManager>
    <dxdo:LayoutGroup Caption="LayoutRoot">
        <dxdo:TabbedGroup>
            <dxdo:LayoutPanel Caption="Panel1"/>
            <dxdo:LayoutPanel Caption="Panel2"/>
            <dxdo:LayoutPanel Caption="Panel3"/>
        </dxdo:TabbedGroup>
    </dxdo:LayoutGroup>
</dxdo:DockLayoutManager>

Float Group

Refer to the FloatGroup class for more information.

XAML

<dxdo:DockLayoutManager>
    <dxdo:DockLayoutManager.FloatGroups>
        <dxdo:FloatGroup Caption="FloatGroup">
            <dxdo:LayoutPanel Caption="Panel1"/>
            <dxdo:LayoutPanel Caption="Panel2"/>
            <dxdo:LayoutPanel Caption="Panel3"/>
        </dxdo:FloatGroup>
  </dxdo:DockLayoutManager.FloatGroups>
</dxdo:DockLayoutManager>

Auto-Hide Group

Refer to the AutoHideGroup class for more information.

XAML

<dxdo:DockLayoutManager>
    <dxdo:DockLayoutManager.AutoHideGroups>
        <dxdo:AutoHideGroup Caption="AutoHideGroup">
            <dxdo:LayoutPanel Caption="Panel1"/>
            <dxdo:LayoutPanel Caption="Panel2"/>
            <dxdo:LayoutPanel Caption="Panel3"/>
        </dxdo:AutoHideGroup>
    </dxdo:DockLayoutManager.AutoHideGroups>
</dxdo:DockLayoutManager>

Customize LayoutPanels

Property	Description
Caption and CaptionImage	Specify a panel’s caption and image.
CaptionTemplate	Specifies the template used to visualize the current item’s BaseLayoutItem.Caption.
ControlBoxContentTemplate	Specifies the template that defines how the object assigned to the BaseLayoutItem.ControlBoxContent property is displayed onscreen.
HorizontalScrollBarVisibility and VerticalScrollBarVisibility	Specify a panel’s horizontal and vertical scroll bar visibility.
ItemHeight and ItemWidth	Specify a panel’s height and width.
ShowBorder	Specifies whether the panel’s border is visible.
ShowInDocumentSelector	Specifies whether the current panel is listed in the Document Selector.
TabBackgroundColor	Specifies the background color for the panel’s tab header.

Content

Use the ContentItem.Content property to specify a panel’s content. In XAML, this property is initialized by an element added between the start and end LayoutPanel tags.

Refer to the following topic for more information: How to create a simple layout of dock panes.

Note

Do not place a DocumentPanel into a LayoutPanel, and vice versa.

AutoHide Panels

State

Use the AutoHideExpandState property to specify the panel’s auto-hide state. Refer to the AutoHideGroup class for more information.

Buttons

You can use the following properties to specify whether the button is displayed when the panel is auto-hidden:

Property	Button
ShowCollapseButton	Collapse
ShowExpandButton	Expand
ShowHideButton	Hide
ShowPinButton	Pin

Floating Panels

State

Use the DockItemState property to specify whether the panel is docked, auto-hidden, floating, or closed. Refer to the FloatGroup class for more information.

Window State

You can use the panel’s IsMaximized and IsMinimized properties to get whether the panel is maximized or minimized.

Restore Button

Use the ShowRestoreButton property to specify whether the restore button is displayed within the panel.

Runtime Operations

Dock UI

You can use the DockLayoutManager.DockController object’s methods to control docking behavior.

Method	Description
AddPanel	Creates a LayoutPanel and docks it at the specified side of the DockLayoutManager container (root group).
Close(BaseLayoutItem)	Closes the specified item.
CloseAllButThis(BaseLayoutItem)	Closes all items except the specified one within this item’s container.
Dock	Docks the specified item. This method is in effect for newly created, floating, auto-hidden, or closed (hidden) items.
Float(BaseLayoutItem)	Makes the specified item floating.
Hide	Enables the auto-hide mode for the item/panel and hides it at a corresponding edge of the DockLayoutManager container.
Rename(BaseLayoutItem)	Starts dock item renaming.
Restore(BaseLayoutItem)	Restores a closed (hidden) panel at its previous dock position.

Layout UI

You can use the DockLayoutManager.LayoutController object’s methods to control layout behavior.

• LayoutController.Activate,
• LayoutController.CancelRenaming,
• LayoutController.ChangeGroupOrientation,
• LayoutController.CreateCommand,
• LayoutController.EndRenaming,
• LayoutController.Group,
• LayoutController.Hide,
• LayoutController.HideSelectedItems,
• LayoutController.Move,
• LayoutController.Rename,
• LayoutController.Restore,
• LayoutController.SetGroupBorderStyle,
• LayoutController.Ungroup.

Events

The following events allow you to control dock operations.

Event	Description
DockLayoutManager.DockItemStartDocking	Fires when a docking operation starts, and allows you to prevent this operation.
DockLayoutManager.DockItemDocking	Fires before a dock item is dragged over dock hints, and allows you to prevent dock zones from being displayed.
DockLayoutManager.DockItemEndDocking	Fires after a dock item has been dropped, and allows you to prevent this action.

Closed Panels

When a user clicks a panel’s close button (‘x’), the panel is closed and added to the ClosedPanelCollection.

A user can click a closed panel’s button to restore the corresponding panel to its previous position. Use the IDockController.Restore method to restore a panel at runtime.

You can set the bar’s location with the DockLayoutManager.ClosedPanelsBarPosition property.

Create Closed Panels

In XAML

Add a panel to the ClosedPanels collection.

Use the DockLayoutManager.ClosedPanelsBarVisibility property to specify the Closed Panels bar visibility.

The following code sample displays the Closed Panels bar, and adds panels to the ClosedPanelCollection and sets the ClosedPanelsBarVisibility to Auto:

XAML

<Window ...
  xmlns:dxdo="http://schemas.devexpress.com/winfx/2008/xaml/docking">
  <dxdo:DockLayoutManager ClosedPanelsBarVisibility="Auto">
    <dxdo:DockLayoutManager.ClosedPanels>
      <!--Create three closed (hidden) panels-->
        <dxdo:LayoutPanel Caption="Properties">
          <RichTextBox />
        </dxdo:LayoutPanel>
        <dxdo:LayoutPanel Caption="Messages">
          <RichTextBox />
        </dxdo:LayoutPanel>
        <dxdo:LayoutPanel Caption="Find Results">
          <RichTextBox />
        </dxdo:LayoutPanel>
    </dxdo:DockLayoutManager.ClosedPanels>
    <dxdo:LayoutGroup>
      <dxdo:LayoutPanel/>
    </dxdo:LayoutGroup>
  </dxdo:DockLayoutManager>
</Window>

View Example: How To Create Closed (Hidden) Panels

In Code

You can use the DockController object’s Close method.

The following code sample adds the paneFindResults LayoutPanel to the ClosedPanelCollection:

XAML

<Window ...
  xmlns:dxdo="http://schemas.devexpress.com/winfx/2008/xaml/docking">
  <dxdo:DockLayoutManager ClosedPanelsBarVisibility="Auto" x:Name="DockLayoutManager1">
    <dxdo:DockLayoutManager.ClosedPanels>
      <dxdo:LayoutPanel x:Name="paneProperties" Caption="Properties">
        <RichTextBox />
      </dxdo:LayoutPanel>
    </dxdo:DockLayoutManager.ClosedPanels>
    <dxdo:LayoutGroup>
      <dxdo:LayoutPanel x:Name="paneMessages" Caption="Messages">
        <RichTextBox />
      </dxdo:LayoutPanel>
      <dxdo:LayoutPanel x:Name="paneFindResults" Caption="Find Results">
        <RichTextBox />
      </dxdo:LayoutPanel>
    </dxdo:LayoutGroup>
  </dxdo:DockLayoutManager>
</Window>

C#

DockLayoutManager1.DockController.Close(paneFindResults);

VB.NET

DockLayoutManager1.DockController.Close(paneFindResults) 

Events

The BaseLayoutItem.AllowClose property and DockLayoutManager.DockItemClosing event allow you to prevent a panel from being closed.

The BaseLayoutItem.AllowRestore property and DockLayoutManager.DockItemRestoring event can be used to prevent panels from being restored.

Related GitHub Examples

The following code snippets (auto-collected from DevExpress Examples) contain references to the LayoutPanel class.

Note

The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.

XAML

wpf-docklayoutmanager-use-services-that-implement-the-idocumentmanagerservice/CS/DXDocumentUIServiceSample/MainWindow.xaml#L17

<dxdo:TabbedGroup>
    <dxdo:LayoutPanel Caption="WindowedDocumentUIService">
        <View:MainView>

wpf-docklayoutmanager-create-auto-hidden-panels/CS/CreateAutoHiddenPanels/Window1.xaml#L15

<dxdo:AutoHideGroup DockType="Right">
    <dxdo:LayoutPanel x:Name="paneProperties" Caption="Properties" ItemWidth="150">
        <RichTextBox />

wpf-dock-layout-manager-save-and-restore-the-dock-layout-managers-layout/CS/MainWindow.xaml#L16

<dxdo:LayoutGroup Name="root">
    <dxdo:LayoutPanel Name="panel1" Caption="Panel1" ItemWidth="3*">
        <dxg:GridControl Name="grid">

wpf-dock-layout-manager-use-events-to-dynamically-customize-context-menus/CS/DockManager_MenuCustomization/Window1.xaml#L15

<dxdo:LayoutGroup x:Name="layoutGroup3" Orientation="Vertical">
    <dxdo:LayoutPanel x:Name="paneSolutionExplorer" Caption="Solution Explorer" />
    <dxdo:LayoutPanel x:Name="paneProperties" Caption="Properties" />

wpf-docklayoutmanager-dock-panels-in-code/CS/DockPanelInCode_Ex/Window1.xaml#L16

<dxdo:LayoutGroup x:Name="rootGroup" Orientation="Horizontal">
    <dxdo:LayoutPanel
        x:Name="paneOutput"

Inheritance

Show 12 items

Object

DispatcherObject

DependencyObject

Visual

UIElement

FrameworkElement

Control

DevExpress.Xpf.Docking.psvFrameworkElement

BaseLayoutItem

ContentItem

LayoutPanel

DocumentPanel