[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 Frame and Tab Pane

Navigation Frame and Tab Pane controls are simple controls that create single document interface (SDI) and share most concepts and features.

Navigation Frame

NavigationFrame is a content container that hosts multiple pages, but allows only one of them to be displayed at a time. The Frame does not provide any visual elements to navigate through pages - no tab headers, buttons, sliders etc., which is a perfect solution when you need to implement a simple and clean application layout or you wish to restrict your end-users to navigate through pages manually. At design time, however, you will find navigation buttons that simplify populating pages, included in your Frame. <br><br> Switching between pages can be followed by animation effects, available out-of-the-box.

Tab Pane

An upgraded version of the Navigation Frame control, the TabPane control provides navigation buttons to cycle through pages at runtime. Buttons are generated automatically depending on a page caption and image. The control also has a slightly different appearance when painted using DevExpress skins.

Both controls are populated and customized in the very same way. At design time, when a control is focused, you will see a navigation toolbar (see below) that contains buttons to add a new page or remove the currently active. Arrow buttons allow to navigate through pages. The index of the currently displayed page is shown on the toolbar's left.

To do the same in code, access the pages collection using the control's Pages property. The Navigation Frame stores the NavigationPage objects within this collection. Tab Pane in its turn uses the TabNavigationPage objects.

Pages themselves can be populated at design time by simply dropping required controls onto them. If you need to populate pages in code, handle the NavigationFrame.QueryControl event. This event fires whenever the page needs to be displayed. Alternatively, specify the page's ControlName and (or) ControlTypeName properties. This dynamic page population is described in every detail for the Application UI Manager component, which uses this feature to populate its documents. Refer to the Deferred Load topic to learn more.

The currently selected page is stored within the both controls' SelectedPage property - the NavigationFrame.SelectedPage property for the Navigation Frame, the TabPane.SelectedPage property for the Tab Pane. You can also specify the index of the page within the control's Pages collection to choose the currently selected page. To do so, use the NavigationFrame.SelectedPageIndex property. These approaches are the only way to switch to another Navigation Frame's page at runtime, since this control gives no navigation UI elements. On the animation below, navigation is manually implemented by specifying the required navigation page when different AccordionControl items are clicked.

The Tab Pane control allows more flexible runtime behavior by displaying buttons for each child page. The animation below illustrates a Tab Pane cycling through its pages when an end-user clicks navigation buttons.

Tab Pane buttons are able to display text and image, assigned to the related page's PageText and Image properties respectively. Depending on the control's PageProperties.ShowMode property value, these buttons can display only image, only text or both types of their content simultaneously. The TabNavigationPage.ItemShowMode property overrides this global setting for individual Tab Pane's pages.

Navigation buttons for the Tab Pane control can be aligned only to the control's top. The only button modification allowed is setting the NavigationPane.ItemOrientation property to Orientation.Vertical. This rotates buttons and their content 90 degrees clockwise, as shown on the figure below. You can also use the NavigationPane.AppearanceButton property to modify button appearance settings, such as forecolor or font size.

Both SDI containers support animation effects out-of-the-box. If the NavigationFrame.AllowTransitionAnimation property is enabled, navigating through pages is followed with an effect specified by the NavigationFrame.TransitionType property.

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