[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications, and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gantt Control
  [Expand]Chart Control
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Collapse]Navigation Controls
   [Expand]Navigation Bar
   [Expand]Accordion Control
    Navigation Frame and Tab Pane
    Navigation Pane
    Tile Bar
   [Expand]Tile Nav Pane
    WindowsUI Button Panel
   [Expand]Office Navigation Bar
   [Expand]Tile Control
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Navigation Pane

The NavigationPane is a multi-page content container that supports collapsed and expanded tabs.

Expanded Pages

Navigation Page tabs are NavigationPage class objects. Dropping a VS Toolbox control onto your form automatically adds two pages. You can add more pages by doing one of the following:

  • Select a Navigation Pane and click the "Add Page" button.

  • Invoke the control's smart tag and click the "Add Page" link.

  • Invoke the control's smart tag and click the "Pages" link. The invoked collection editor dialog allows you to add and remove pages, as well as specify their properties.

  • Add pages to the NavigationFrame.Pages collection in code.

Use the NavigationFrame.SelectedPage or NavigationFrame.SelectedPageIndex properties to choose the active navigation page.

Expanded Design-time Access

You need to modify properties that belong to the control and the individual pages it contains to customize the Navigation Pane. To set up page properties at design-time, click tab headers to bring the page to the front, and click its central area to select it. Page smart tags provide easy access to the most frequently used page settings.

Expanded Page Content

You can drag controls from the VS Toolbox and drop them on a page's surface to populate a page. Or you can design your page content in a separate XtraUserControl and place this User Control instance inside a page. The latter can be done in two ways:

  • Add controls to the Page Controls collection.

  • Handle the NavigationFrame.QueryControl event. This event is raised when a Navigation Pane is about to display an empty Page. Event arguments allow you to identify this page and provide content to this page.

Expanded Tab Header Orientation

Tab headers are arranged according to the control's position inside the form and are anchored to the control's left edge by default. Changing the Pane's Dock property to Dock.Right aligns headers to the right edge.

Expanded Page Captions and Icons

Navigation pages use the following interconnected properties to specify their captions and icons:

Expanded Expanding, Collapsing and Resizing Pages

End-users can expand and collapse the Navigation Pane using the corresponding buttons at a page's top right corner.

  • Regular state - the control occupies the area its Size property specifies.
  • Expanded state - the control occupies the area its MaximumSize property specifies.
  • Collapsed state - pages are hidden and only the tab header area remains visible.

Related API

  • NavigationPane.State - modify this property to set the control state manually.

  • NavigationPageDefaultProperties.ShowExpandButton[NavigationPageProperties.ShowExpandButton](xref:DevExpress.XtraBars.Navigation.NavigationPageProperties.ShowExpandButton) - specify whether this individual page\all navigation pages display the expand button.

  • NavigationPageDefaultProperties.ShowCollapseButton[NavigationPageProperties.ShowCollapseButton](xref:DevExpress.XtraBars.Navigation.NavigationPageProperties.ShowCollapseButton) - specify whether this individual page\all navigation pages display the collapse button.

End-users can also drag the Page side border to resize it. This allows the control to be any size between the MinimumSize and MaximumSize. To disable this feature, set the NavigationPane.AllowResize property to false.

Expanded Overlay Resize

An overlay resize zone specifies the area at a page's border that users can click without interacting with underlying page elements. If this zone is too thin and clickable UI elements are close to the page's border, users can accidentally click or resize these elements instead of resizing the page.

To avoid this, enable the NavigationPane.AllowOverlayResize property which forces the Navigation Pane to handle all clicks near its edge. You can increase the numeric NavigationPane.OverlayResizeZoneThickness property value to enlarge the overlay resize zone. For example, the following figure illustrates the same sample, but with the overlay resize zone thickness set to 30:

Expanded Custom Header Buttons

Page headers display the expand and collapse buttons by default. You can add more buttons that perform custom actions on the NavigationPage.CustomButtonClick, NavigationPage.CustomButtonChecked and NavigationPage.CustomButtonUnchecked events by modifying the NavigationPage.CustomHeaderButtons collection at design time or in code.

Is this topic helpful?​​​​​​​