How to: Generate NavBarControl's groups and items from a DataSource

• Aug 01, 2019
• 3 minutes to read

This example demonstrates how to populate a NavBarControl with items from an external DataSource.

View Example

MainWindow.xaml.cs

// Developer Express Code Central Example:
// How to generate groups and items via ItemsSource
// 
// This example demonstrates how to bind NavBarControl with a DataSource.
// 
// You can find sample updates and versions for different programming languages here:
// https://supportcenter.devexpress.com/ticket/details/e3541/how-to-generate-groups-and-items-via-itemssource

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 Q346723 {
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window {
        public MainWindow() {
            DataContext = Groups.Create();
            InitializeComponent();
        }
    }
    public class Groups : List<Group> {
        public static Groups Create() {
            Groups res = new Groups();
            for(int i = 0; i < 5; i++) {
                Group gr = new Group() {
                    Header = "Group " + i.ToString(),
                };
                gr.Items = Items.Create(gr.Header);
                res.Add(gr);
            }
            return res;
        }
    }
    public class Group {
        public string Header { get; set; }
        public Items Items { get; set; }
    }
    public class Items : List<Item> {
        public static Items Create(string groupName) {
            Items res = new Items();
            for(int i = 0; i < 10; i++) {
                Item item = new Item() { 
                    Header = groupName + ", Header " + i.ToString(),
                };
                res.Add(item);
            }
            return res;
        }
    }
    public class Item {
        public string Header { get; set; }
    }
}

MainWindow.xaml

<Window x:Class="Q346723.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxn="http://schemas.devexpress.com/winfx/2008/xaml/navbar"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style TargetType="dxn:NavBarGroup">
            <Setter Property="Header" Value="{Binding Header}"/>
            <Setter Property="ItemsSource" Value="{Binding Items}"/>
        </Style>
        <Style TargetType="dxn:NavBarItem">
            <Setter Property="Content" Value="{Binding}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <DataTemplate>
                        <TextBlock Text="{Binding Header}" Background="Black" Foreground="Yellow" />
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <dxn:NavBarControl ItemsSource="{Binding}">
            <dxn:NavBarControl.View>
                <dxn:NavigationPaneView/>
            </dxn:NavBarControl.View>
        </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 DevExpress.Xpf.NavBar

Namespace Q346723
    ''' <summary>
    ''' Interaction logic for MainWindow.xaml
    ''' </summary>
    Partial Public Class MainWindow
        Inherits Window
        Public Sub New()
            DataContext = Groups.Create()
            InitializeComponent()
        End Sub
    End Class
    Public Class Groups
        Inherits List(Of Group)
        Public Shared Function Create() As Groups
            Dim res As New Groups()
            For i As Integer = 0 To 4
                Dim gr As New Group() With {.Header = "Group " & i.ToString()}
                gr.Items = Items.Create(gr.Header)
                res.Add(gr)
            Next i
            Return res
        End Function
    End Class
    Public Class Group
        Private privateHeader As String
        Public Property Header() As String
            Get
                Return privateHeader
            End Get
            Set(ByVal value As String)
                privateHeader = value
            End Set
        End Property
        Private privateItems As Items
        Public Property Items() As Items
            Get
                Return privateItems
            End Get
            Set(ByVal value As Items)
                privateItems = value
            End Set
        End Property
    End Class
    Public Class Items
        Inherits List(Of Item)
        Public Shared Function Create(ByVal groupName As String) As Items
            Dim res As New Items()
            For i As Integer = 0 To 9
                Dim item As New Item() With {.Header = groupName & ", Header " & i.ToString()}
                res.Add(item)
            Next i
            Return res
        End Function
    End Class
    Public Class Item
        Private privateHeader As String
        Public Property Header() As String
            Get
                Return privateHeader
            End Get
            Set(ByVal value As String)
                privateHeader = value
            End Set
        End Property
    End Class
End Namespace