How to: Bind a NavBarControl to a simple DataTable

• Jun 07, 2019
• 2 minutes to read

This example demonstrates how a NavBarControl can be bound to a simple, plain data table containing two columns (“Group” and “Item”) and how the NavBarControl visualizes the table data by grouping them by the “Group” column values.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-bind-a-navbarcontrol-to-a-datatable-e1634.

MainWindow.xaml.cs

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 System.Data;

namespace NavBarBinding {
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();

            DataTable dt = new DataTable();
            dt.Columns.Add("Group", typeof(string));
            dt.Columns.Add("Item", typeof(string));
            for(int i = 1; i <= 2; i++) {
                for(int j = 1; j <= 3; j++)
                    dt.Rows.Add(new object[] { "Group " + i.ToString(), 
                        "Item " + i.ToString() + "-" + j.ToString() });
            }

            DataContext = dt;
        }
    }
}

MainWindow.xaml

<Window x:Class="NavBarBinding.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" xmlns:dxn="http://schemas.devexpress.com/winfx/2008/xaml/navbar">
    <Grid>
        <dxn:NavBarControl Name="navBarControl1" ItemsSource="{Binding}" GroupDescription="Group">
            <dxn:NavBarControl.Resources>
                <Style TargetType="dxn:NavBarGroup">
                    <Setter Property="Header" Value="{Binding}"/>
                </Style>
                <Style TargetType="dxn:NavBarItem">
                    <Setter Property="Content" Value="{Binding Path=Item}"/>
                </Style>
            </dxn:NavBarControl.Resources>
        </dxn:NavBarControl>
    </Grid>
</Window>

MainWindow.xaml.vb

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 System.Data

Namespace NavBarBinding
    ''' <summary>
    ''' Interaction logic for MainWindow.xaml
    ''' </summary>
    Partial Public Class MainWindow
        Inherits Window
        Public Sub New()
            InitializeComponent()

            Dim dt As New DataTable()
            dt.Columns.Add("Group", GetType(String))
            dt.Columns.Add("Item", GetType(String))
            For i As Integer = 1 To 2
                For j As Integer = 1 To 3
                    dt.Rows.Add(New Object() { "Group " & i.ToString(), "Item " & i.ToString() & "-" & j.ToString() })
                Next j
            Next i

            DataContext = dt
        End Sub
    End Class
End Namespace