LayoutPanel Class

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

Namespace: DevExpress.Xpf.Docking

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

Declaration

public class LayoutPanel :
    ContentItem,
    IGeneratorHost,
    IClosable,
    ILayoutContent

Remarks

LayoutPanel

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

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

LayoutPanels side-by-side with other LayoutPanels

Next to a LayoutGroup

Combine panels into a LayoutGroup to create this layout type.

<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>  

LayoutPanels side-by-side with the LayoutGroup

Tab Container

Refer to the TabbedGroup class for more information.

<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>

LayoutPanels in the Tabbed Group

Float Group

Refer to the FloatGroup class for more information.

<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>

LayoutPanels in the Float Group

Auto-Hide Group

Refer to the AutoHideGroup class for more information.

<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>

LayoutPanels in the Audo-Hide Group

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.

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:

<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:

<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>
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.

Inheritance

See Also