Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [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]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [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]TileNav Pane
    WindowsUI Button Panel
   [Expand]Office Navigation Bar
   [Expand]Tile Control
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

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.

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.

Expanded Show animation

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.

Expanded Show animation

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.

How would you rate this topic?​​​​​​​