Nevron Open Vision Documentation
User Interface / Widgets / Navigation / Navigation Bar
In This Topic
    Navigation Bar
    In This Topic

    The NNavigationBar class represents a pane navigation bar similar to the one in Microsoft Office Outlook. The following image illustrates the most important elements of the NNavigationBar.

    Figure 1: Navigation Bar elements

    The Navigation Bar consists of panes. Panes are presented by the NNavigationBarPane class. Each pane has Header, Icon and Content. The selected pane is controlled by the SelectedIndex and SelectedPane properties. The content of the selected pane is displayed on top of the headers stack. The following code sample adds two panes to an navigation bar and selects the first one.


    My First NavigationBar
    Copy Code
    NNavigationBar navigationBar = new NNavigationBar();
    // create some panes
    CreateNavigationBarPane(navigationBar, "Mail", "Mail", NResources.Image__24x24_Mail_png, NResources.Image__16x16_Mail_png, new NLabel("Mail Content"));
    CreateNavigationBarPane((navigationBar, "Calendar", "Calendar", NResources.Image__24x24_Calendar_png, NResources.Image__16x16_Calendar_png, new NLabel("Calendar Content"));
    // select the first pane
    navigationBar.SelectedIndex = 0;
    NNavigationBarPane CreateNavigationBarPane(NNavigationBar navigationBar, string title, string tooltip, NImage largeImage, NImage smallImage, NWidget content)
        NNavigationBarPane pane = new NNavigationBarPane();
        // set pane content
        pane.Content = content;
        pane.Image = (NImage)smallImage.DeepClone();
        pane.Text = title;
        // set header content
        NLabel titleLabel = new NLabel(title);
        titleLabel.VerticalPlacement = ENVerticalPlacement.Fit;
        titleLabel.TextAlignment = ENContentAlignment.MiddleLeft;
        NPairBox headerContent = new NPairBox(largeImage, titleLabel);
        headerContent.Spacing = 2;
        pane.Header.Content = headerContent;
        pane.Header.Tooltip = new NTooltip(tooltip);
        // set icon content
        pane.Icon.Content = new NImageBox(smallImage);
        pane.Icon.Tooltip = new NTooltip(tooltip);
        // add the pane
        return pane;

    The header of the pane is represented by the NNavigationBarPaneHeader class. It is a content element, which when clicked selects the pane. The header is displayed in the headers stack, just below the thumb. The header element is accessible from the NNavigationBarPane-Header property.

    The icon of the pane is represented by the NNavigationBarPaneIcon. Just like the header it is a content element which when clicked selects the pane. When the header of a pane cannot be displayed in the headers stack, the pane is represented by its icon in the Icons Bar. The icon element is accessible from the NNavigationBarPane-Icon property.

    The number of visible headers is specified by the VisibleHeadersCount property. In the NavigationBar of figure 1 the VisibleHeadersCount is set to 4, this leaving only 4 items in the headers stack and placing the remaining items in the icons bar. The user visually modifies the VisibleHeadersCount by dragging the navigation bar thumb or by clicking the “Show More Buttons” and “Show Fewer Buttons” menu items. Each pane has Text and Image properties that represent the pane in the NavigationBar context menu. A pane can also be temporarily hidden by setting its Show property to false.