NavBarControl Class

A control that enables you to implement a sidebar menu or switching between application modules. Supports three layouts: Navigation Pane, Explorer Bar View and Side Bar View.

Namespace: DevExpress.Xpf.NavBar

Assembly: DevExpress.Xpf.NavBar.v20.2.dll

NuGet Packages: DevExpress.WindowsDesktop.Wpf.NavBar, DevExpress.Wpf.Navigation

public class NavBarControl :
    Control,
    IEventArgsConverterSource,
    IWeakEventListener,
    ISupportInitialize,
    INavigatorClient,
    INotifyPropertyChanged,
    IExpandableChild

Public Class NavBarControl
    Inherits Control
    Implements IEventArgsConverterSource,
               IWeakEventListener,
               ISupportInitialize,
               INavigatorClient,
               INotifyPropertyChanged,
               IExpandableChild

The following members return NavBarControl objects:

Remarks

Add a NavBarControl control to your application to provide it with 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.

NavBar-NavPane

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:

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.

View Example

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
    }
}

<Window x:Class="CreateNavBarControlViaCode.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="250" Width="250">
    <DockPanel x:Name="dockPanel" Margin="10">

    </DockPanel>
</Window>

<Application x:Class="CreateNavBarControlViaCode.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="Window1.xaml">
    <Application.Resources>

    </Application.Resources>
</Application>

Imports Microsoft.VisualBasic
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Text
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Data
Imports System.Windows.Documents
Imports System.Windows.Input
Imports System.Windows.Media
Imports System.Windows.Media.Imaging
Imports System.Windows.Navigation
Imports System.Windows.Shapes
Imports DevExpress.Xpf.NavBar

Namespace CreateNavBarControlViaCode
    ''' <summary>
    ''' Interaction logic for Window1.xaml
    ''' </summary>
    Partial Public Class Window1
        Inherits Window
        Public Sub New()
            InitializeComponent()
            CreateNavBarControl()
        End Sub

        Private Sub CreateNavBarControl()
            Dim navBar As New NavBarControl()
            'Add the NavBarControl to the control hierarchy
            dockPanel.Children.Add(navBar)
            DockPanel.SetDock(navBar, Dock.Left)

            CreateGroup1(navBar)
            CreateGroup2(navBar)

            AddHandler navBar.View.ItemSelecting, AddressOf navBar_ItemSelecting
        End Sub

        #Region "#Group_Item_Images"
        Private Sub CreateGroup1(ByVal navBar As NavBarControl)
            Dim group1 As New NavBarGroup()
            group1.Header = "Items"
            'Display an image within the group's header
            group1.ImageSource = New BitmapImage(New Uri("pack://application:,,,/Images/folder.png"))

            Dim item1 As New NavBarItem()
            item1.Content = "Home"
            group1.Items.Add(item1)

            Dim item2 As New NavBarItem()
            item2.Content = "Work"
            group1.Items.Add(item2)

            Dim item3 As 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
            Dim itemStyle As New Style()
            itemStyle.Setters.Add(New Setter(NavBarViewBase.LayoutSettingsProperty, New LayoutSettings() With {.ImageDocking = Dock.Right}))
            item3.VisualStyle = itemStyle
            group1.Items.Add(item3)

            navBar.Groups.Add(group1)
        End Sub
        #End Region ' #Group_Item_Images

        #Region "#Group_CustomContent"
        Private Sub CreateGroup2(ByVal navBar As NavBarControl)
            Dim group2 As 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
            Dim stackPanel As New StackPanel() With {.Orientation = Orientation.Horizontal}
            group2.Content = stackPanel

            'Define the panel's content by creating two text blocks
            stackPanel.Children.Add(New TextBlock() With {.Text = "Selected Item: "})

            Dim textBlock2 As New TextBlock()
            Dim textBlockTextBinding As 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)
        End Sub
        #End Region ' #Group_CustomContent

        #Region "#ItemSelecting_Event"
        Private Sub navBar_ItemSelecting(ByVal sender As Object, ByVal e As NavBarItemSelectingEventArgs)
            If e.NewItem.Content.ToString() = "Private" Then
                Dim result As MessageBoxResult = MessageBox.Show("Are you sure to select the 'Private' item?", "Confirm Dialog", MessageBoxButton.YesNo)
                e.Cancel = (result = MessageBoxResult.No)
            End If
        End Sub
        #End Region ' #ItemSelecting_Event
    End Class
End Namespace

Imports Microsoft.VisualBasic
Imports System
Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data
Imports System.Linq
Imports System.Windows

Namespace CreateNavBarControlViaCode
    ''' <summary>
    ''' Interaction logic for App.xaml
    ''' </summary>
    Partial Public Class App
        Inherits Application
    End Class
End Namespace

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.

XAML

how-to-iterate-through-groups-and-toggle-their-expanded-state-e1622/CS/ToggleGroupExpandedState/Window1.xaml#L5

<Button Height="23" HorizontalAlignment="Left" Name="button1" VerticalAlignment="Top" Click="button1_Click">Toggle Group States</Button>
<dxn:NavBarControl Name="navBarControl1">
    <dxn:NavBarControl.Groups>

how-to-navigate-through-views-by-using-navbarcontrol-control-and-navigationframe-class-e5129/CS/DXSample/MainWindow.xaml#L28

</Grid.ColumnDefinitions>
<dxn:NavBarControl Grid.Column="0">
    <dxn:NavBarControl.View>

wpf-spreadsheetcontrol-examples-e4975/CS/SpreadsheetControl_WPF_Examples/MainWindow.xaml#L40

<Label Content="Double-click the action name on the left to run the example"   FontSize="18" Grid.ColumnSpan="2" Grid.Row="0"/>
<dxn:NavBarControl Name="navBarControl1" Grid.Column="0" Grid.Row="1" ItemsSource="{Binding}" >
    <dxn:NavBarControl.View>

how-to-add-a-draganddrop-capability-to-navbarcontrol-t164276/CS/NavBarDragDropExample/MainWindow.xaml#L10


<dxn:NavBarControl Name="navBar1" AllowDrop="False">
    <dxmvvm:Interaction.Behaviors>

how-to-synchronize-the-navbar-navigation-pane-expanded-width-with-its-popup-width-e4302/CS/NavBarSample/MainWindow.xaml#L19

<dxd:LayoutPanel>
    <dxn:NavBarControl HorizontalAlignment="Left" Name="navBarControl1" VerticalAlignment="Stretch">
        <dxn:NavBarControl.View>