In this video you'll see how to get started with the DevExpress NavBarControl - a control
that exposes the easy-to-use navigation UI.
1.
NavBarControl Elements.
ExplorerBar.
Here we have an app with a RibbonControl and Grid Control that store some data.
Find the NavBarControl in the "Navigation and Layout" tab of the Visual Studio Toolbox
and drag it onto the form.
Set its "Dock" property to "Fill" to make the NavBar occupy all available space within
its parent container.
The NavBarControl supports 3 Views - ExplorerBar, SideBar and Navigation Pane.
Let's switch to the default ExplorerBar View.
To add Groups or Items you can use either corresponding links within the NavBarControl's
smart tag, or simply right-click the NavBar.
Now, Let's add 3 groups and 2 items.
You can place multiple links of the same item to different groups.
All links will gain the same behavior and appearance settings as the parent item.
Let's Invoke the designer and switch to the "Groups/Items/Links" section.
I'll drag navBarItem1 to groups 1 and 2 so each NavBarGroup now contains a link to the
navBarItem1.
To delete a link, select it and click the "Remove Link" button.
You can set most important properties of an element via its smart tag.
Let's customize the 3rd Group - change its caption to "Contacts" and pick a regular and
large icon for it.
Use the "GroupCaptionUseImage" property to choose whether small or large images should
be displayed.
Items can be customized in the very same way.
Rename NavBarItems 1 and 2 to "Employees" and "Vendors" respectively and pick both regular
and large icons for each one.
NavBarItems can be displayed in different ways depending on the Group Style.
To modify the Group Style, select the group and choose the required style in the corresponding
smart tag task.
Here I change the Group Style of the 3rd Group to "Large Icons List".
Simply Repeat the steps above to populate the first group ("Home") with "Inbox", "Tasks"
and "Calendar" items.
For the 2nd group - Mail - I set its group style to "control Container".
This Group Style allows you to display any stand-alone control rather than standard NavBarItems.
I have a UserControl with a TreeList added to the application, so I can drag it into
the "mail" group.
*launch app*
Groups can be expanded or collapsed via the Expand button at runtime.
The ExplorerBar View allows you to expand all groups at once.
*close app*
2.
Navigation Pane.
The Navigation Pane View differs from the ExplorerBar we've seen.
Select the NavBarControl and change its View to NavigationPane.
the Navigation Pane View allows only one expanded group at the moment.
You can use the "Expanded" check box to specify which Group will be initially expanded at
application start-up.
*launch app*
Another unique Navigation Pane feature is the ability to minimize the Pane.
the Currently expanded group in the minimized state is presented as a vertical bar, clicking
it will invoke the pop-up window that displays this group's content.
Other groups are presented as icons at the NavigationPane's bottom.
Clicking an icon will expand the corresponding Group.
*close app*
You can tweak the Navigation Pane View via the OptionsNavPane section of the NavBarControl's
properties.
For example you can set the "ShowGroupImage-In-Header" to "True" to display group icons in group
headers.
And that's it!
For more info please visit the DevExpress Documentation Center @ help.devexpress.com.
Thanks for watching and thank you for choosing DevExpress!