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 navigationBar.Panes.Add(pane); return pane; }

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
    navigationBar.Panes.Add(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.