NavigationFrame Class

The flat-styled page container without built-in navigation elements (unlike the TabPane), displaying one page at a time. Supports animation effects when navigating through pages. See Navigation Frame and Tab Pane.

Namespace: DevExpress.XtraBars.Navigation

Assembly: DevExpress.XtraBars.v22.2.dll

NuGet Package: DevExpress.Win.Navigation

public class NavigationFrame :
    ControlBase,
    ISupportLookAndFeel,
    INavigationFrame,
    ISupportBatchUpdate,
    IDocumentAdapterFactory,
    INavigationBarClient,
    ISupportInitialize,
    IDXControl,
    ISupportPageNavigation,
    ISupportAdornerUIManager,
    IWin32Window,
    IUpdateAdornerUI

Public Class NavigationFrame
    Inherits ControlBase
    Implements ISupportLookAndFeel,
               INavigationFrame,
               ISupportBatchUpdate,
               IDocumentAdapterFactory,
               INavigationBarClient,
               ISupportInitialize,
               IDXControl,
               ISupportPageNavigation,
               ISupportAdornerUIManager,
               IWin32Window,
               IUpdateAdornerUI

Remarks

Navigation frame is a content container that creates a single document interface (SDI). The control possesses the NavigationFrame.Pages collection that stores NavigationPage objects. Each page is a singleton container, capable of displaying any custom content. To populate a page, use its Controls collection.

The navigation frame has no built-in visual elements to navigate through pages at runtime - no tab headers, navigation buttons etc. Navigation through pages must be implemented manually by assigning the required page to the frame’s NavigationFrame.SelectedPage property. In the animation below, this property is manually set when different AccordionControl items are clicked (see the example below).

NavigationFrame - Animation

At design time, the frame displays navigation elements that allow you to toggle through currently existing navigation pages, create new ones or remove them (see the figure below). These elements simplify populating pages and cannot be displayed at runtime.

NavigationFrame - Design-time elements

If the NavigationFrame.AllowTransitionAnimation property is enabled, navigating through pages is followed with an animation effect, specified by the NavigationFrame.TransitionType property.

The RadioGroup and WindowsUIButtonPanel can be used as a pager for the following controls:

TileControl
TileBar
NavigationFrame
ImageSlider

The pager automatically splits the target control’s content into pages, and provides navigation buttons to scroll to corresponding pages. The pager navigation functionality is implemented as a Behavior and can be added to your controls using the BehaviorManager component.

This example demonstrates how to implement a side navigation. Drop the WinForms Accordion and Navigation Frame controls onto a Form. Use the following code to create the accordion elements, customize their settings, and implement the navigation between frames/pages.

Side Navigation - WinForms Accordion Control and Navigation Frame

C#
VB.NET

using System;
using DevExpress.XtraBars.Navigation;

private void Form1_Load(object sender, EventArgs e) {
    InitAccordion(accordionControl1);
}

void InitAccordion(AccordionControl accordion) {
    AccordionControlElement group = new AccordionControlElement(ElementStyle.Group) {
        Name = "accordionGroup1",
        Text = "Pages",
        Expanded = true
    };
    AccordionControlElement item1 = new AccordionControlElement(ElementStyle.Item) {
        Name = "accordionItem1",
        Text = "Page 1"
    };
    AccordionControlElement item2 = new AccordionControlElement(ElementStyle.Item) {
        Name = "accordionItem2",
        Text = "Page 2"
    };

    item1.Click += new EventHandler(this.accordionElement_Click);
    item2.Click += new EventHandler(this.accordionElement_Click);

    group.Elements.AddRange(new AccordionControlElement[] { item1, item2 });
    accordion.Elements.Add(group);
}

void accordionElement_Click(object sender, EventArgs e) {
    AccordionControlElement item = sender as AccordionControlElement;
    navigationFrame1.SelectedPage = item.Text == "Page 1" ? navigationPage1 : navigationPage2;
}

Imports System
Imports DevExpress.XtraBars.Navigation

Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
    InitAccordion(accordionControl1)
End Sub

Private Sub InitAccordion(ByVal accordion As AccordionControl)
    Dim group As New AccordionControlElement(ElementStyle.Group) With {.Name = "accordionGroup1", .Text = "Pages", .Expanded = True}
    Dim item1 As New AccordionControlElement(ElementStyle.Item) With {.Name = "accordionItem1", .Text = "Page 1"}
    Dim item2 As New AccordionControlElement(ElementStyle.Item) With {.Name = "accordionItem2", .Text = "Page 2"}

    AddHandler item1.Click, AddressOf accordionElement_Click
    AddHandler item2.Click, AddressOf accordionElement_Click

    group.Elements.AddRange(New AccordionControlElement() { item1, item2 })
    accordion.Elements.Add(group)
End Sub

Private Sub accordionElement_Click(ByVal sender As Object, ByVal e As EventArgs)
    Dim item As AccordionControlElement = TryCast(sender, AccordionControlElement)
    navigationFrame1.SelectedPage = If(item.Text = "Page 1", navigationPage1, navigationPage2)
End Sub