NavBarControl Class
A control that enables you to implement a sidebar menu or allow users to switch between application modules. Supports three layouts: Navigation Pane, Explorer Bar View, and Side Bar View.
Namespace: DevExpress.Xpf.NavBar
Assembly: DevExpress.Xpf.NavBar.v22.2.dll
NuGet Package: DevExpress.Wpf.NavBar
Declaration
Related API Members
The following members return NavBarControl objects:
Remarks
Tip
The NavBarControl was designed to replicate the layout of the navigation pane in Outlook 2003, Outlook 2007, and older versions of Microsoft Explorer.
If you start a new project, we recommend that you use the AccordionControl. The AccordionControl can also be used as a navigation pane, but it has a simpler API and includes more customization options.
Add a NavBarControl to your application to implement advanced navigation capabilities. This control allows you to display a number of items arranged into different groups. Groups can be expanded/collapsed in order to show/hide their contents. You can process item click events to perform the required actions.
With WPF templates supported throughout the DXNavBar, you can easily design custom interfaces to satisfy the most demanding users.
For detailed information on the key features introduced by the DXNavBar, see the following topics:
For code samples that demonstrate how to implement most popular tasks, see Examples.
Example
This example demonstrates how the NavBarControl can be created and customized programmatically (in a code-behind file).In this sample, two groups are created within the NavBarControl: the first group contains three items; the second group's content is represented by a StackPanel holding two TextBlock controls. The second TextBlock displays the text of the selected item within the NavBarControl.The ItemSelecting event of the NavBarControl is handled to invoke a confirmation dialog allowing the selection of the first group's third item to be canceled.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using DevExpress.Xpf.NavBar;
namespace CreateNavBarControlViaCode
{
/// <summary>
/// Interaction logic for Window1.xaml
/// </summary>
public partial class Window1 : Window
{
public Window1(){
InitializeComponent();
CreateNavBarControl();
}
private void CreateNavBarControl() {
NavBarControl navBar = new NavBarControl();
//Add the NavBarControl to the control hierarchy
dockPanel.Children.Add(navBar);
DockPanel.SetDock(navBar, Dock.Left);
CreateGroup1(navBar);
CreateGroup2(navBar);
navBar.View.ItemSelecting += new NavBarItemSelectingEventHandler(navBar_ItemSelecting);
}
#region #Group_Item_Images
private void CreateGroup1(NavBarControl navBar){
NavBarGroup group1 = new NavBarGroup();
group1.Header = "Items";
//Display an image within the group's header
group1.ImageSource = new BitmapImage(new Uri("pack://application:,,,/Images/folder.png"));
NavBarItem item1 = new NavBarItem();
item1.Content = "Home";
group1.Items.Add(item1);
NavBarItem item2 = new NavBarItem();
item2.Content = "Work";
group1.Items.Add(item2);
NavBarItem item3 = new NavBarItem();
item3.Content = "Private";
//Display an image within the item
item3.ImageSource = new BitmapImage(new Uri("pack://application:,,,/Images/private.png"));
//Change item image layout
Style itemStyle = new Style();
itemStyle.Setters.Add(new Setter(NavBarViewBase.LayoutSettingsProperty, new LayoutSettings() { ImageDocking = Dock.Right }));
item3.VisualStyle = itemStyle;
group1.Items.Add(item3);
navBar.Groups.Add(group1);
}
#endregion #Group_Item_Images
#region #Group_CustomContent
private void CreateGroup2(NavBarControl navBar){
NavBarGroup group2 = new NavBarGroup();
group2.Header = "Custom Content";
//Specify that the group's content should be defined via the Content property
group2.DisplaySource = DisplaySource.Content;
//Create a StackPanel and specify it as the group's content
StackPanel stackPanel = new StackPanel() { Orientation = Orientation.Horizontal };
group2.Content = stackPanel;
//Define the panel's content by creating two text blocks
stackPanel.Children.Add(new TextBlock() {Text = "Selected Item: "});
TextBlock textBlock2 = new TextBlock();
Binding textBlockTextBinding = new Binding("SelectedItem.Content");
textBlockTextBinding.Source = navBar; //textBlockTextBinding.Source = navBar.Groups[0];
//The second text block displays the text of the NavBarControl's selected item
textBlock2.SetBinding(TextBlock.TextProperty, textBlockTextBinding);
stackPanel.Children.Add(textBlock2);
navBar.Groups.Add(group2);
}
#endregion #Group_CustomContent
#region #ItemSelecting_Event
private void navBar_ItemSelecting(object sender, NavBarItemSelectingEventArgs e){
if (e.NewItem.Content.ToString() == "Private"){
MessageBoxResult result = MessageBox.Show("Are you sure to select the 'Private' item?", "Confirm Dialog", MessageBoxButton.YesNo);
e.Cancel = (result == MessageBoxResult.No);
}
}
#endregion #ItemSelecting_Event
}
}
Related GitHub Examples
The following code snippets (auto-collected from DevExpress Examples) contain references to the NavBarControl class.
Note
The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.