wpf-devexpress-dot-xpf-dot-docking-65a64039.md
A dock panel. You can use a LayoutPanel in dock and layout UIs.
Namespace : DevExpress.Xpf.Docking
Assembly : DevExpress.Xpf.Docking.v25.2.dll
NuGet Package : DevExpress.Wpf.Docking
public class LayoutPanel :
ContentItem,
IGeneratorHost,
IClosable,
ILayoutContent
Public Class LayoutPanel
Inherits ContentItem
Implements IGeneratorHost,
IClosable,
ILayoutContent
The following members return LayoutPanel objects:
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
<dxdo:DockLayoutManager>
<dxdo:LayoutGroup Caption="LayoutRoot">
<dxdo:LayoutPanel Caption="Panel1"/>
<dxdo:LayoutPanel Caption="Panel2"/>
<dxdo:LayoutPanel Caption="Panel3"/>
</dxdo:LayoutGroup>
</dxdo:DockLayoutManager>
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>
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>
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>
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>
| 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 |
| ShowTabCaptionImage | Gets or sets whether to show an image within a tab caption of the layout item. This is a dependency property. |
| TabBackgroundColor | Gets or sets the background color for the LayoutPanel‘s tab header. This is a dependency property. |
| TabCaptionImage | Gets or sets an image displayed within the layout item caption in a tabbed layout. This is a dependency property. |
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.
Use the AutoHideExpandState property to specify the panel’s auto-hide state. Refer to the AutoHideGroup class for more information.
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 |
Use the DockItemState property to specify whether the panel is docked, auto-hidden, floating, or closed. Refer to the FloatGroup class for more information.
You can use the panel’s IsMaximized and IsMinimized properties to get whether the panel is maximized or minimized.
Use the ShowRestoreButton property to specify whether the restore button is displayed within the panel.
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. |
You can use the DockLayoutManager.LayoutController object’s methods to control layout behavior.
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. |
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.
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
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);
DockLayoutManager1.DockController.Close(paneFindResults)
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.
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.
<dxdo:TabbedGroup>
<dxdo:LayoutPanel Caption="WindowedDocumentUIService">
<View:MainView>
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-diagram-mdi/CS/MainWindow.xaml#L124
<dxdo:LayoutGroup x:Name="layoutRoot" Orientation="Horizontal">
<dxdo:LayoutPanel
MaxWidth="300"
<Window.Resources>
<Style TargetType="dxdo:LayoutPanel">
<Setter Property="Caption" Value="{Binding Content.PanelCaption, RelativeSource={RelativeSource Self}}"/>
<dxdo:LayoutGroup x:Name="layoutGroup3" Orientation="Vertical">
<dxdo:LayoutPanel x:Name="paneSolutionExplorer" Caption="Solution Explorer" />
<dxdo:LayoutPanel x:Name="paneProperties" Caption="Properties" />
Show 12 items
Object DispatcherObject DependencyObject Visual UIElement FrameworkElement Control DevExpress.Xpf.Docking.psvFrameworkElement BaseLayoutItem ContentItem LayoutPanel DocumentPanel
See Also
Dock and Layout UI: Object Structure